前端必知必会-CSS列表Lists

---

CSS 列表

无序列表

有序列表

HTML 列表和 CSS 列表属性

在 HTML 中，有两种主要类型的列表：

• 无序列表 (<ul>) - 列表项用项目符号标记
• 有序列表 (<ol>) - 列表项用数字或字母标记

CSS 列表属性允许：

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

不同的列表项标记list-style-type

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

list-style-image 属性指定图像作为列表项标记：

示例

ul {
list-style-image: url('sqpurple.gif');
}

定位列表项标记list-style-position

list-style-position 属性指定列表项标记（项目符号）的位置。

“list-style-position: outside;” 表示项目符号将位于列表项之外。列表项每行的开头将垂直对齐。这是默认设置：

“list-style-position: inside;” 表示项目符号将位于列表项内。由于它是列表项的一部分，因此它将成为文本的一部分并将文本推到开头：

示例

ul.a {
list-style-position: outside;
}

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

删除默认设置list-style-type:none

list-style-type:none 属性也可用于删除标记/项目符号。请注意，列表还具有默认边距和填充。要删除此功能，请将 margin:0 和 padding: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-image，则当图像由于某种原因无法显示时将显示此属性的值）
• list-style-position（指定列表项标记应出现在内容流内部还是外部）
• list-style-image（指定图像作为列表项标记）
  如果上述属性值之一缺失，则将插入缺失属性的默认值（如果有）。

使用颜色设置列表样式

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

任何添加到 <ol> 或 <ul> 标签的内容都会影响整个列表，而添加到

• 标签的属性将影响单个列表项：

• 示例

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

  结果：

  

  ---

  总结

  本文介绍了的CSS列表Lists使用，如有问题欢迎私信和评论