list-style-type属性、list-style-image属性、list-style-position属性、list-style复合属性的用法，背景图像定义项目符号/学习笔记

一、list-style-type属性

在css中list-style-type属性可以用于控制列表项显示符号的类型

/*使用该方法可以使用css来定义列表的type属性*/

属性值	描述	属性值	描述
disc	实心圆	none	不使用项目符号
circle	空心圆	cjk-ideographic	简单的表意数字
square	实心方块	georgian	传统的乔治亚编号
lower-roman	小写罗马数字	upper-roman	大写罗马数字

……略

具体用法

<style>ul{list-style-type:cricle;}ol{list-style-type:hebrew;}
/*使用该方法可以使用css来定义列表的type属性*/
</style><body>
<h2>红色</h2><ul><li>大红</li><li>朱红</li><li>嫣红</li></ul><h2>蓝色</h2><ol><li>湖蓝</li><li>群青</li><li>普兰</li></ol>
</body>

注意：由于浏览器的解析不同，实际开发中不推荐使用list-style-type属性。

二、List-style-image属性

该属性用法同list-style-type一样，该属性能将各列表的项目符号设置成个性化的图像

具体用法

ul{ list-style-image:url(图标路径)
}

注意：1、list-style-image属性可以为各个列表设置项目图像。2、list-style-image对列表项目图像的控制能力不强一般不建议使用，通常使用<li>设置背景图像的方式实现列表项目图像。

三、list-style-position属性

在CSS中list-style-position属性可以用来控制列表项目符号的位置，取值有inside和outside两种，默认值为outside。用来分别控制取值位置。

具体用法

<style>li{border:2px solid #blue;/*设置每个li的表框*/}ul{list-style-position:inside;/*设置取值范围*/}
</style><body>
<h2>中秋节</h2><ul><li>中秋节，又称月夕、秋节</li><li>时在农历八月十五</li><li>始于唐朝初年，盛行于宋朝</li></ul><ul><li>端午节</li><li>除夕</li><li>清明节</li></ul>
</body>

四、list-style复合属性

css中可以使用list-style来综合的设置type/image/position等等属性。

语法格式：list-style:列表项目符号列表项目符号位置列表项目图像；

具体用法

<style>
ul{list-style: circle inside url(photo.png);/*复合属性*/
}
li{border:2px solid;
}
</style>

使用list-style取值none还可以用于清除默认的列表项目符号。

五、背景图像定义列表项目符号

由于列表样式对列表项目图像的控制能力不强，所以实际工作中通常通过列表标签设置背景图像的方式来定义列表项目图像

如：background:url(photo.png) no-repeat left center;

具体用法

<html><head><title>背景图像定义列表项目符号</title><style>dd{list-style:none;height:25px;line-height:25px;/*清除列表默认样式，设置高度，以及文字行高*/background:url(图片.png) no-repeat left center;/*设置列表的背景图片，使用该方法来定义列表项目符号*/}</style></head><body><h2>熊猫</h2><dl><dd>黑眼圈</dd><dd>圆滚滚</dd></dl></body>
</html>

//欢迎加我VX进群交流
vx账号：-Sep07