希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。

【技术等级】初级

【承接文章】《CSS实现图片精灵，原来要这样使用背景属性，前端设计师必备知识》

本文小海老师为大家讲解利用CSS处理HTML中的列表，也就是CSS有关列表的属性。本文属于前端开发的初级教程，适合于刚刚开始接触CSS技术的学习者。

列表属性是指可以对HTML中的<ol></ol>标记对和<ul></ul>标记对进行样式设置的属性。这一组CSS属性包括以下三个：

list-style-type

list-style-image

list-style-position

一、设置列表的项目符号或编号：

CSS技术使用 list-style-type 设置列表的项目符号或编号

在HTML中，主要操作的列表有两种：

无序列表：用<ul></ul>标记对实现。无序列表项中左侧的标识我们把它称为“项目符号”。

有序列表：用<ol></ol>标记对实现。有序列表项中左侧的标识我们把它称为“编号”。

有序列表与无序列表

CSS技术利用 list-style-type 属性来设置HTML列表左侧标识的样式。并且在CSS看来，<ul></ul>和<ol></ol>两个标记对不再进行有序和无序的区分，使用list-style-type属性设置为哪个取值，就是对应的哪种列表。

该属性包括以下几种取值：

none，列表项无标记。

disc，默认值，标记为实心圆。

circle，标记为空心圆。

square，标记为实心方块。

decimal，标记为数字。

decimal-leading-zero，标记为0开头的数字（01、02、03 等）。

lower-roman，标记为小写罗马数字（i、ii、iii等）。

upper-roman，标记为大写罗马数字（I、II、III等）。

lower-alpha，标记为小写英文字母（a、b、c等）。

upper-alpha，标记为大写英文字母（A、B、C等）。

二、使用自定义图片来代替项目符号和编号：

CSS技术利用 list-style-image 属性来设置列表左侧的标识为指定的图片

CSS技术利用 list-style-image 属性来设置列表左侧的标识为指定的图片。

格式：list-style-image:url(Image_URL);

例如：ul{list-style-image:url(../images/01.jpg);}

三、设置列表中列表项的缩进：

CSS技术利用 list-style-position 属性来设置列表项的缩进

CSS技术利用 list-style-position 属性来设置列表项的缩进。

该属性包括以下两种取值：

loutside，默认值，列表项不缩进。

linside，列表项缩进。

这个属性使用在列表项<li></li>标记对上的，不能用在<ol></ol>或<ul></ul>之上。

文章预告

下一篇文章中，小海老师会继续为大家向下讲解CSS属性，下一次我们讲解CSS中最为重要的一组属性：定位属性。这是CSS中非常常用的一组属性，希望大家千万不要错过！

小海教材

如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。

小海声明

在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。

希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。

关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。