W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

CSS 列表样式



  1. Coffee
  2. Tea
  3. Coca Cola
  • Coffee
  • Tea
  • Coca Cola

HTML列表和CSS列表属性

在HTML中,有两种类型的列表:

  • 无序列表(<ul>) - 列表项标记用特殊图形
  • 有序列表(<ol>) - 列表项的标记有数字或字母

CSS列表属性作用如下:

  • 设置不同的列表项标记为有序列表
  • 设置不同的列表项标记为无序列表
  • 设置列表项标记为图像
  • 向列表和列表项目添加背景颜色

不同的列表项标记

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

以下实例显示了一些可用的列表项标记:

Example

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 属性用于指定列表项标记的图像。

Example

ul {
    list-style-image: url('sqpurple.gif');
}
尝试一下 »

放置列表项目标记

list-style-position 属性设置在何处放置列表项标记。

Example

ul {
    list-style-position: inside;
}
尝试一下 »

列表 - 缩写属性

list-style 缩写属性在一个声明中设置所有的列表属性

Example

ul {
    list-style: square inside url("sqpurple.gif");
}
尝试一下 »

使用缩写属性时,属性值的顺序为:

  • list-style-type
  • list-style-position
  • list-style-image

如果上述值丢失一个,其余仍在指定的顺序,就没关系。


带有颜色的样式列表

我们还可以用颜色样式列表,使它们看起来更有趣。

添加到 <ol> 或 <ul> 标记的任何内容都会影响整个列表,而添加到 <li> 标记的属性将影响单个列表项:

Example

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;
}

Result:

  1. Coffee
  2. Tea
  3. Coca Cola
  • Coffee
  • Tea
  • Coca Cola
尝试一下 »

Examples

更多实例

所有不同的列表项标记
这个例子演示了所有不同的CSS列表项标记。


所有的CSS列表属性

属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图象设置为列表项标志
list-style-position 设置列表中列表项标志的位置
list-style-type 设置列表项标志的类型