在 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>
|
結果：
例 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("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>
|
就會顯現出，
- 第一項以捷徑方式列出的清單。
- 第二項以捷徑方式列出的清單。
|
