CSS 列表样式详解

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

文章目录

• • 一、CSS列表样式属性
  • • 1. `list-style-type`
    • 2. `list-style-image`
    • 3. `list-style-position`
    • 4. `list-style` - 简写属性
  • 二、综合示例

CSS列表样式主要用于定制无序列表(<ul>)和有序列表(<ol>)的外观，包括列表项前的标记（如圆点、数字等）的样式。以下是一些关键的CSS属性和它们的用途：

一、CSS列表样式属性

1. list-style-type

控制列表项标记的样式。对于无序列表，它可以是disc(实心圆点，默认)，circle(空心圆圈)，square(实心方块)，none(无标记)等。对于有序列表，它会影响数字的样式，如decimal(默认的阿拉伯数字)，lower-alpha(小写字母)，upper-roman(大写罗马数字)等。

示例:

ul {
  list-style-type: square;
}

ol {
  list-style-type: lower-roman;
}

2. list-style-image

允许您使用自定义图像作为列表项的标记。

示例:

ul.custom-marker {
  list-style-image: url("marker.png");
}

3. list-style-position

决定列表项标记相对于文本的位置。inside使标记放在内容框内，可能会占用行内空间；outside使标记放在内容框外，不会影响行内布局。

示例:

li.outside {
  list-style-position: outside;
}

li.inside {
  list-style-position: inside;
}

4. list-style - 简写属性

这是一个复合属性，可以同时设置list-style-type、list-style-position和list-style-image。如果指定了list-style-image，则忽略list-style-type，除非图像无法加载。

示例:

li {
  list-style: square inside url("marker.png");
}

二、综合示例

假设我们想要创建一个使用自定义图像作为标记，标记位于文本之外的无序列表，可以这样编写CSS:

ul.fancy-list {
  list-style: none; /* 首先移除默认样式 */
  padding-left: 2em; /* 为自定义标记留出空间 */
}

ul.fancy-list li {
  position: relative; /* 为绝对定位的标记提供上下文 */
}

ul.fancy-list li:before {
  content: ""; /* 使用伪元素生成内容 */
  position: absolute; /* 绝对定位 */
  left: -1.5em; /* 调整位置 */
  top: 0.7em; /* 调整垂直对齐 */
  background-image: url("custom-marker.png"); /* 自定义标记图像 */
  background-repeat: no-repeat; /* 防止重复 */
  width: 1em; /* 设置标记大小 */
  height: 1em; /* 设置标记大小 */
}

这个例子中，我们使用了:before伪元素来插入自定义图像作为列表项的标记，这是一种高级技术，可以实现更复杂的列表样式设计。