css中list-style-type属性 CSS list-style-type 属性

css中list-style-type属性

list-style-type属性是CSS中用来设置列表项标记的属性，它可以控制列表项标记的类型、位置以及图片。它是CSS中常用的一个属性，在HTML中使用ul或ol元素时，可以使用list-style-type来改变列表项标记的外观。

list-style-type: disc; 
list-style-type: circle; 
list-style-type: square; 
list-style-type: decimal; 
list-style-type: lower-roman; 
list-style-type: upper-roman; 
list-style-type: lower-alpha; 
list-style-type: upper_alpha; 

当然，我们也可以使用图片作为列表项标记，这时就要使用 list_style_image 属性了。例如：

ul { list_style_image : url(images/bullet.gif); }

上述代码将会将图片images/bullet.gif作为ul元素中所有li元素的标记。当然，我们也可以通过将 list_style_image 和 list_style_type 结合使用来实现更加复杂的效果。例如：

ul { list_style_image : url(images/bullet.gif);  list_style_type : square;}

上述代码将会将图片images/bullet.gif作为ul元素中所有li元素的标记，并且显示为实心方块。此外，我们还可以通过 list_position 属性来控制标记的位置。例如：

ul { list_position : inside;}

上述代码将会将ul元素中所有li元素的标记显示在文本之前。总之，通过使用CSS中的list—stype—tyle属性我们可以很方便地对HTML中ol、ul、dl三者的列表项样式进行修改。

CSS list-style-type 属性

CSS list-style-type 属性

实例

设置一些不同的列表样式：

ul.circle {list-style-type:circle}
ul.square {list-style-type:square}
ol.upper-roman {list-style-type:upper-roman}
ol.lower-alpha {list-style-type:lower-alpha}

在此页底部有更多的例子。

---

属性定义及使用说明

list-style-type 属性设置列表项标记的类型。

默认值：	"disc" for <ul> and "decimal" for <ol>
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.listStyleType="square"

---

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
list-style-type	1.0	4.0	1.0	1.0	3.5

---

属性值

值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
hebrew	传统的希伯来编号方式
armenian	传统的亚美尼亚编号方式
georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic	简单的表意数字
hiragana	标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

---

更多实例

所有不同的列表项标记列表
这个例子演示了所有不同的列表项标记。

---

相关文章

CSS 教程: CSS 列表

CSS 参考手册: list-style 属性