介紹

在Web開發中，list-style 是CSS的一個屬性，用于設置列表的標記樣式。它是一個簡寫屬性，可以同時設置列表項前標記的類型（list-style-type）、圖像（list-style-image）和位置（list-style-position）。

屬性

list-style是一個簡寫屬性，可以同時設置list-style-type、list-style-image和list-style-position。

語法：

selector {list-style: list-style-type list-style-position list-style-image;
}

1. list-style-type

用于設置列表項的標記類型，比如圓點、數字、羅馬數字等。

常見值：

• none：無標記
• disc：實心圓點（默認）
• circle：空心圓點
• square：實心方塊
• decimal：數字（1, 2, 3, …）
• decimal-leading-zero：帶前導零的數字（01, 02, 03, …）
• lower-roman：小寫羅馬數字（i, ii, iii, …）
• upper-roman：大寫羅馬數字（I, II, III, …）
• lower-alpha：小寫字母（a, b, c, …）
• upper-alpha：大寫字母（A, B, C, …）

示例：

ul {list-style-type: square;
}

2.list-style-image

用于將圖像用作列表項的標記。

語法：

selector {list-style-image: url('path-to-image');
}

示例：

ul {list-style-image: url('bullet.png');
}

3.list-style-position

用于設置列表項標記相對于列表項內容的位置。

常見值：

• outside：標記在內容外（默認）
• inside：標記在內容內

示例：

ul {list-style-position: inside;
}

常見用法

1.設置列表項標記類型

ul {list-style-type: disc; /* 默認值，實心圓點 */
}

其他類型包括 none（無標記）、circle（空心圓點）、square（實心方塊）、decimal（數字）、lower-alpha（小寫字母）、upper-alpha（大寫字母）等。

2.設置列表項標記圖像

ul {list-style-image: url('custom-bullet.png');
}

如果提供了圖像URL，列表項的標記將使用指定的圖像。

3.設置列表項標記位置

ul {list-style-position: inside; /* 標記位于文本內部 */
}

inside 表示標記位于文本內部，而 outside 表示標記位于文本外部。

4.組合使用

ul {list-style: square inside url('custom-bullet.png');
}

在這個例子中，我們同時設置了列表項的標記類型為 square，位置為 inside，并指定了一個自定義的標記圖像。

5.為不同列表項設置不同的樣式

ul li {list-style-type: none; /* 無標記 */
}ul li:before {content: "?"; /* 自定義標記 */position: absolute;left: -1em; /* 根據需要調整位置 */
}

通過使用 :before 偽元素，我們可以為每個列表項設置自定義的前標記。

6.重置列表樣式

ol {list-style: none;
}ol li {counter-increment: item; /* 創建一個計數器 */
}ol li::before {content: counter(item) ". "; /* 使用計數器作為標記 */font-weight: bold;
}

在這個例子中，我們重置了有序列表的默認樣式，并使用CSS計數器和偽元素來創建自定義的標記。

示例

綜合使用list-style屬性：

ul {list-style: circle inside url('bullet.png');
}

這樣就可以靈活地自定義列表項的樣式，以符合設計需求。