css列表
在HTML入门教程中，有序列表和无序列表的列表项符号都是使用type属性来定义的。我们先来回顾一下。
1、有序列表
语法：
<ol type="属性值">
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
</ol>表1 有序列表type属性
type属性值 列表项的序号类型
1 数字1、2、3……
a 小写英文字母a、b、c……
A 大写英文字母A、B、C……
i 小写罗马数字i、ii、iii……
I 大写罗马数字I、II、III……
2、无序列表
语法：
<ul type="属性值">
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
</ul>表2 无序列表type属性
type属性值 列表项的序号类型
disc 默认值，实心圆“●”
circle 空心圆“○”
square 实心正方形“■”
二、CSS中定义列表项符号
type属性来定义列表项符号，那是在元素属性中定义的。但是我们之前说过，标签和样式是应该分离的，那在CSS中怎么定义列表项符号呢？
在CSS中，不管是有序列表还是无序列表，都统一使用list-style-type属性来定义列表项符号。
语法：
list-style-type:属性值;
说明：
list-style-type属性取值如下：
表3 有序列表list-style-type属性取值
list-style-type属性值 说明
decimal 默认值，数字1、2、3……
lower-roman 小写罗马数字i、ii、iii……
upper-roman 大写罗马数字I、II、III……
lower-alpha 小写英文字母a、b、c……
upper-alpha 大写英文字母A、B、C……
表4 无序列表list-style-type取值
list-style-type属性值 说明
disc 默认值，实心圆“●”
circle 空心圆“○”
square 实心正方形“■”
表5 去除列表项符号
list-style-type取值 说明
none 去除列表项符号
举例1：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>list-style-type属性</title>
<style type="text/css">
ol{list-style-type: lower-roman ;}
ul{list-style-type: circle ;}
</style>
</head>
<body>
<p>有序列表</p>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<p>无序列表</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
举例2：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>list-style-type属性</title>
<style type="text/css">
ol,ul{list-style-type:none;}
</style>
</head>
<body>
<p>有序列表</p>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<p>无序列表</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
分析：
“ol,ul{list-style-type:none;}”使用的是CSS选择器中的群组选择器。多个不同元素定义了相同的CSS样式，就可以使用群组选择器。在群组选择器中，元素之间是用逗号隔开，记住是英文的逗号，中文逗号无效。
使用“list-style-type:none”这个小技巧可以去除列表项默认的符号，在实际开发中，我们经常要用到。
二、自定义列表项符号list-style-image
不管是有序列表，还是无序列表，都有它们自身的列表项符号。但是默认的列表项符号都比较丑，那如果我们想自定义列表项符号，那该怎么实现呢？
在CSS中，我们可以使用list-style-image属性来自定义列表项符号。
语法：
list-style-image:url(图像地址);
说明：
图像地址可以是相对地址，也可以是绝对地址。请查看“相对路径和绝对路径”
举例：
我们把下面这个小图标自定义为列表项符号：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>list-style-image属性</title>
<style type="text/css">
ul{list-style-image:url("../App_images/lesson/run_cj/list.png");}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>在浏览器预览效果如下：
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
