list-style属性

在CSS中列表样式也是一个复合属性，可以将列表相关的样式都综合定义在一个复合属性list-style中。使用list-style属性综合设置列表样式的语法格式如下：

list-style:列表项目符号 列表项目符号的位置 列表项目图像;

使用复合属性list-style时，通常按上面语法格式中的顺序书写，各个样式之间以空格隔开，不需要的样式可以省略。示例代码如下：

1 <style type="text/css">

 2 ul{list-style:circle inside;}

 3 .one{list-style: outside url(1.png);}

 4 </style>

运行示例代码，效果如图1所示。

图1 list-style属性的使用

值得一提的是，在实际网页制作过程中，为了更高效地控制列表项显示符号，通常将list-style的属性值定义为none，然后通过为<li>设置背景图像的方式实现不同的列表项目符号。示例代码如下：

 1 <style type="text/css">

 2 dd{

 3 list-style:none;   /*清除列表的默认样式*/

 4 height:26px;

 5 line-height:26px;

 6 background:url(2.png) no-repeat left center; /*为li设置背景图像 */

 7 padding-left:25px;

 8 } 

 9 </style>

运行示例代码，效果如图2所示。

图2 使用背景属性定义列表项显示符号

通过图2看出，每个列表项前都添加了列表项目图像。如果需要调整列表项目图像只需更改标签的背景属性即可。