# CSS 列表 **CSS 列表屬性允許你放置、改變列表項標志，或者將圖像作為列表項標志。** ## CSS 列表 從某種意義上講，不是描述性的文本的任何內容都可以認為是列表。人口普查、太陽系、家譜、參觀菜單，甚至你的所有朋友都可以表示為一個列表或者是列表的列表。 由于列表如此多樣，這使得列表相當重要，所以說，CSS 中列表樣式不太豐富確實是一大憾事。 ### 列表類型 要影響列表的樣式，最簡單（同時支持最充分）的辦法就是改變其標志類型。 例如，在一個無序列表中，列表項的標志 (marker) 是出現在各列表項旁邊的圓點。在有序列表中，標志可能是字母、數字或另外某種計數體系中的一個符號。 要修改用于列表項的標志類型，可以使用屬性 [list-style-type](/cssref/pr_list-style-type.asp "CSS list-style-type 屬性")： ``` ul {list-style-type : square} ``` 上面的聲明把無序列表中的列表項標志設置為方塊。 ### 列表項圖像 有時，常規的標志是不夠的。你可能想對各標志使用一個圖像，這可以利用 [list-style-image](/cssref/pr_list-style-image.asp "CSS list-style 屬性") 屬性做到： ``` ul li {list-style-image : url(xxx.gif)} ``` 只需要簡單地使用一個 url() 值，就可以使用圖像作為標志。 ### 列表標志位置 CSS2.1 可以確定標志出現在列表項內容之外還是內容內部。這是利用 [list-style-position](/cssref/pr_list-style-position.asp "CSS list-style-position 屬性") 完成的。 ### 簡寫列表樣式 為簡單起見，可以將以上 3 個列表樣式屬性合并為一個方便的屬性：[list-style](/cssref/pr_list-style.asp "CSS list-style 屬性")，就像這樣： ``` li {list-style : url(example.gif) square inside} ``` list-style 的值可以按任何順序列出，而且這些值都可以忽略。只要提供了一個值，其它的就會填入其默認值。 ## CSS 列表實例： [在無序列表中的不同類型的列表標記](/tiy/t.asp?f=csse_list-style-type) [在有序列表中不同類型的列表項標記](/tiy/t.asp?f=csse_list-style-type2) [所有的列表樣式類型](/tiy/t.asp?f=csse_list-style-type_all) [將圖像作為列表項標記](/tiy/t.asp?f=csse_list-style-image) [放置列表標記](/tiy/t.asp?f=csse_list-style-position) [在一個聲明中定義所有的列表屬性](/tiy/t.asp?f=csse_list-style) ## CSS 列表屬性(list) | 屬性 | 描述 | | --- | --- | | [list-style](/cssref/pr_list-style.asp) | 簡寫屬性。用于把所有用于列表的屬性設置于一個聲明中。 | | [list-style-image](/cssref/pr_list-style-image.asp) | 將圖象設置為列表項標志。 | | [list-style-position](/cssref/pr_list-style-position.asp) | 設置列表中列表項標志的位置。 | | [list-style-type](/cssref/pr_list-style-type.asp) | 設置列表項標志的類型。 | | marker-offset |