在 CSS 中常見的清單 (list) 屬性有以下幾種:
每一個屬性在以下會有詳細地介紹:
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> |
結果:
例 2:
<ul style='list-style-type:square;'> <li>正方形項目 1</li> <li>正方形項目 2</li> </ul> |
結果:
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:url([image_url]);
舉例來說,若 CSS 樣式為:
ul { |
那以下的 HTML 碼:
<ul> |
就會顯現為:
以上提到的這三個 (list-style-style、list-style-position、及 list-style-image) 屬性可以被簡化為一個 list-style 屬性。
這種做法稱為捷徑 (shortcut)。在這裡,屬性的順序並不重要。
舉例來說,以下的 CSS 樣式:
ul { |
套用在以下的 HTML 碼中:
<ul> |
就會顯現出: