CSS教學：編號清單、項目符號列表的自訂風格、數字表示方式（以WordPress為例）

無論是做簡報或是撰寫報告時，為了清楚呈現出想要表達的內容，我們有時候會透過條列式的編排方式進行呈現。如果是應用在網頁內容，我們會透過「編號清單」或是「項目符號列表」的技術來編排這些條列式內容。

不過在設計網站內容的階段，由於需要透過 HTML 語法來撰寫，編排設計的自由度便受限於工具開發者所推出的有限功能，無法像在微軟文書處理工具 Office 或簡報軟體 Keynotes 等來得方便。不過實際上要是能夠深入了解 HTML 語法內容，實際能夠呈現出來的效果也可以達到讓人滿地的成果，有時候甚至比起來得固定式的電腦軟體來得更加自由，就是語法撰寫上比較麻煩些。

備註：我在兩個網站測試下面的錯誤狀況，其中一個網站可以正確變更為數字，但是另一個沒辦法，因此我無法肯定你一定會遇到同樣問題。總之，就算我們採用了正確的 HTML 語法與參數，也很可能因為外觀佈景（Theme）或是瀏覽器支援度等影響而改變呈現效果，關於這一點也只能自己多加測試，因此本文重點還是擺在文末的編號語法列表，供大家參考使用。

例如在 WordPress 中，如果要列出三種表列內容，會出現如下效果：

1. 內容一
2. 內容二
3. 內容三

語法如下：

1. 內容一
2. 內容二
3. 內容三

要是我想在 1 中塞入兩條子項（使用「增加縮排」按鈕，或鍵盤上的「tab」按鍵），會變成：

1. 內容一子項一
2. 子項二

內容二內容三

語法如下：

1. 內容一
   1. 子項一
   2. 子項二
2. 內容二
3. 內容三

接著我想用其他符號（例如小寫英文字母或小寫希臘字母），可以在編號清單的按鈕下拉清單中直接改選，效果如下：

1. 內容一子項一
2. 子項二

內容二內容三

語法如下：

1. 內容一
   1. 子項一
   2. 子項二
2. 內容二
3. 內容三

不過在 WordPress 的設計中有一個瑕疵，如果主要編號不是數字，那麼子項（有可能）沒辦法再選用預設數字，情況如下：

1. 內容一子項一
2. 子項二

內容二內容三

語法如下：

1. 內容一
   1. 子項一
   2. 子項二
2. 內容二
3. 內容三

這時候我們可以透過手動變更 HTML 語法（文字），將子項的編號改回數字，語法如下：

編號語法

其他編號清單、項目符號列表的可用參數列於下面，提供大家做為參考，也可以在編輯器不支援的情況下，親手挑選想用的符號，包括：

• •••：disc（預設；原點）。
• ○○○：circle（圓圈）。
• ▪▪▪：square（方塊）。
• 1、2、3：decimal（預設；數字）。
• 01、02、03：decimal-leading-zero（小數開頭的數字）。
• i、ii、iii：lower-roman（小寫羅馬數字）。
• I、II、III：upper-roman（大寫羅馬數字）。
• α、β、γ：lower-greek（小寫希臘字母）。
• a、b、c：lower-latin（小寫拉丁文字母）。
• A、B、C：upper-latin（大寫拉丁文字母）。
• Ա、Բ、Գ：armenian（亞美尼亞字母）。
• ა、ბ、გ：georgian（格魯吉亞字母）。
• a、b、c：lower-alpha（小寫英文字母）。
• A、B、C：upper-alpha（大寫英文字母）。