css list-style-type样式

时间:2023-04-25 22:14:33

CSS list-style-type 属性用于设置列表项符号的类型。这个属性可以接受多种值,包括标准符号类型、自定义符号类型、以及 none 值,用于隐藏列表项符号。

以下是 list-style-type 的语法:

list-style-type: disc|circle|square|decimal|decimal-leading-zero|lower-roman|upper-roman|lower-alpha|upper-alpha|none|<string>|initial|inherit;

disc:实心圆点(默认值)。
circle:空心圆。
square:实心正方形。
decimal:数字,如 1、2、3 等。
decimal-leading-zero:数字,但对于单个数字(0-9)使用前导零,如 01、02、03 等。
lower-roman:小写罗马数字,如 i、ii、iii 等。
upper-roman:大写罗马数字,如 I、II、III 等。
lower-alpha:小写字母,如 a、b、c 等。
upper-alpha:大写字母,如 A、B、C 等。
none:不显示列表项符号。
<string>:使用任意 Unicode 字符串作为列表项符号,例如 \2022 表示实心圆点。
例如,以下代码将无序列表的符号类型设置为实心正方形:

ul {
list-style-type: square;
}

在这个示例中,无序列表的符号将显示为实心正方形,而不是默认的实心圆点。

另外,您可以使用自定义符号类型来替换默认的标准符号类型。例如,以下代码将无序列表的符号类型设置为一个自定义的图像:

ul {
list-style-type: none;
list-style-image: url('custom-bullet.png');
}

在这个示例中,列表项符号被隐藏,而自定义的图像被作为符号使用。需要注意的是,如果您同时设置了 list-style-type 和 list-style-image 属性,则 list-style-image 的优先级更高。

总之,list-style-type 属性是一个非常有用的属性,它允许您控制列表项符号的类型,以改变列表的外观和感觉。

相关词 list