Articles
CSS 簡介
與清單相關的CSS屬性

與清單相關的CSS屬性

本文說明與清單相關的CSS屬性。

您將學習如何使用和編寫list-style屬性以及counter()函數。

YouTube Video

預覽的HTML

css-list.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-list.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>List Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>List Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>list-style</h3>
 23            <section>
 24                <header><h4>list-style-type: circle; list-style-position: inside;</h4></header>
 25                <section class="sample-view">
 26                    <h5>Unordered List (ul)</h5>
 27                    <ul>
 28                        <li>Item 1</li>
 29                        <li>Item 2</li>
 30                        <li>Item 3</li>
 31                    </ul>
 32                </section>
 33                <header><h4>list-style: upper-roman outside</h4></header>
 34                <section class="sample-view">
 35                    <h5>Ordered List (ol)</h5>
 36                    <ol>
 37                        <li>First</li>
 38                        <li>Second</li>
 39                        <li>Third</li>
 40                    </ol>
 41                </section>
 42                <header><h4>list-style-image: url('custom-bullet.png')</h4></header>
 43                <section class="sample-view">
 44                    <h5>Custom Bullet List</h5>
 45                    <ul class="custom-list">
 46                        <li>Custom Item 1</li>
 47                        <li>Custom Item 2</li>
 48                        <li>Custom Item 3</li>
 49                    </ul>
 50                </section>
 51            </section>
 52        </article>
 53        <article>
 54            <h3>counter()</h3>
 55            <section>
 56                <header><h4>CSS</h4></header>
 57<pre class="sample">
 58dl {
 59    counter-reset: item;
 60}
 61
 62dl dt::before {
 63    counter-increment: item; /* Increment the counter */
 64    content: counter(item) ". "; /* Display the counter */
 65}
 66</pre>
 67                <header><h4>HTML</h4></header>
 68<pre>
 69&lt;dl&gt;
 70    &lt;dt&gt;Term A&lt;/dt&gt;
 71    &lt;dd&gt;Explication for term A&lt;/dd&gt;
 72    &lt;dt&gt;Term B&lt;/dt&gt;
 73    &lt;dd&gt;Explication for term B&lt;/dd&gt;
 74    &lt;dt&gt;Term C&lt;/dt&gt;
 75    &lt;dd&gt;Explication for term C&lt;/dd&gt;
 76&lt;/dl&gt;
 77</pre>
 78                <header><h4>HTML+CSS</h4></header>
 79                <section class="sample-view">
 80                    <dl>
 81                        <dt>Term A</dt>
 82                        <dd>Explication for term A</dd>
 83                        <dt>Term B</dt>
 84                        <dd>Explication for term B</dd>
 85                        <dt>Term C</dt>
 86                        <dd>Explication for term C</dd>
 87                    </dl>
 88                </section>
 89            </section>
 90        </article>
 91        <article>
 92            <h3>counters()</h3>
 93            <section>
 94                <header><h4>CSS</h4></header>
 95<pre class="sample">
 96ol {
 97    list-style: none;
 98    counter-reset: list-counter;
 99}
100
101li {
102    counter-increment: list-counter;
103}
104
105li::before {
106    content: counters(list-counter, ".") " ";
107}
108</pre>
109                <header><h4>HTML</h4></header>
110<pre>
111&lt;ol&gt;
112    &lt;li&gt;Item A
113        &lt;ol&gt;
114            &lt;li&gt;Subitem A-1&lt;/li&gt;
115            &lt;li&gt;Subitem A-2&lt;/li&gt;
116        &lt;/ol&gt;
117    &lt;/li&gt;
118    &lt;li&gt;Item B
119        &lt;ol&gt;
120            &lt;li&gt;Subitem B-1&lt;/li&gt;
121        &lt;/ol&gt;
122    &lt;/li&gt;
123&lt;/ol&gt;
124</pre>
125                <header><h4>HTML+CSS</h4></header>
126                <section class="sample-view">
127                    <ol>
128                        <li>Item A
129                            <ol>
130                                <li>Subitem A-1</li>
131                                <li>Subitem A-2</li>
132                            </ol>
133                        </li>
134                        <li>Item B
135                            <ol>
136                                <li>Subitem B-1</li>
137                            </ol>
138                        </li>
139                    </ol>
140                </section>
141            </section>
142            <section>
143                <header><h4>CSS</h4></header>
144<pre class="sample">
145article {
146    counter-reset: chapter;
147}
148h1.chapter {
149    counter-increment: chapter;
150    counter-reset: section;
151}
152h1.chapter::before {
153    content: counter(chapter) " ";
154}
155h2.section {
156    counter-increment: section;
157    counter-reset: sub-section;
158}
159h2.section::before {
160    content: counters(chapter, ".") "." counter(section) " ";
161}
162h3.sub-section {
163    counter-increment: sub-section;
164}
165h3.sub-section::before {
166    content: counters(chapter, ".") "." counter(section) "." counter(sub-section) " ";
167}
168</pre>
169                <header><h4>HTML</h4></header>
170<pre>
171&lt;h1 class=&quot;chapter&quot;&gt;Chapter A&lt;/h1&gt;
172&lt;h2 class=&quot;section&quot;&gt;Section A-1&lt;/h2&gt;
173&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-1-1&lt;/h3&gt;
174&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-1-2&lt;/h3&gt;
175
176&lt;h2 class=&quot;section&quot;&gt;Section A-2&lt;/h2&gt;
177&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-2-1&lt;/h3&gt;
178
179&lt;h1 class=&quot;chapter&quot;&gt;Chapter B&lt;/h1&gt;
180&lt;h2 class=&quot;section&quot;&gt;Section B-1&lt;/h2&gt;
181&lt;h3 class=&quot;sub-section&quot;&gt;Subsection B-1-1&lt;/h3&gt;
182</pre>
183                <header><h4>HTML+CSS</h4></header>
184                <section class="sample-view">
185                    <h1 class="chapter">Chapter A</h1>
186                    <h2 class="section">Section A-1</h2>
187                    <h3 class="sub-section">Subsection A-1-1</h3>
188                    <h3 class="sub-section">Subsection A-1-2</h3>
189
190                    <h2 class="section">Section A-2</h2>
191                    <h3 class="sub-section">Subsection A-2-1</h3>
192
193                    <h1 class="chapter">Chapter B</h1>
194                    <h2 class="section">Section B-1</h2>
195                    <h3 class="sub-section">Subsection B-1-1</h3>
196                </section>
197            </section>
198        </article>
199    </main>
200</body>
201</html>

與清單相關

list-style屬性 

 1ul {
 2    list-style-type: circle; /* Empty circle bullets */
 3    list-style-position: inside; /* Position bullets inside the content area */
 4}
 5
 6ol {
 7    /* Uppercase Roman numerals with bullets positioned outside */
 8    list-style: upper-roman outside;
 9}
10
11.custom-list {
12    list-style-image: url('custom-bullet.png'); /* Custom image bullets */
13}

list-style屬性是一個CSS屬性，用於為HTML清單元素（如<ul>和<ol>）指定清單標記（圓點或數字）的風格。此屬性允許您控制清單的整體風格，非常適合自定義清單的外觀。

在此範例中，應用了以下樣式。

  • ul：內部顯示空心圓形標記。
  • ol：使用大寫羅馬數字編號，數字顯示在外部。
  • **custom-list**類別：顯示指定圖像作為標記。

list-style結構

list-style是以下三個屬性的縮寫：

  • list-style-type：指定清單項目的標記類型（圓點或數字）。
  • list-style-position：指定標記是放置在清單項目內部(inside)還是外部(outside)。
  • list-style-image：指定用作清單標記的圖像。

基本用法 

1ul {
2    list-style: square inside url('path/to/image.png');
3}

此代碼運作方式如下：

  • list-style-type: square：將標記類型設置為方形形狀。
  • list-style-position: inside：標記顯示在清單項目內部。
  • list-style-image: url('path/to/image.png')：使用圖像作為標記。

單個屬性的說明

list-style-type

list-style-type 用於指定清單的標記類型。可以使用的樣式取決於清單的類型。

值的範例 
 1ul {
 2    /* Change list bullets to empty circles */
 3    list-style-type: circle;
 4}
 5
 6ol {
 7    /* Number list items with lowercase letters (a, b, c, ...) */
 8    list-style-type: lower-alpha;
 9}
10
11ol.roman-list {
12    /* Number list items with uppercase roman numerals (I, II, III, ...) */
13    list-style-type: upper-roman;
14}
  • none：不顯示標記。
  • disc（預設值）：一個小黑點。
  • circle：一個小空心圓（環）。
  • square：一個小方塊。
  • decimal：類似於 1、2、3... 的數字清單。
  • lower-alpha：小寫字母，例如 a、b、c...。
  • upper-alpha：大寫字母，例如 A、B、C...。
  • lower-roman：小寫羅馬數字，例如 i、ii、iii...。
  • upper-roman：大寫羅馬數字，例如 I、II、III...。
list-style-position 
1ul {
2    list-style-position: inside;
3}

list-style-position 屬性指定標記（符號）是放置在清單項目內還是外部。list-style-position 可以具有以下值：。

  • outside：標記放置在清單項目外，項目的內容從標記之後開始。這是默認值。
  • inside：標記放置在清單項目內，顯示為文字的一部分。
list-style-image 
1ul {
2    list-style-image: url('bullet.png'); /* Use an image as the list marker */
3}

list-style-image 屬性用於將圖片設置為清單標記。圖片通過 url() 指定，如果無法加載圖片，將顯示由 list-style-type 指定的標記。

list-style 簡寫屬性 

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

list-style 是一個簡寫屬性，可以同時設置 list-style-type、list-style-position 和 list-style-image。順序是靈活的，但通常是按照這個範例來書寫的。在這種情況下，清單項目內會顯示一個方形符號，並將圖片顯示為標記。

總結

  • list-style 是一個簡寫屬性，允許一次性設置清單的外觀（標記類型、位置、自定義圖片）。
  • 也可以單獨設置 list-style-type、list-style-position 和 list-style-image。
  • 您可以根據佈局和設計靈活自定義列表標記。

CSS 計數器（counter()） 

 1/* Reset the counter */
 2dl {
 3    counter-reset: item;
 4}
 5
 6/* Apply the counter to list items */
 7dl dt::before {
 8    counter-increment: item; /* Increment the counter */
 9    content: counter(item) ". "; /* Display the counter */
10}

您可以使用 CSS 計數器自動對列表項或特定元素進行編號。

創建和初始化計數器 

1/* Create and initialize the counter */
2ol {
3  counter-reset: section; /* Set the counter name to 'section' */
4}

您可以使用 counter-reset 屬性創建並重置一個計數器。

遞增計數器 

1/* Increment the counter and display it */
2li::before {
3  counter-increment: section; /* Increment the counter by 1 */
4  content: counter(section) ". "; /* Display the counter value */
5}

您可以使用 counter-increment 屬性遞增計數器，並使用 counter 函數顯示計數器的值。

counters()

counters 函數在 CSS 中非常有用，可用於管理自定義計數器，例如對列表項進行編號或對段落排序。此函數可以將多個計數器值與字符串連接起來，並在 CSS 內容中顯示。在這裡，我們將從 counters 函數的基本用法到實際應用示例進行詳細說明。

counter 和 counters 之間的區別

counter 和 counters 函數均用於顯示計數器值，但它們有以下區別。

  • counter: 獲取單個計數器的值。
  • counters: 將多個計數器值用指定的分隔符連接並顯示。

例如，如果您希望在嵌套列表項中使用計數器，則可以使用 counters 函數將父計數器與子計數器連接起來顯示。

counters 函數的語法 

counters(<counter-name>, <string>);

counters 函數使用以下語法。

  • <counter-name>: 指定要使用的計數器名稱。
  • <string>: 指定每個計數器之間要插入的字符串（通常是 . 或 - 等分隔符）。

counters 函數的使用示例

接下來，我們來看一個使用 counters 函數的示例。

 1ol {
 2    list-style: none;
 3    counter-reset: list-counter;
 4}
 5
 6li {
 7    counter-increment: list-counter;
 8}
 9
10li::before {
11    content: counters(list-counter, ".") " ";
12}
  • 在此示例中，父計數器和子計數器被連接起來，適用於兩級嵌套列表。
    • 正在定義 list-counter 計數器。
    • counters 函數用於串接並顯示父列表計數器和子列表計數器。

使用多層計數器的進階範例

使用 counters 函數，可以靈活地管理多層計數器，例如自定義編號或段落編號。例如，當製作包含章節和部分的文件時會很有用。

 1article {
 2    counter-reset: chapter;
 3}
 4
 5h1.chapter {
 6    font-size: 1.2rem;
 7    counter-increment: chapter;
 8    counter-reset: section;
 9}
10
11h1.chapter::before {
12    content: counter(chapter) " ";
13}
14
15h2.section {
16    font-size: 1.1rem;
17    counter-increment: section;
18    counter-reset: sub-section;
19}
20
21h2.section::before {
22    content: counters(chapter, ".") "." counter(section) " ";
23}
24
25h3.sub-section {
26    font-size: 1rem;
27    counter-increment: sub-section;
28}
29
30h3.sub-section::before {
31    content: counters(chapter, ".") "." counter(section) "." counter(sub-section) " ";
32}

在此代碼中，章節 (h1)、部分 (h2) 和子部分 (h3) 的計數器都被重設，並使用 counters 函數連接每個層級。

總結

當需要自定義並分層顯示多個計數器時，counters 函數非常有用。透過使用 CSS 計數器，可以自由地自定義清單和標題的編號，為網頁提供更高級的資訊結構。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video

與框模型裝飾相關的CSS屬性與表格相關的 CSS 屬性