CSS list-style-type

CSS list-style-type 可以用來設定 ul li 或 ol li 的項目符號,無論是 ul li 無排序項目或是 ol li 有排序項目清單都可以使用 CSS list-style-type 來修改每個項目的標示符號,例如無標示、空心圓圈、實心圓圈、大寫英文字母、小寫英文字母、數字、正方形甚至是羅馬數字,都是常見到的標示方式,換句話說 CSS list-style-type 有非常多種不同的風格可以使用。

CSS list-style-type 範例參考
<style type="text/css">
<!--
ul.A {
    list-style-type:decimal;
}
ol.B {
    list-style-type:lower-roman;
}
-->
</style>
<ul class="A">
 <li>項目一</li>
 <li>項目二</li>
</ul>
<ol class="B">
 <li>項目一</li>
 <li>項目二</li>
</ol>
以上範例呈現結果如
  • 項目一
  • 項目二
  1. 項目一
  2. 項目二
透過 list-style-type 參數的修改,將第一個 ul 標籤的項目符號由原本預設的「●」取代為數字並且有排序,接著的 ol 項目標籤原本預設是有排序的數字項目符號,修改為小寫羅馬拼音的數字寫法,且保有排序的效果,參數表整理了許多常用到的項目符號參數。

CSS list-style-type 常用參數表
參數
定義
none
不顯示符號
disc
實心圓形
circle
空心圓形
square
實心正方形
lower-alpha
小寫英文字母
upper-alpha
大寫英文字母
decimal阿拉伯數字
decimal-leading-zero十進位制的阿拉伯數字,前方自動補零
armenian
亞美尼亞語
lower-greek
希臘語
lower-roman
小寫羅馬數字
upper-roman
大寫羅馬數字

帶入常用參數的範例
<ul style="list-style-type:square;">
 <li>none</li>
 <li>none</li>
</ul>
<ul style="list-style-type:decimal;">
 <li>decimal</li>
 <li>decimal</li>
</ul>
<ul style="list-style-type:decimal-leading-zero;">
 <li>decimal-leading-zero</li>
 <li>decimal-leading-zero</li>
</ul>
<ul style="list-style-type:lower-alpha;">
 <li>lower-alpha</li>
 <li>lower-alpha</li>
</ul>
<ul style="list-style-type:upper-alpha;">
 <li>upper-alpha</li>
 <li>upper-alpha</li>
</ul>
<ul style="list-style-type:lower-roman;">
 <li>lower-roman</li>
 <li>lower-roman</li>
</ul>
以上範例輸出結果
  • none
  • none
  • decimal
  • decimal
  • decimal-leading-zero
  • decimal-leading-zero
  • lower-alpha
  • lower-alpha
  • upper-alpha
  • upper-alpha
  • lower-roman
  • lower-roman
範例直接將 style 寫在 <ul> 標籤內,是一種簡化的寫法,單獨處理單一網頁中多組 ul 標籤也相當好用,不過若網頁中有許多不同的 ul 項目組都需要一樣的風格,則第一個範例的寫法對於整體管理會比較便利些。

相關主題研究
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C