7.5 使用CSS样式表美化列表
上面所介绍的HTML标签提供了项目列表的基本功能，引入CSS后，利用CSS样式表中有关列表的属性来定义列表，能使列表样式更加丰富、美观。本节介绍使用CSS设置列表属性，主要包括列表符号样式、缩进等。
1.列表符号样式list-style-type
列表符号样式默认为实心圆，如果要定义其他符号效果，可以通过list-style-type属性来设置。这个属性可以是定义整个列表的符号样式，也可以是针对其中的某个列表项＜li＞来定义。列表符号样式见表7-1。
表7-1 列表符号样式
实例代码如下：
运行结果如图7-6所示。
图7-6 列表符号样式
2.列表符号图像list-style-image
属性list-style-image用来设置列表符号的图像类型，使列表符号不局限于规定的那些样式，丰富和美化了列表符号。
本属性有如下两个可选值：
（1）none：表示不设置列表图像，是默认值。
（2）url：指定图像的名称或者路径。
如果指定的图像路径不正确，系统会按none处理；另外要注意图像大小，图像太大会影响列表的美观（图像是按其原始大小显示的）。
将上一个实例中的项目符号用图像实现，代码如下：
运行结果如图7-7所示。
图7-7 图像符号
3.列表缩进list-style-position
list-style-position属性用于设置列表项缩进的位置。
本属性同样有两个可选值，如下：
（1）inside：表示列表符号缩进，即列表项目标记放置在文本以内，且环绕文本根据标记对齐。
（2）outside：表示保持标记位于文本的左侧，即列表标记放置在文本以外，且环绕文本不根据标记对齐，是默认值。
修改上一个实例代码如下：
运行代码，可以看到p1设置为inside，文本有缩进的效果；p2设置为outside，是默认值；其他没有设置样式的与之效果一样，如图7-8所示。
图7-8 列表缩进
4.复合属性list-style
以上3种属性的组合即复合属性list-style。它的基本语法格式为：
3个属性间用空格分隔，其默认值为：
将上面的实例用复合属性list-style实现，代码如下：
运行结果如图7-9所示。
图7-9 复合属性
这个运行结果看似与图7-7相似，但对比后可以看出文本的对齐方式有所不同，这是因为定义了缩进属性inside。