CSS列表属性主要包括列表类型(list-style-type)、列表图像(list-style-image)和列表位置(list-style-position)。
一、list-style-type
list-style-type属性用于设置列表类型(标志类型)。例如,在一个无序列表中,列表项的标志 (marker) 是出现在各列表项旁边的圆点(disc);在有序列表中,标志可能是字母(a/A/...)、数字(1/i/I...)或另外某种计数体系中的一个符号。例如,下面的声明把无序列表中的列表项标志设置为方块。
/*将无序列表中的列表项标志设置为方块*/ ul {list-style-type : square}
二、list-style-image
list-style-image属性用于设置列表的类型为一幅图片,也就是使用图像来替换列表项的标记。这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用 list-style-position 属性控制。list-style-image属性的语法为:ul li {list-style-image : url(xxx.gif)},只需要简单地使用一个 url() 值,就可以使用图像作为标志。 例如,下面的声明把图像设置为列表中的项目标记:
/*把图像设置为列表中的项目标记*/ ul { list-style-image:url("/i/arrow.gif"); list-style-type:square; }
说明:上面的例子将ul中li的项目标记用list-style-image属性设置为"/i/arrow.gif"这幅图片,并且使用一个list-style-type属性设置来防止图像标记不可用。
三、list-style-position
list-style-position 属性用于设置列表项标记的位置,就是指定在何处放置列表项标记。该属性用于声明列表标志相对于列表项内容的位置,取值包括:外部 (outside) 标志会放在离列表项边框边界一定距离处,不过这距离在 CSS 中未定义;内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。例如,下面的例子规定列表中列表项目标记的位置:
/*列表项标记在列表内容的内部*/ ul.inside { list-style-position: inside } /*列表项标记在列表内容的外部*/ ul.outside { list-style-position: outside }
四、list-style
list-style是各种列表属性的一个组合,是一种简写属性,它在一个声明中设置所有的列表属性。该声明涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素,所以在普通的 HTML 和 XHTML 中只能用于 li 元素,不过实际上它可以应用到任何元素,并由 list-item 元素继承。list-style 的值可以按任何顺序列出,而且这些值都可以忽略。只要提供了一个值,其它的就会填入其默认值。
/*CSS列表的简写*/ li {list-style : url(example.gif) square inside}