学科分类
目录
HTML5+CSS3

list-style属性

在CSS中列表样式也是一个复合属性,可以将列表相关的样式都综合定义在一个复合属性list-style中。使用list-style属性综合设置列表样式的语法格式如下:

list-style:列表项目符号 列表项目符号的位置 列表项目图像;

使用复合属性list-style时,通常按上面语法格式中的顺序书写,各个样式之间以空格隔开,不需要的样式可以省略。示例代码如下:

1 <style type="text/css">

 2 ul{list-style:circle inside;}

 3 .one{list-style: outside url(1.png);}

 4 </style>

运行示例代码,效果如图1所示。

img

图1 list-style属性的使用

值得一提的是,在实际网页制作过程中,为了更高效地控制列表项显示符号,通常将list-style的属性值定义为none,然后通过为<li>设置背景图像的方式实现不同的列表项目符号。示例代码如下:

 1 <style type="text/css">

 2 dd{

 3 list-style:none;   /*清除列表的默认样式*/

 4 height:26px;

 5 line-height:26px;

 6 background:url(2.png) no-repeat left center; /*为li设置背景图像 */

 7 padding-left:25px;

 8 } 

 9 </style>

运行示例代码,效果如图2所示。

image-20200623161021735

图2 使用背景属性定义列表项显示符号

通过图2看出,每个列表项前都添加了列表项目图像。如果需要调整列表项目图像只需更改标签的背景属性即可。

点击此处
隐藏目录