CSS 简明教程 - 列表样式属性
CSS 中的列表相关的属性可用于设置列表和列表项的样式
CSS 中跟列表和列表项相关的属性有 5 个
| 属性 | 说明 |
|---|---|
| list-style-type | 用于设置列表标记的类型 |
| list-style-position | 指示如何相对于对象的内容绘制列表项标记 |
| list-style-image | 属性使用图像来替换列表项的标记 |
| list-style | 简写属性，在一个声明中设置所有的列表属性 |
| marker-offset | 当列表为一个有序列表时，设置列表标记的偏移量 |
现在，我们通过一些示例来学些这些列表属性
列表标记类型 ( list-style-type )
list-style-type 属性用于设置列表标记的类型，例如
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <ul style="list-style-type:circle;"> <li>数学</li> <li>社会学</li> <li>物理</li> </ul> <ul style="list-style-type:square;"> <li>数学</li> <li>社会学</li> <li>物理</li> </ul> <ol style="list-style-type:decimal;"> <li>数学</li> <li>社会学</li> <li>物理</li> </ol> <ol style="list-style-type:lower-alpha;"> <li>数学</li> <li>社会学</li> <li>物理</li> </ol> <ol style="list-style-type:lower-roman;"> <li>数学</li> <li>社会学</li> <li>物理</li> </ol> </body> </html>
注意：某些值仅对 <ul> 列表有效，而有些值则仅对 <ol> 列表有效
列表图片标记 ( list-style-image )
如果你需要使用特殊的标记，例如图像，则可以使用 list-style-image 属性来设置
ul { list-style-image: url('sqpurple.gif'); }
但不幸的是，上述示例的结果在所有浏览器中都各不相同，IE 和 Opera 中的图像显示比Firefox，Chrome和 Safari 中的显示要高一些
如果你想要图片标记在所有的浏览器中都在相同的位置，则应该如下矫正代码
ul { list-style-type: none; padding: 0px; margin: 0px; } ul li { background-image: url(sqpurple.gif); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px; }
对，就是放弃 list-style-image ，转而使用 background-color
列表样式位置 ( list-style-position )
list-style-position 属性指定列表项标记 ( 项目符号点 ) 的位置
-
list-style-position:outside;表示项目符号点位于列表项之外，列表项的每一行的开头将垂直对齐 -
list-style-position:inside;表示项目符号将位于列表项内，因为它是列表项的一部分，所以它将成为文本的一部分并在开头将文本推开一定的距离
下面是一些示例
ul.a { list-style-position: outside; } ul.b { list-style-position: inside; }
列表样式属性 ( list-style )
如果将上面三个属性一起设置，对，比如下面这样
ul.a { list-style-type:none; list-style-image: url('sqpurple.gif'); list-style-position: inside; }
写起来是不是很费劲，而且，一般情况下，我们都不会使用 list-style-image 和 list-style-position
所以，我们会使用它们的简写属性 list-style
下面是一个例子
li { list-style : url(example.gif) square inside; }
当使用简写属性，这三个属性的书写顺序为
list-style-type用于设置列表标记的类型list-style-position指示如何相对于对象的内容绘制列表项标记list-style-image属性使用图像来替换列表项的标记
如果任何一个属性缺失，则会使用该属性的默认属性
列表标记偏移属性 ( marker-offset )
marker-offset 的属性可以用来指定标记与标记相关的文本之间的距离
该属性的值应该是一个长度，如下例所示
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> ul { list-style: inside square; marker-offset:2em; } ol { list-style: outside upper-alpha; marker-offset:2cm; } </style> </head> <body> <ul> <li>数学</li> <li>社会学</li> <li>物理</li> </ul> <ol> <li>数学</li> <li>社会学</li> <li>物理学</li> </ol> </body> </html>
该属性很好用，不幸的是，它不会 IE 6 和 Netscape 7 所支持
