■項目清單

在 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>

結果:

例 2:

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

結果:

 

◎ 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(icon1.gif);
}

那以下的 HTML 碼:

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

就會顯現為:

 

◎ list-style

以上提到的這三個 (list-style-stylelist-style-position、及 list-style-image) 屬性可以被簡化為一個 list-style 屬性。

這種做法稱為捷徑 (shortcut)。在這裡,屬性的順序並不重要。

舉例來說,以下的 CSS 樣式:

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

套用在以下的 HTML 碼中:

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

就會顯現出: