如何使用 CSS 為列表添加樣式

CSS 可以用來為列表添加多種樣式。

list-style-type 屬性用於設置列表所使用的預定義標記：

1
2
3

li {
 list-style-type: square;
}

這裡有很多可能的取值，你可以在這裡查看 https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type，其中包含了它們的外觀示例。其中一些最受歡迎的取值包括 disc、circle、square 和 none。

list-style-image 屬性用於在預定義標記不適用時，使用自定義圖片作為標記：

1
2
3

li {
 list-style-image: url(list-image.png);
}

list-style-position 屬性允許將標記放置在列表內容的 outside（默認）或 inside ，在頁面的流動中而不是頁面外：

1
2
3

li {
 list-style-position: inside;
}

list-style 這個縮寫屬性讓我們可以在同一行中指定所有這些屬性：

1
2
3

li {
 list-style: url(list-image.png) inside;
}

tags: [“CSS”, “styling”, “lists”, “markers”, “images”]