CSS属性参考 | list-style

07-02 次

标签列表 css教程 css属性

CSS list-style 属性用于设置列表标记的样式。它是同时设置list-style-type， list-style-image 和 list-style-position 的简写属性。

list-style属性是设置列表项标记样式或通过display: list-item设置的列表元素的列表项样式的常用方式。

如果你指定了list-style-image属性，那么使用list-style-type指定的标记类型会被替换为指定的图像。

如果list-style的三个属性值都没有设置，浏览器会使用它们默认的值作为列表项标记的样式。

注意，如果你只为list-style属性设置了一个none值，那么该元素的列表标记将不会被显示。例如下面的代码：

ul { 
    list-style: none; 
}

那么ul元素中的列表标记将不会显示。

官方语法

list-style: [ <'list-style-type'> || <'list-style-position'> || <'list-style-image'> ] | inherit

参数：

<'list-style-type'>：设置列表项标记的类型，具体可以参考list-style-type属性。
<'list-style-position'>：设置列表项标记的位置，具体可以参考list-style-position属性。
<'list-style-image'>：使用图像作为列表项标记，具体可以参考list-style-image属性。
inherit：继承父元素的list-style值。

list-style属性的初始值为disc outside none。

示例代码

ol {
    /* 同时指定图像和标记类型，使用的是图像作为标记 */
    list-style: url(images/arrow.png) disc;
}

ul li {
    list-style: upper-roman inside;
}

ol li > li {
    list-style: circle;
}

ul {
    list-style: square url('images/fancy-square.png') inside;
}