在 CSS 中常见的列表 (list) 属性有以下几种：
list-style-type
list-style-position
list-style-image
list-style
每一个属性在以下会有详细地介绍：
list-style-type
list-style-type 属性是用来设定在清单中，每一条之前的记号要用什麽。最常见的 list-style-type 设定值为：
none (没有)
disc (全黑圆圈)
circle (空心圆圈)
square (正方形)
也可以使用有序字符集。常见的是：
upper-latin (大写拉丁文)
lower-latin (小写拉丁文)
upper-roman (大写罗马文)
lower-roman (小写罗马文)
upper-alpha (大写希腊文 )
lower-alpha (小写希腊文 )
以下列举几个例子：
例 1：
<ul style='list-style-type:upper-roman;'> <li>项目 1</li> <li>项目 2</li> </ul>
結果：
項目 1
項目 2
例 2：
<ul style='list-style-type:square;'> <li>正方形项目 1</li> <li>正方形项目 2</li> </ul>
結果：
正方形項目 1
正方形項目 2
list-style-position
list-style-position 属性让我们可以决定记号是否应该被视为是文字的一部份，并且由此而决定记号的位置。这个属性可能的设定值为 "inside" 及 "outside"。预定值为 "outside"。
以下是两个例子，由其中我们可以看出来 inside 及 outside 的不同：
例 3:
<ul style='list-style-position:inside;'> <li>第一个项目<br>第一项目的第二行 <li>第二个项目 </ul>
結果：
第一個項目
第一項目的第二行第二個項目
例 4：
<ul style='list-style-position:outside;'> <li>第一个项目<br>第一项目的第二行 <li>第二个项目 </ul>
結果：
第一個項目
第一項目的第二行第二個項目
list-style-image
list-style-image 属性是用来将某个图案设定为记号。这个属性的用法为，
list-style-image:url([image_url]);
举例来说，若 CSS 样式为：
ul {
list-style-image:url("circle.gif");
}那以下的 HTML 码，
<ul> <li>第一项利用自我设定的记号。 <li>第二项利用自我设定的记号。 </ul>
就会显现为，
第一项利用自我设定的记号。
第一项利用自我设定的记号。
list-style
以上提到的这三个 (list-style-style、list-style-position、及 list-style-image) 属性可以被简化为一个 list-style 属性。这种做法称为捷径 (shortcut)。在这裡，属性的顺序并不重要。
举例来说，以下的 CSS 样式，
ul {
list-style: url("circle.gif") none inside;
}套用在以下的 HTML 码中，
<ul> <li>第一项以捷径方式列出的清单。 <li>第二项以捷径方式列出的清单。 </ul>
就会显现出
第一项以捷径方式列出的清单。
第二项以捷径方式列出的清单。
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程