CSS list-style-type 属性

实例

设置不同的列表样式：

  1. ul.circle {list-style-type:circle;}
  2. ul.square {list-style-type:square;}
  3. ol.upper-roman {list-style-type:upper-roman;}
  4. ol.lower-alpha {list-style-type:lower-alpha;}

（在页面底部可以找到更多实例）

浏览器支持


IE Firefox Chrome Safari Opera
ie firefox chrome safari opera

所有浏览器都支持 list-style-type 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "decimal-leading-zero"、"lower-greek"、"lower-latin"、"upper-latin"、"armenian"、"georgian" 或 "inherit"。

定义和用法

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

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

可能的值

CSS2 的值：

值 描述
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, 等。（日文片假名）

CSS2.1 的值：

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

实例

在无序列表中的不同类型的列表标记

本例演示在CSS中不同类型的列表项标记。 

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. ul.disc {list-style-type: disc}
  5. ul.circle {list-style-type: circle}
  6. ul.square {list-style-type: square}
  7. ul.none {list-style-type: none}
  8. </style>
  9. </head>
  11. <body>
  12. <ul class="disc">
  13. <li>咖啡</li>
  14. <li>茶</li>
  15. <li>可口可乐</li>
  16. </ul>
  18. <ul class="circle">
  19. <li>咖啡</li>
  20. <li>茶</li>
  21. <li>可口可乐</li>
  22. </ul>
  24. <ul class="square">
  25. <li>咖啡</li>
  26. <li>茶</li>
  27. <li>可口可乐</li>
  28. </ul>
  30. <ul class="none">
  31. <li>咖啡</li>
  32. <li>茶</li>
  33. <li>可口可乐</li>
  34. </ul>
  35. </body>
  37. </html>

在有序列表中不同类型的列表项标记

本例演示在CSS中不同类型的列表项标记。 

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. ol.decimal {list-style-type: decimal}
  5. ol.lroman {list-style-type: lower-roman}
  6. ol.uroman {list-style-type: upper-roman}
  7. ol.lalpha {list-style-type: lower-alpha}
  8. ol.ualpha {list-style-type: upper-alpha}
  9. </style>
  10. </head>
  12. <body>
  13. <ol class="decimal">
  14. <li>咖啡</li>
  15. <li>茶</li>
  16. <li>可口可乐</li>
  17. </ol>
  19. <ol class="lroman">
  20. <li>咖啡</li>
  21. <li>茶</li>
  22. <li>可口可乐</li>
  23. </ol>
  25. <ol class="uroman">
  26. <li>咖啡</li>
  27. <li>茶</li>
  28. <li>可口可乐</li>
  29. </ol>
  31. <ol class="lalpha">
  32. <li>咖啡</li>
  33. <li>茶</li>
  34. <li>可口可乐</li>
  35. </ol>
  37. <ol class="ualpha">
  38. <li>咖啡</li>
  39. <li>茶</li>
  40. <li>可口可乐</li>
  41. </ol>
  42. </body>
  44. </html>

所有的列表样式类型

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

  1.  <html>
  2.  <head>
  3.  <style type="text/css">
  4.  ul.none {list-style-type: none}
  5.  ul.disc {list-style-type: disc}
  6.  ul.circle {list-style-type: circle}
  7.  ul.square {list-style-type: square}
  8.  ul.decimal {list-style-type: decimal}
  9.  ul.decimal-leading-zero {list-style-type: decimal-leading-zero}
  10.  ul.lower-roman {list-style-type: lower-roman}
  11.  ul.upper-roman {list-style-type: upper-roman}
  12.  ul.lower-alpha {list-style-type: lower-alpha}
  13.  ul.upper-alpha {list-style-type: upper-alpha}
  14.  ul.lower-greek {list-style-type: lower-greek}
  15.  ul.lower-latin {list-style-type: lower-latin}
  16.  ul.upper-latin {list-style-type: upper-latin}
  17.  ul.hebrew {list-style-type: hebrew}
  18.  ul.armenian {list-style-type: armenian}
  19.  ul.georgian {list-style-type: georgian}
  20.  ul.cjk-ideographic {list-style-type: cjk-ideographic}
  21.  ul.hiragana {list-style-type: hiragana}
  22.  ul.katakana {list-style-type: katakana}
  23.  ul.hiragana-iroha {list-style-type: hiragana-iroha}
  24.  ul.katakana-iroha {list-style-type: katakana-iroha}
  25.  </style>
  26.  </head>
  28.  <body>
  29.  <ul class="none">
  30.  <li>"none" 类型</li>
  31.  <li>茶</li>
  32.  <li>可口可乐</li>
  33.  </ul>
  35.  <ul class="disc">
  36.  <li>Disc 类型</li>
  37.  <li>茶</li>
  38.  <li>可口可乐</li>
  39.  </ul>
  41.  <ul class="circle">
  42.  <li>Circle 类型</li>
  43.  <li>茶</li>
  44.  <li>可口可乐</li>
  45.  </ul>
  47.  <ul class="square">
  48.  <li>Square 类型</li>
  49.  <li>茶</li>
  50.  <li>可口可乐</li>
  51.  </ul>
  53.  <ul class="decimal">
  54.  <li>Decimal 类型</li>
  55.  <li>茶</li>
  56.  <li>可口可乐</li>
  57.  </ul>
  59.  <ul class="decimal-leading-zero">
  60.  <li>Decimal-leading-zero 类型</li>
  61.  <li>茶</li>
  62.  <li>可口可乐</li>
  63.  </ul>
  65.  <ul class="lower-roman">
  66.  <li>Lower-roman 类型</li>
  67.  <li>茶</li>
  68.  <li>可口可乐</li>
  69.  </ul>
  71.  <ul class="upper-roman">
  72.  <li>Upper-roman 类型</li>
  73.  <li>茶</li>
  74.  <li>可口可乐</li>
  75.  </ul>
  77.  <ul class="lower-alpha">
  78.  <li>Lower-alpha 类型</li>
  79.  <li>茶</li>
  80.  <li>可口可乐</li>
  81.  </ul>
  83.  <ul class="upper-alpha">
  84.  <li>Upper-alpha 类型</li>
  85.  <li>茶</li>
  86.  <li>可口可乐</li>
  87.  </ul>
  89.  <ul class="lower-greek">
  90.  <li>Lower-greek 类型</li>
  91.  <li>茶</li>
  92.  <li>可口可乐</li>
  93.  </ul>
  95.  <ul class="lower-latin">
  96.  <li>Lower-latin 类型</li>
  97.  <li>茶</li>
  98.  <li>可口可乐</li>
  99.  </ul>
  101.  <ul class="upper-latin">
  102.  <li>Upper-latin 类型</li>
  103.  <li>茶</li>
  104.  <li>可口可乐</li>
  105.  </ul>
  107.  <ul class="hebrew">
  108.  <li>Hebrew 类型</li>
  109.  <li>茶</li>
  110.  <li>可口可乐</li>
  111.  </ul>
  113.  <ul class="armenian">
  114.  <li>Armenian 类型</li>
  115.  <li>茶</li>
  116.  <li>可口可乐</li>
  117.  </ul>
  119.  <ul class="georgian">
  120.  <li>Georgian 类型</li>
  121.  <li>茶</li>
  122.  <li>可口可乐</li>
  123.  </ul>
  125.  <ul class="cjk-ideographic">
  126.  <li>Cjk-ideographic 类型</li>
  127.  <li>茶</li>
  128.  <li>可口可乐</li>
  129.  </ul>
  131.  <ul class="hiragana">
  132.  <li>Hiragana 类型</li>
  133.  <li>茶</li>
  134.  <li>可口可乐</li>
  135.  </ul>
  137.  <ul class="katakana">
  138.  <li>Katakana 类型</li>
  139.  <li>茶</li>
  140.  <li>可口可乐</li>
  141.  </ul>
  143.  <ul class="hiragana-iroha">
  144.  <li>Hiragana-iroha 类型</li>
  145.  <li>茶</li>
  146.  <li>可口可乐</li>
  147.  </ul>
  149.  <ul class="katakana-iroha">
  150.  <li>Katakana-iroha 类型</li>
  151.  <li>茶</li>
  152.  <li>可口可乐</li>
  153.  </ul>
  155.  </body>
  156.  </html>

相关页面

CSS 教程：CSS 列表

CSS 参考手册：CSS list-style 属性

HTML DOM 参考手册：listStyleImage 属性