CSS 列表

CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。

CSS 列表

从某种意义上讲，不是描述性的文本的任何内容都可以认为是列表。人口普查、太阳系、家谱、参观菜单，甚至你的所有朋友都可以表示为一个列表或者是列表的列表。

由于列表如此多样，这使得列表相当重要，所以说，CSS 中列表样式不太丰富确实是一大憾事。

列表类型

要影响列表的样式，最简单（同时支持最充分）的办法就是改变其标志类型。

例如，在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。

要修改用于列表项的标志类型，可以使用属性 list-style-type：

  1. ul {list-style-type : square}

上面的声明把无序列表中的列表项标志设置为方块。

列表项图像

有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到：

  1. ul li {list-style-image : url(xxx.gif)}

只需要简单地使用一个 url() 值，就可以使用图像作为标志。

列表标志位置

CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用 list-style-position 完成的。

简写列表样式

为简单起见，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style，就像这样：

  1. li {list-style : url(example.gif) square inside}

list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。

CSS 列表实例：

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

本例演示在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>

将图像作为列表项标记

本例演示如何将图像作为列表项标记。 

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. ul 
  5. {
  6. list-style-image: url('/i/eg_arrow.gif')
  7. }
  8. </style>
  9. </head>
  11. <body>
  12. <ul>
  13. <li>咖啡</li>
  14. <li>茶</li>
  15. <li>可口可乐</li>
  16. </ul>
  17. </body>
  19. </html>

放置列表标记

本例演示在何处放置列表标记。 

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. ul.inside 
  5. {
  6. list-style-position: inside
  7. }
  9. ul.outside 
  10. {
  11. list-style-position: outside
  12. }
  13. </style>
  14. </head>
  16. <body>
  17. <p>该列表的 list-style-position 的值是 "inside"：</p>
  18. <ul class="inside">
  19. <li>Earl Grey Tea - 一种黑颜色的茶</li>
  20. <li>Jasmine Tea - 一种神奇的“全功能”茶</li>
  21. <li>Honeybush Tea - 一种令人愉快的果味茶</li>
  22. </ul>
  24. <p>该列表的 list-style-position 的值是 "outside"：</p>
  25. <ul class="outside">
  26. <li>Earl Grey Tea - 一种黑颜色的茶</li>
  27. <li>Jasmine Tea - 一种神奇的“全功能”茶</li>
  28. <li>Honeybush Tea - 一种令人愉快的果味茶</li>
  29. </ul>
  30. </body>
  31. </html>

在一个声明中定义所有的列表属性

本例演示将所有针对列表的属性设置于一个简写属性。 

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. ul 
  5. {
  6. list-style: square inside url('/i/eg_arrow.gif')
  7. }
  8. </style>
  9. </head>
  11. <body>
  12. <ul>
  13. <li>咖啡</li>
  14. <li>茶</li>
  15. <li>可口可乐</li>
  16. </ul>
  17. </body>
  19. </html>

CSS 列表属性(list)

属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
marker-offset