CSS的Word中的列表詳解

在word中，列表也是使用頻率非常高的元素。在CSS中，列表和清單項目都是區塊層級元素。也就是說，一個列表會形成一個塊框，其中的每個清單項目也會形成一個獨立的塊框。所以，盒模型中塊框的所有屬性，都適用於列表和清單項目。

除此之外，列表還有 3 個特有的屬性 list-style-type、list-style-position和list-style-image，分別用來定義清單項目符號的樣式、項目符號的位置、項目符號的圖片。

列表可以相互嵌套，並且一種類型的列表，可以與任何類型的列表相互嵌套。列表的表項也可以與任何HTML元素（如段落、圖片、連結等）交叉定義。

在word中，常常可以看到列表與段落、圖片、表格等交叉的情況。其實，列表跟其他元素交叉的情形更常見，純粹的列表反而少見。如：

1. <p>列表的list-style-type、list-style-position…項目符號所使用的圖片。</p><ul>   <li>list-style-type屬性</li>   <ol>      <p>list-style-type屬性用來設定清單項目符號，取值有：</p>      <li>disc 預設值，實心圓</li>      <li>decimal       數字1、2、3、4、5</li>      <li>lower-alpha 小寫英文字母a、b、c、d、e</li>      <li>lower-roman 小寫羅馬數字ⅰ、ⅱ、ⅲ、ⅳ、ⅴ</li>    </ol>    <li>list-style-position屬性</li>    <li>list-style-image屬性</li><ul>

上述代碼中，在 ul 中嵌套了 ol，在 ol 中，段落元素 p 也與清單項目 li 元素交叉定義。這隻是一個非常簡單的執行個體，通過該執行個體，來示範如何為列表應用樣式。

由於不同的瀏覽器下，列表的預設樣式可能不同。所以，為了在所有瀏覽器中表現一致，首先要清除列表的預設樣式，如外邊距、內邊距、清單項目符號等。

1. ul,ol {    margin: 0;    padding: 0;}

預設情況下，列表的 list-style-position屬性值為 outside，項目符號不佔據容器的空間。在列表元素的 margin 或 padding 為 0 時，項目符號在容器的外面，項目符號將無法與段落文本對齊。所以，根據需要，可以把list-style-position屬性設定為inside。

另外，中文有一個書寫習慣，就是段落首行縮排兩個字元。要使列表和段落對齊，清單項目同樣也要首行縮排兩個字元。

1. ul li, ol li {   text-indent: 2em;   list-style-position: inside;}

由於預設的清單項目符號過於簡單，並且選擇範圍很小，根本不能滿足大多數使用者的需求。對此，CSS提供了圖片替換技術，可以選用符合頁面風格的圖片，來取代預設的清單項目符號。

取代預設的清單項目符號時，HTML代碼無需任何修改，只需使用 list-style-image屬性定義圖片的URL即可。這也是CSS優越性的體現。這裡，對無序列表，使用 square.png 作為項目符號，而有序列表使用預設的數字項目符號。

1. ul {   list-style-image: url(img/square.png);}ol {   list-style-type: decimal;}

上述代碼看似沒有問題，並在Chrome下運行正常，但在IE的所有版本和Opera下，內層的 ol 依然使用 square.png 作為項目符號。究其原因，是因為 list-style-image屬性具有繼承性，內層列表繼承了外層列表的list-style-image屬性所導致。

所以，如果要用圖片取代預設的清單項目符號，在清除列表的預設樣式時，還要把 list-style屬性設定為 none。

1. ol {   list-style-type: decimal;   list-style-image: none;}

經過上述處理之後，我們定義的列表，就跟word中的列表相差無幾了，並在所有瀏覽器下表現一致。運行結果 11‑13 所示：

圖11-13 列表樣式

雖然使用 list-style-image 很容易達到目的，但是由於列表的格式化，主要由瀏覽器，而不是由設計人員完成的，所以無法精確控製圖片的位置。從可以看出，圖片和文本很難正確對齊。並且，在不同的瀏覽器下，圖片和文字之間的距離也不盡相同。

然而，並非只有 list-style-image屬性才能實現使用圖片替換項目符號的功能。前面介紹過，CSS把頁面上的任何元素都看作一個盒子，盒模型的大多數公用屬性，其實都適用於列表，包括背景屬性。所以，這時候背景就可以派上用場，可以使用背景來替代 list-style-image，再通過 background-position屬性，來精確控制項目符號的位置。

要使用背景作為項目符號，首先要重設 list-style-type屬性，把它置為 none。否則，項目符號和背景將會同時出現。

1. ul  {   list-style-type: none;}

然後，為列表的 li 元素定義一個背景映像，並設定為不平鋪。為了防止 li 中的文本覆蓋背景映像，需要為 li 設定適當的左外邊距，為圖片騰出空間。再通過 background-position屬性來精確控制背景映像的位置，保證背景映像和文本正確對齊。

1. ul  li {   margin-left: 2em;   background-position: 0 6px;   background-repeat: no-repeat;   background-image: url(img/square.png); }

通過調整圖片的位置，項目符號和文本可以正確對齊，並且在所有瀏覽器下的表現一致，比直接使用 list-style-image屬性的效果明顯要好多了（限於篇幅，就不了），這就是使用背景映像的好處。