CSS 列表

CSS 列表是一种用于呈现有序和无序列表的样式的技术。有序列表和无序列表都有其各自的默认样式，但这些样式可通过 CSS 改变。

有序列表

有序列表使用有序列表标签 <ol>。默认情况下，

将带有编号。

<ol>
  <li>这是有序列表的第一项。</li>
  <li>这是有序列表的第二项。</li>
</ol>

指定列表的编号样式

有序列表的编号样式可以通过 list-style-type 属性进行指定。

ol {
  list-style-type: decimal;
}

| 值 | 描述 | | -------------- | --------------------------------------------- | | decimal | 默认。十进制数字。 | | upper-roman | 大写罗马数字。 | | lower-roman | 小写罗马数字。 | | upper-alpha | 大写字母。 | | lower-alpha | 小写字母。 | | none | 没有编号。 | | decimal-leading-zero | 带前导零的十进制数字。支持现代浏览器。|

指定列表的编号起始值

有序列表的编号起始值可以通过 start 属性进行指定。

<ol start="3">
  <li>这是有序列表的第三项。</li>
  <li>这是有序列表的第四项。</li>
</ol>

无序列表

无序列表使用无序列表标签 <ul>。默认情况下，

将带有一个黑色圆点。

<ul>
  <li>这是无序列表的第一项。</li>
  <li>这是无序列表的第二项。</li>
</ul>

指定列表项的符号样式

无序列表项的符号样式可以通过 list-style-type 属性进行指定。

ul {
  list-style-type: disc;
}

| 值 | 描述 | | -------------- | --------------------------------------------- | | disc | 实心圆点。 | | circle | 空心圆。 | | square | 实心方块。 | | none | 没有符号。 |

自定义列表符号

通过 CSS 可以自定义列表的符号样式，例如使用图片或自定义字符作为符号。

使用图片作为符号

使用 background-image 属性和 list-style-position 属性，可以将图片作为列表符号。下面的代码将图片文件 "list.png" 用作有序列表项的符号：

ol {
  list-style-image: url('list.png');
  list-style-position: inside;
}

使用自定义字符作为符号

使用 ::before 伪元素和 content 属性，可以将自定义字符作为列表项的符号。

ul {
  list-style-type: none;
}

ul li::before {
  content: "\2022";
  margin-right: 5px;
}

该代码将使用圆点作为无序列表项的符号。'\2022' 是圆点字符在 Unicode 中的编码。

总结

CSS 列表是呈现有序和无序列表的样式的一种技术。可以通过属性来指定列表的编号样式、编号起始值和每个列表项的符号样式。可以使用图片和自定义字符来自定义列表项的符号。