CSS 列表样式属性

CSS 列表样式属性主要用于设置无序列表和有序列表的样式，包括序号的形式、方向、样式等。下面将详细介绍相应的属性。

list-style-type

list-style-type 属性用于设置列表项的序号形式，常用的取值包括：

• none：无序列表不显示圆点或其他标记；
• disc：无序列表显示圆点（默认值）；
• circle：无序列表显示空心圆；
• square：无序列表显示正方形；
• decimal：有序列表显示十进制数字（默认值）；
• lower-roman：有序列表显示小写罗马数字；
• upper-roman：有序列表显示大写罗马数字；
• lower-alpha：有序列表显示小写字母；
• upper-alpha：有序列表显示大写字母。

ul {
  list-style-type: disc; /* 无序列表显示圆点 */
}
ol {
  list-style-type: lower-roman; /* 有序列表显示小写罗马数字 */
}

list-style-position

list-style-position 属性用于设置列表项的序号位置，常用的取值包括：

• inside：序号在列表项内容内部显示；
• outside：序号在列表项内容外部显示（默认值）。

ul {
  list-style-position: inside; /* 无序列表序号在内容内部显示 */
}
ol {
  list-style-position: outside; /* 有序列表序号在内容外部显示 */
}

list-style-image

list-style-image 属性用于设置列表项的序号图像，可以使用 URL 引入外部图片，也可以使用 none 去掉图像。需要注意的是，该属性和 list-style-type 属性不能同时使用。

ul {
  list-style-image: url("bullet.png"); /* 无序列表序号使用图片 */
}

list-style

list-style 属性是 list-style-type、list-style-position 和 list-style-image 三个属性的缩写形式。具体用法参考下面示例。

ul {
  list-style: square inside url("bullet.png"); /* 设置无序列表样式 */
}
ol {
  list-style: upper-roman outside; /* 设置有序列表样式 */
}