CSS列表（list-style）
本篇将主要介绍列表的CSS样式编写，在学习之前，我们回忆一下HTML中的有序列表和无序列表。
举例：
<span>无序列表-我的爱好：</span> <ul> <li>咖啡</li> <li>牛奶</li> <li>果汁</li> </ul> <span>有序列表-成绩排行：</span> <ol> <li>张三</li> <li>李四</li> <li>赵五</li> </ol>
运行结果如下：
css列表属性作用：
（1）设置不同的列表项标记为有序列表
（2）设置不同的列表项标记为无序列表
（3）设置列表项标记为图像
在html中，有两种类型的html列表：
（1）无序列表：列表项的标记使用特殊图形（如小黑点、小方框等）
（2）有序列表：列表项的标记使用数字或字母
（3）使用css，可以列出进一步的样式，并可用图像作列表项标记
列表-简写属性
在单个属性中可以指定所有的列表属性，这就是所谓的简写属性，使用缩写属性值的顺序是：
1. list-style-type
2. list-style-position
3. list-style-image
在简写属性时，如果上述值丢失一个，其余仍在指定的顺序，就没影响。
1. list-style-type无序列表样式
| 值 | 描述 |
| none | 无标记 |
| disc | 默认值，标记为实心圆 |
| circle | 将标记设置为空心圆 |
| square | 将标记设置为实心方块 |
| decimal | 将标记设置为数字 |
| decimal-leading-zero | 将标记设置为以 0 开头的数字标记，例如 01、02、03 |
| lower-roman | 将标记设置为小写罗马数字，例如 i、ii、iii、iv、v |
| upper-roman | 将标记设置为大写罗马数字，例如 I、II、III、IV、V |
| lower-alpha | 将标记设置为小写英文字母，例如 a、b、c、d、e |
| upper-alpha | 将标记设置为大写英文字母，例如 A、B、C、D、E |
| lower-greek | 将标记设置为小写希腊字母，例如 α、β、γ、δ、ε |
| lower-latin | 将标记设置为小写拉丁字母，例如 a、b、c、d、e |
| upper-latin | 将标记设置为大写拉丁字母，例如 A、B、C、D、E |
| hebrew | 将标记设置为传统的希伯来编号 |
| armenian | 将标记设置为传统的亚美尼亚编号 |
| georgian | 将标记设置为传统的乔治亚编号 |
| cjk-ideographic | 将标记设置为中文数字，例如 一、二、三、四、五 |
| hiragana | 将标记设置为日文平假名字符，例如 あ、い、う、え、お |
| katakana | 将标记设置为日文片假名字符，例如 ア、イ、ウ、エ、オ |
| hiragana-iroha | 将标记设置为日文平假名序号 |
| katakana-iroha | 将标记设置为日文片假名序号 |
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.ul-none {
list-style-type: none;
}
.ul-circle {
list-style-type: circle;
}
.ul-square {
list-style-type: square;
}
</style>
</head>
<body>
<ul>
<li>篮球</li>
<li>足球</li>
<li>乒乓球</li>
</ul>
<ul class="ul-none">
<li>篮球</li>
<li>足球</li>
<li>乒乓球</li>
</ul>
<ul class="ul-circle">
<li>篮球</li>
<li>足球</li>
<li>乒乓球</li>
</ul>
<ul class="ul-square">
<li>篮球</li>
<li>足球</li>
<li>乒乓球</li>
</ul>
</body>
</html>运行结果：
举例：
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: circle;
}
ol {
float: left;
}
.ol_one {
list-style-type: lower-roman;
}
.ol_two {
list-style-type: lower-greek;
}
.ol_three {
list-style-type: georgian;
}
</style>
</head>
<body>
<ul>
<li>姓名</li>
<li>性别</li>
<li>籍贯</li>
</ul>
<ol class="ol_one">
<li>姓名</li>
<li>性别</li>
<li>籍贯</li>
</ol>
<ol class="ol_two">
<li>姓名</li>
<li>性别</li>
<li>籍贯</li>
</ol>
<ol class="ol_three">
<li>姓名</li>
<li>性别</li>
<li>籍贯</li>
</ol>
</body>
</html>运行结果：
2. list-style-position有序列表样式
| 值 | 描述 |
| inside | 列表项前的标记放置在之后的文本以内，列表项中的文本会根据标记对齐 |
| outside | 默认值，保持标记位于文本的左侧，列表项前的标记放置在文本以外，并且列表项中的文本不会根据标记对齐 |
| inherit | 从父元素继承 list-style-position 属性的值 |
举例：
<!DOCTYPE html>
<html>
<head>
<style>
ol {
list-style-type: lower-roman;
}
li {
background: #ccc;
margin-bottom: 2px;
}
.ol_one {
list-style-position: inside;
}
.ol_two {
list-style-position: outside;
}
</style>
</head>
<body>
<ol class="ol_one">
<li>姓名</li>
<li>性别</li>
<li>电话</li>
</ol>
<ol class="ol_two">
<li>地址</li>
<li>邮编</li>
<li>邮件</li>
</ol>
</body>
</html>运行结果：
3. list-style-image修改列表标记图像
| 值 | 描述 |
| URL | 图像的路径 |
| none | 默认值，不显示任何图像 |
| inherit | 从父元素继承 list-style-image 属性的值 |
4. list-style
ist-style 属性是上述三个属性（list-style-type、list-style-position、list-style-image）的简写，使用 list-style 可以同时设置上面的三个属性，其语法格式如下：
list-style: list-style-type || list-style-position || list-style-image;
本文固定URL：https://www.dotcpp.com/course/1139
CSS表格（table）
下一课：CSS盒子模型
C语言网提供由在职研发工程师或ACM蓝桥杯竞赛优秀选手录制的视频教程，并配有习题和答疑，点击了解：
一点编程也不会写的：零基础C语言学练课程
解决困扰你多年的C语言疑难杂症特性的C语言进阶课程
从零到写出一个爬虫的Python编程课程
只会语法写不出代码？手把手带你写100个编程真题的编程百练课程
信息学奥赛或C++选手的 必学C++课程
蓝桥杯ACM、信息学奥赛的必学课程：算法竞赛课入门课程
手把手讲解近五年真题的蓝桥杯辅导课程