CSS列表样式

一、CSS 列表

CSS列表属性用于设置不同种类的列表项标记，既有有序列表也有无序列表，并且还可以使用图像作为列表项标记。下面是一些具体的应用：

1、有序列表

可以使用CSS的 list-style-type 属性来设置有序列表项的标号类型。例如：

css
ol {
list-style-type: decimal;
}

最终效果：所有有序列表项的标号显示为数字（1, 2, 3, ...）。

2、无序列表

可以使用CSS的 list-style-type 属性来设置无序列表项的符号类型。例如：

css
ul {
list-style-type: circle;
}

最终效果：所有无序列表项的符号显示为带圆圈的实心点。

3、图片列表

可以使用CSS的 list-style-image 属性来设置一个图像作为列表项的标记。例如：

css
ul {
list-style-image: url('image.png');
}

最终效果：所有无序列表项的标记都替换为名为 image.png 的图片。

二、列表

在 HTML 中，有两种类型的 HTML列表：

• 无序列表：列表项的标记使用特殊图形；（如小黑点、小方框等）
• 有序列表：列表项的标记使用数字或字母。

使用CSS，可以列出进一步的样式，并可用图像作列表项标记。

三、不同列表项标记

list-style-type 属性指定列表项标记的类型是：

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

下列是对 list-style-type 属性的常见属性值的描述：

• none：不使用项目符号
• disc：实心圆
• circle：空心圆
• square：实心方块
• decimal：阿拉伯数字
• lower-alpha：小写英文字母
• upper-alpha：大写英文字母
• lower-roman：小写罗马数字
• upper-roman：大写罗马数字

四、列表项标记图像

要指定列表项标记的图像，使用列表样式图像属性：

ul
{
list-style-image: url('sqpurple.gif');
}

上面的例子在各大主流浏览器中的显示有所差异，IE 和 Opera 显示图像标记比火狐（ Firefox ），Chrome 和 Safari 更高一点。

注意：利用 list-style-position 可以确定标志出现在列表项内容之外还是内容内部。如果在所有的浏览器放置同样的形象标志，就应使用浏览器兼容性解决方案。

五、浏览器兼容性

同样在所有的浏览器，下面的例子会显示的图像标记：

ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li {
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}

例子解释：

1、ul :

• 设置列表样式类型为没有列表项标记；
• 设置填充和边距 0px（浏览器兼容性）。

2、ul 中所有 li :

• 设置图像的 URL ，并设置它只显示一次（无重复）；
• 需要的定位图像位置（左 0px 和上下 5px ）；
• 用 padding-left 属性把文本置于列表中。

六、列表简写属性

在单个属性中可以指定所有的列表属性，这就是所谓的简写属性。为列表使用简写属性，列表样式属性设置如下：

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

如果使用缩写属性值的顺序是：

1、list-style-type

2、list-style-position

3、list-style-image

在简写属性时，如果上述值丢失一个，其余仍在指定的顺序，那就没有影响。

七、所有CSS列表属性