CSS list-style-type รายละเอียด

Definition and usage

The list-style-type attribute sets the type of list item marker.

See also:

CSS Tutorial:CSS รายการ

CSS Reference Manual:CSS list-style รายละเอียด

HTML DOM Reference Manual:listStyleType attribute

Examples

Set different list styles:

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;}

Try it yourself

(More examples can be found at the bottom of the page)

CSS syntax

list-style-type: value;

Attribute value

Values of CSS2:

Value Description
none No marker.
disc Default. The marker is a solid circle.
circle The marker is a hollow circle.
square The marker is a solid square.
decimal The marker is a number.
decimal-leading-zero numbers marked with a zero at the beginning (01, 02, 03, ฯลฯ)
lower-roman lower-roman (i, ii, iii, iv, v, ฯลฯ)
upper-roman 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, 等。（日文片假名）

CSS2.1 的值：

disc | circle | square | decimal | decimal-leading-zero | 
lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | 
armenian | georgian | none | inherit

技术细节

默认值： disc
继承性： yes
版本： CSS1
JavaScript 语法： object.style.listStyleType="square"

更多实例

在无序列表中的不同类型的列表标记
本例演示在CSS中不同类型的列表项标记。
在有序列表中不同类型的列表项标记
本例演示在CSS中不同类型的列表项标记。
所有的列表样式类型
本例演示在CSS中所有不同类型的列表项标记。

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5