在 CSS 中常見的清單 (list) 屬性有以下幾種:
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 { |
那以下的 HTML 碼,
<ul> |
就會顯現為,
- 第一項利用自我設定的記號。
- 第二項利用自我設定的記號。
list-style
以上提到的這三個 (list-style-style、list-style-position、及 list-style-image) 屬性可以被簡化為一個 list-style 屬性。這種做法稱為捷徑 (shortcut)。在這裡,屬性的順序並不重要。
舉例來說,以下的 CSS 樣式,
ul { |
套用在以下的 HTML 碼中,
<ul> |
就會顯現出,
- 第一項以捷徑方式列出的清單。
- 第二項以捷徑方式列出的清單。
留言列表