CSS教學-清單List屬性-分享2U

在 CSS 中常見的清單 (list) 屬性有以下幾種：
•list-style-type
•list-style-position
•list-style-image
•list-style

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

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

•none (沒有)
•disc (全黑圓圈)
•circle (空心圓圈)
•square (正方形)
One may also wish to use ordered character sets. Common ones are:
•upper-latin (大寫拉丁文)
•lower-latin (小寫拉丁文)
•upper-roman (大寫羅馬文)
•lower-roman (小寫羅馬文)
•upper-alpha (大寫希臘文 )
•lower-alpha (小寫希臘文 )

以下列舉幾個例子：
例 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>

就會顯現出，
•第一項以捷徑方式列出的清單。
•第二項以捷徑方式列出的清單。