每日笔记，css列表 - 简写属性

列表 - 简写属性

list-style 属性是一种简写属性。它用于在一条声明中设置所有列表属性：

实例

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

• Coffee

• Tea

• Coca Cola

在使用简写属性时，属性值的顺序为：

list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）

list-style-position（指定列表项标记应显示在内容流的内部还是外部）

list-style-image（将图像指定为列表项标记）

如果缺少上述属性值之一，则将插入缺失属性的默认值（如果有）。

设置列表的颜色样式

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

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

实例

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

1. Coffee

2. Tea

3. Coca

• Coffee

• Tea

• Coca Cola

所有 CSS 列表属性