在 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.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

删除默认设置

该属性也可以是用于删除标记/项目符号。请注意，该列表还具有默认边距 和填充。要删除它，请添加list-style-type:none 和margin:0padding:0 到 <ul> 或 <ol>：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

列表 - 速记属性

该物业是简写物业。它用于设置所有在一个声明中列出属性：list-style

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

使用速记属性时，属性值的顺序为：

• list-style-type（如果指定了列表样式图像， 如果图像由于某种原因，将显示此属性的值 无法显示）
• list-style-position（指定列表项标记应显示在内容流内部还是外部）
• list-style-image（将图像指定为列表项 标记）如果缺少上述属性值之一，则 将插入缺少的属性（如果有）。

带颜色的样式列表

我们还可以使用颜色设置列表样式，使它们看起来更多一点有趣。

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

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

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

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

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

ul {
  border-left: 5px solid red;
  background-color: #f1f1f1;
  list-style-type: none;
  padding: 10px 20px;
}

ul {
  list-style-type: none;
  padding: 0;
  border: 1px solid #ddd;
}

ul li {
  padding: 8px 16px;
  border-bottom: 1px solid #ddd;
}

ul li:last-child {
  border-bottom: none
}