CSS列表

HTML 列表和CSS列表属性

在HTML中，有两种主要的列表类型:

• 无序列表 (<ul>) - 列表项目标有圆盘
• 有序列表 (<ol>) - 列表项标有数字或字母.

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-image 属性指定使用图像作为列表项标记:

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

让我试试

定位列表项标记

list-style-position 属性指定列表项标记是否应出现在内容的内部或外部.:

ul {
    list-style-position: inside;
}

让我试试

List - 缩写性质

list-style 属性是一个速记属性. 用于将所有列表属性设置为一个声明:

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

让我试试

使用简写属性时，属性值的顺序为:

• list-style-type (list-style-image 被指定, 如果某些原因无法显示图像，则将显示此属性的值.)
• list-style-position (指定列表项标记是否应出现在内容流的内部或外部)
• list-style-image (指定图像作为列表项标记.)

如果缺少上述属性值中的一个，则将插入缺失属性的默认值（如果有的话）。

使用颜色为列表添加样式

我们还可以使用颜色为列表添加样式，使他们看起来更有趣。

任何添加到<ol>或者<ul>标签中的样式都会影响整个列表，当属性添加到<li>影响单个列表项。

ol {
    background: #ff9999;
    padding: 20px;
}

ul {
    background: #3399ff;
    padding: 20px;
}

ol li {
    background: #ffe5e5;
    padding: 5px;
    margin-left: 35px;
}

ul li {
    background: #cce5ff;
    margin: 5px;
}

让我试试

所有的CSS列表属性