css列表属性和样式 – CSS教程

上一章CSS教程请查看：css超链接样式

列表属性和样式用于控制列表项标记表示。

HTML列表的类型

HTML中有三种不同类型的列表：

• 无序列表——一个项目列表，其中每个列表项都用项目符号标记。
• 有序列表——项目的列表，其中每个列表项目都用数字标记。
• 定义列表——一个项目列表，包含每个项目的描述。

要了解更多关于列表的信息，请查看HTML列表教程。

使用CSS的样式表

CSS为样式化最常用的无序列表和有序列表提供了几个属性，这些CSS列表属性通常允许你：

• 控制标识的形状或外观。
• 指定标记的图像，而不是项目符号或数字。
• 设置标记和列表中的文本之间的距离。
• 指定标记或项目符号是出现在包含无序或有序列表项的框内还是框外。

在下一节中，我们将讨论用于样式列表的属性。

列表样式类型

默认情况下，有序列表中的项目用阿拉伯数字(1、2、3等)进行编号，而无序列表中的项目用圆形项目符号进行标记。但是，可以使用list-style-type属性将此默认列表标记类型更改为任何其他类型，如圆形、方形、罗马数字、拉丁字母等。

ul {
    list-style-type: square;
}
ol {
    list-style-type: upper-roman;
}

改变列表标记的位置

默认情况下，列表标记位于列表项的框外。但是，你可以使用list-style-position属性来指定标记或项目符号是出现在列表项的主块框内还是外。

此属性接受内部inside或外部outside的值，外部outside是默认值。如果使用了inside的值，行将在标记下换行，而不是缩进。

ul.in li {
    list-style-position: inside;
}
ul.out li {
    list-style-position: outside;
}

使用图像作为列表标记

还可以使用list-style-image属性将图像设置为列表标记。

下面示例中的样式规则指定一个透明的PNG图像，作为无序列表中所有项目的列表标记。

ul li {
    list-style-image: url("arrow.png");
}

上面的示例在所有浏览器中生成的输出并不相同，ie和Opera将显示略高于Firefox、Chrome和Safari的图像标记。有关此问题的跨浏览器解决方案，请参见下面。

跨浏览器的图像标记解决方案

当使用list-style-image属性将图像作为项目符号时，项目符号在浏览器中不能准确地与文本对齐。作为一种变通方法，你可以通过background-image CSS属性正确对齐项目符号图像。首先，将列表设置为没有项目符号。然后，为列表元素定义一个不重复的背景图像。

下面的例子在所有浏览器中显示相同的图像标记：

ul {
    list-style-type: none;
}
ul li {
    background-image: url("arrow.png");
    background-position: 0px 5px;    /* X-pos Y-pos (from top-left) */
    background-repeat: no-repeat;
    padding-left: 20px;
}

list-style列表样式的速记属性

list-style列表样式属性是一个简写属性，用于在一个地方定义列表的三个属性list-style-type, list-style-image和list-style-position。

此样式规则将有序列表项的列表标记设置为出现在列表项的主块框内的大写拉丁字母：

ol {
    list-style: upper-latin inside;
}

注意：在使用速记属性时，值的顺序是:列表样式类型|列表样式位置|列表样式图像。只要其他的值是按照指定的顺序排列的，那么上面的值是否丢失并不重要。