css中list-style属性 CSS list-style 属性

css中list-style属性

list-style属性是CSS中用来设置列表样式的属性，它可以控制列表项目符号的显示样式，包括类型、位置和图片。它是一个复合属性，由三个子属性组成：list-style-type、list-style-position 和 list-style-image。

list-style: square inside url("sqpurple.gif");

list-style-type 属性用于控制列表项目符号的显示样式，它有很多可选的值，如disc、circle、square 等。例如：

list-style: disc;

list-style-position 属性用于控制列表项目符号的位置，它有两个可选的值：inside 和 outside。inside 表示将列表项目符号放在文字前面；outside 表示将列表项目符号放在文字后面。例如：

list-style: square inside;

list-style-image 属性用于使用图片作为列表项目符号。该属性必须使用url()函数来调用图片文件。例如：

list-style: square inside url("sqpurple.gif");

当然也可以将这三个子属性写在一起使用，例如上述代码中所写的内容就是将正方形作为列表项目的前导标志并放在文字前面并使用 sqpurple.gif 这张图片作为正方形的背景图片。

在一个声明中指定所有列表属性：

ul
{
list-style:square url("sqpurple.gif");
}

list-style 简写属性在一个声明中设置所有的列表属性。

可以设置的属性（按顺序）： list-style-type, list-style-position, list-style-image.

可以不设置其中的某个值，比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。

默认值：	disc outside none
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.listStyle="decimal inside"

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
list-style	1.0	4.0	1.0	1.0	7.0

值	描述
list-style-type	设置列表项标记的类型。参阅：list-style-type 中可能的值。
list-style-position	设置在何处放置列表项标记。参阅：list-style-position 中可能的值。
list-style-image	使用图像来替换列表项的标记。参阅：list-style-image 中可能的值。
initial	将这个属性设置为默认值。参阅：initial 中可能的值。
inherit	规定应该从父元素继承 list-style 属性的值。参阅：inherit 中可能的值。

CSS 教程: CSS 列表

阅读全文