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列表属性

属性 描述
list-style 在一个声明中设置列表的所有属性.
list-style-image 指定图像作为列表项标记.
list-style-position 指定列表项标记是否应出现在内容流的内部或外部
list-style-type 指定列表项标记的类型