在 CSS 中，对于列表样式的定义，主要是以下 3 个方面。
- 列表项符号。
- 列表项位置。
- 列表项图片。
CSS 定义列表项符号
在学习 HTML 时，不管是有序列表还是无序列表，它们的列表项符号都是使用元素的 type 属性来定义的。但在实际开发中，结构和样式应该是分离的，那么在 CSS 中，我们应该如何定义列表项符号呢？
1. 定义列表项符号
在 CSS 中，不管是有序列表还是无序列表，我们都是使用 list-style-type 属性来定义列表项符号。
语法：
list-style-type: 关键字;说明：
list-style-type 属性取值如下表 1 和表 2 所示。
| 属性值 | 说明 |
|---|---|
| decimal | 阿拉伯数字：1、2、3…（默认值） |
| lower-roman | 小写罗马数字：i、ii、iii… |
| upper-roman | 大写罗马数字：I、II、III… |
| lower-alpha | 小写英文字母：a、b、c… |
| upper-alpha | 大写英文字母：A、B、C… |
| 属性值 | 说明 |
|---|---|
| disc | 实心圆●（默认值） |
| circle | 空心圆○ |
| square | 正方形■ |
注意: list-style-type 属性通常应用于 ol 或 ul 元素，但它会作用于其下的 li 列表项。
示例 1：有序列表的列表项符号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ol { list-style-type: lower-roman; }
</style>
</head>
<body>
<h3></h3>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Vue</li>
<li>React</li>
</ol>
</body>
</html>页面效果如下图所示。
示例 2：无序列表的列表项符号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul { list-style-type: circle; }
</style>
</head>
<body>
<h3></h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Vue</li>
<li>React</li>
</ul>
</body>
</html>页面效果如下图所示。
2. 去除列表项符号
在实际开发中，浏览器默认的列表项符号样式比较单一或不美观，我们经常需要去除它们，然后使用其他方法（如背景图片、伪元素等）来自定义列表项样式。
在 CSS 中，我们可以使用 list-style-type: none; 来去除有序列表或无序列表的默认列表项符号。
语法：
list-style-type: none;说明：
使用 list-style-type: none; 是去除默认列表符号最常见的方法，这为后续的自定义样式提供了基础。
示例 3：CSS 去除列表项符号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ol, ul { list-style-type: none; }
</style>
</head>
<body>
<h3>有序列表</h3>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Vue</li>
<li>React</li>
</ol>
<hr>
<h3>无序列表</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Vue</li>
<li>React</li>
</ul>
</body>
</html>页面效果如下图所示。
分析：
使用 list-style-type: none; 这个技巧可以去除列表项默认的符号，在实际开发中经常会用到，尤其是在需要完全自定义列表样式时。
实际上，设置 list-style-type: none 只是去掉了符号，列表默认情况下还会自带一个左内边距（padding-left）。如果想要彻底清除缩进，我们还需要配合 padding: 0; margin: 0; 使用。
CSS 列表常见问题
1. list-style-type 有那么多的属性值，怎么记得住呢？
实际上，我们只需要记住 list-style-type:none; 这一个就可以了，其他的不需要记住。因为在实际开发中，使用 list-style-type 属性来定义列表项符号几乎用不上。所以那些属性值也不需要去记忆。退一步来说，就算用得上，我们不是还有 VSCode 等的提示么？
CSS 定义列表项位置
在 CSS 中，我们可以使用 list-style-position 属性来定义列表项符号的位置。
语法：
list-style-position: 关键字;说明：
list-style-position 的取值有 2 种，如下表所示。
| 取值 | 说明 |
|---|---|
| outside（默认值） | 列表项符号在外侧 |
| inside | 列表项符号在内侧 |
示例 4：list-style-position 的基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul {
width: 150px;
background-color: skyblue;
list-style-position: outside;
}
</style>
</head>
<body>
<ul>
<li>绿叶网 - 为好教程，全力以赴</li>
<li>绿叶网 - 为好教程，全力以赴</li>
<li>绿叶网 - 为好教程，全力以赴</li>
<li>绿叶网 - 为好教程，全力以赴</li>
<li>绿叶网 - 为好教程，全力以赴</li>
</ul>
</body>
</html>页面效果如下图所示。
分析：
对于上面例子来说，如果使用的是 list-style-position: inside;，此时页面效果如下图所示。
CSS 定义列表项图片
不管是有序列表，还是无序列表，都有它们自身的列表项符号。不过这些列表项符号都比较丑。如果我们想自定义列表项符号，那该怎么实现呢？
在 CSS 中，我们可以使用 list-style-image 属性来定义列表项图片，也就是使用图片来代替列表项符号。
语法：
list-style-image: none或url(图片路径);说明：
list-style-image 属性取值有以下 2 种。
none：是默认值，表示不适用图片。url(图片路径)：指定图片的路径。
示例 5：list-style-image 的用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ol {
list-style-image: url(imgs/flower.svg);
}
</style>
</head>
<body>
<ol>
<li>Python</li>
<li>C++</li>
<li>Java</li>
<li>Go</li>
<li>Rust</li>
</ol>
</body>
</html>页面效果如下图所示。
分析：
list-style-image 属性实际上就是把列表项符号改为一张图片，而引用一张图片就要给出图片的路径。在真实的开发项目中，像上图所示这种列表项符号，一般情况下我们都不会用 list-style-image 属性来实现，而是使用更高级的 “字体图标技术” 来实现。
CSS 列表综合属性：list-style
在 CSS 中，我们可以使用 list-style 这个复合属性，来同时设置 list-style-type、list-style-position 和 list-style-image。
语法：
list-style: list-style-type list-style-position list-style-image;说明：
list-style 子属性值顺序可以不固定，对于未指定的子属性，会直接使用该子属性的默认值。
示例 6：list-style 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul {
list-style: square inside url("imgs/flower.svg");
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，list-style: square inside url("imgs/flower.svg"); 等价于下面代码。
list-style-type: square;
list-style-position: inside;
list-style-image: url("imgs/flower.svg");提示: 在现代 Web 开发中，list-style-image 的使用较少，推荐两种方法：（1）使用伪元素 ::marker；（2）使用字体图标。
