CSS 列表样式提供了强大的功能，用于定制 HTML 列表的外观。通过 CSS，可以轻松地改变列表项的标记类型、位置，甚至使用图像作为列表项标记。以下是对 CSS 列表样式的详细学习笔记。
一、HTML 列表类型
在 HTML 中，主要有两种类型的列表：
-
无序列表（
<ul>）：列表项通常用特殊图形（如小黑点、小方框等）标记。HTML
预览
复制
<ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> -
有序列表（
<ol>）：列表项通常用数字或字母标记。HTML
预览
复制
<ol> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol>
二、CSS 列表样式类型（list-style-type）
通过 list-style-type 属性，可以指定列表项标记的类型。以下是一些常见的值：
无序列表
-
none：无标记 -
disc：实心圆（默认值） -
circle：空心圆 -
square：正方形
有序列表
-
none：无标记 -
decimal：数字（默认值） -
lower-alpha：小写英文字母 -
upper-alpha：大写英文字母 -
lower-roman：小写罗马数字 -
upper-roman：大写罗马数字
示例
css
复制
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}三、使用图像作为列表项标记（list-style-image）
通过 list-style-image 属性，可以将图像设置为列表项标记。这可以让列表看起来更加美观和个性化。
示例
css
复制
ul {
list-style-image: url('sqpurple.gif');
}浏览器兼容性问题
不同浏览器在显示图像标记时可能会有差异。例如，IE 和 Opera 可能会比 Firefox、Chrome 和 Safari 显示得更高一点。为了确保在所有浏览器中一致显示，可以使用以下方法：
浏览器兼容性解决方案
css
复制
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）
list-style 是一个简写属性，可以将 list-style-type、list-style-position 和 list-style-image 合并到一个声明中。
示例
css
复制
ul {
list-style: square url("sqpurple.gif");
}属性顺序
-
list-style-type -
list-style-position（可选） -
list-style-image（可选）
如果某些值缺失，其他值仍然可以按顺序指定。
五、移除默认列表样式
默认情况下，<ul> 和 <ol> 会有一些内边距（padding）和外边距（margin）。如果需要移除这些默认样式，可以使用以下代码：
示例
css
复制
ul {
list-style-type: none;
margin: 0;
padding: 0;
}六、CSS 列表属性总结
表格
复制
| 属性 | 描述 |
|---|---|
list-style |
简写属性，用于将所有列表样式属性设置在一个声明中 |
list-style-image |
将图像设置为列表项标记 |
list-style-position |
设置列表项标记的位置（inside 或 outside） |
list-style-type |
设置列表项标记的类型 |