CSS 列表样式

介绍

在 CSS 中，我们可以使用列表样式来改变列表元素的外观和布局。列表样式可以应用于有序列表（<ol>）、无序列表（<ul>）以及定义列表（<dl>）。

列表样式类型

以下是常见的列表样式类型：

• disc：实心圆点，默认的无序列表样式。
• circle：空心圆点，比 disc 更大一点。
• square：实心方块。
• decimal：数字，递增计数（有序列表默认样式）。
• decimal-leading-zero：带有初始零的数字，例如 01、02（有序列表）。
• lower-alpha：小写字母。
• lower-roman：小写罗马数字。
• upper-alpha：大写字母。
• upper-roman：大写罗马数字。

语法

可以通过以下 CSS 属性来应用列表样式：

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

dl {
  list-style-type: square;
}

这个例子会将无序列表的样式设置为实心圆点，有序列表的样式设置为数字，定义列表的样式设置为实心方块。

更改列表样式图标

除了使用预定义的列表样式类型，还可以使用图像或自定义样式来替代默认的列表样式图标。

使用图像作为列表样式图标

可以使用 list-style-image 属性将图像作为列表样式图标：

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

这个例子会将无序列表的样式图标替换为一个名为 icon.png 的图像。

使用自定义样式作为列表样式图标

也可以使用自定义样式（如字体图标）作为列表样式图标。这可以通过 list-style-type 属性和 content 属性的结合来实现：

ul li:before {
  content: "\f105";
  font-family: FontAwesome;
  margin-right: 5px;
}

这个例子会在无序列表的每个列表项前加上一个自定义的字体图标。

参考链接

• CSS 列表样式 - MDN
• CSS 列表样式 - w3schools

以上是关于 CSS 列表样式的介绍和用法的简要说明。更多详细资料和示例可以参考上述链接。