CSS 清單

每一個屬性在以下會有詳細地介紹：

list-style-type

list-style-type 屬性是用來設定在清單中，每一條之前的記號要用什麼。最常見的 list-style-type 設定值為：

One may also wish to use ordered character sets. Common ones are:

以下列舉幾個例子：

例 1：

<ul style='list-style-type:upper-roman;'>   <li>項目 1</li>   <li>項目 2</li> </ul>

結果：

• 項目 1
• 項目 2

例 2：

<ul style='list-style-type:square;'>   <li>正方形項目 1</li>   <li>正方形項目 2</li> </ul>

結果：

• 正方形項目 1
• 正方形項目 2

list-style-position

list-style-position 屬性讓我們可以決定記號是否應該被視為是文字的一部份，並且由此而決定記號的位置。這個屬性可能的設定值為 "inside" 及 "outside"。預定值為 "outside"。

以下是兩個例子，由其中我們可以看出來 inside 及 outside 的不同：

例 3:

<ul style='list-style-position:inside;'>   <li>第一個項目<br>第一項目的第二行   <li>第二個項目 </ul>

結果：

• 第一個項目
  第一項目的第二行
• 第二個項目

例 4：

<ul style='list-style-position:outside;'>   <li>第一個項目<br>第一項目的第二行   <li>第二個項目 </ul>

結果：

• 第一個項目
  第一項目的第二行
• 第二個項目

list-style-image

list-style-image 屬性是用來將某個圖案設定為記號。這個屬性的用法為，

list-style-image:url([image_url]);

舉例來說，若 CSS 樣式為：

ul {   list-style-image:url("circle.gif"); }

那以下的 HTML 碼，

<ul>   <li>第一項利用自我設定的記號。   <li>第二項利用自我設定的記號。 </ul>

就會顯現為，

• 第一項利用自我設定的記號。
• 第二項利用自我設定的記號。

list-style

以上提到的這三個 (list-style-style、list-style-position、及 list-style-image) 屬性可以被簡化為一個 list-style 屬性。這種做法稱為捷徑 (shortcut)。在這裡，屬性的順序並不重要。

舉例來說，以下的 CSS 樣式，

ul {   list-style: url("circle.gif") none inside; }

套用在以下的 HTML 碼中，

<ul>   <li>第一項以捷徑方式列出的清單。   <li>第二項以捷徑方式列出的清單。 </ul>

就會顯現出，

• 第一項以捷徑方式列出的清單。
• 第二項以捷徑方式列出的清單。