CSS list-style 列表屬性

CSS list-style 列表屬性是 CSS 提供網頁設計師調整列表的顯示功能,所謂的列表就是 HTML ul li 項目標籤HTML ol li 項目標籤,中文也常稱為項目標籤或清單,不僅是網頁設計師,就連一般人也經常於內容中添加這些列表來條列資訊,傳統的 ul li 列表或 ol li 列表呈現方式比較單純,預設值為由上而下排列,ul li 是開頭一個黑點,ol li 則是在開頭自動產生數字排序,如果網頁設計師想要修改這些列表,例如修改開頭的圖形、將開頭的符號改成小圖片顯示或修改列表的呈現位置,都可以使用 CSS list-style 列表屬性來重新設計,以下為範例。

CSS list-style 範例一、修改列表(項目標籤)開頭顯示形狀
<ul style="list-style-type:square;">
 <li>square</li>
 <li>square</li>
</ul>
<ul style="list-style-type:upper-alpha;">
 <li>upper-alpha</li>
 <li>upper-alpha</li>
</ul>
呈現結果
  • square
  • square
  • upper-alpha
  • upper-alpha
我們利用 CSS list-style-type 調整列表的開頭顯示形狀為實心正方形(square)與英文字母大寫(upper-alpha),除此之外還可以顯示為英文字母小寫、實心圓形、空心圓形、阿拉伯數字、十進位制的阿拉伯數字(前方自動補零)、亞美尼亞語、希臘語、小寫羅馬數字、大寫羅馬數字 ... 等多種變化,這算是最簡單的 CSS list-style 列表屬性應用方式。

詳細用法與形狀挑選請參閱:CSS list-style-type

CSS list-style 範例二、修改列表(項目標籤)開頭為小圖示
<style type="text/css">
ul li {
    list-style-image:url('upload/20130930173146.gif');
}
</style>
<ul>
 <li>開頭符號為圖示的清單</li>
 <li>開頭符號為圖示的清單</li>
</ul>
呈現結果
  • 開頭符號為圖示的清單
  • 開頭符號為圖示的清單
範例二使用的是 CSS list-style-image 屬性,將開頭的標籤符號改為圖片顯示,這樣可以呈現出更具精緻質感的效果,不過小圖案要自己先設計好,稍微比較費工一點,詳細用法請參閱我們《CSS list-style-image》篇的介紹。

CSS list-style 屬性三、修改列表(項目標籤)的顯示位置
<style type="text/css">
ul.p1 {
    list-style-position:inside;
}
ul.p2 {
    list-style-position:outside;
}
li {
    border:1px #cccccc solid;
}
</style>
<ul class="p1">
 <li>這是在標籤範圍之內顯示</li>
 <li>這是在標籤範圍之內顯示</li>
</ul>
<ul class="p2">
 <li>這是在標籤範圍之外顯示</li>
 <li>這是在標籤範圍之外顯示</li>
</ul>
呈現結果
範例三是利用 CSS list-style-position 來調整項目清單所呈現的位置,可以在標籤的範圍內顯示或在範圍外顯示,這與整體網頁內容排版有很大的關係,調整方式也很簡單,CSS 允許設計師採用 inside 或 outside 的參數值,限制清單要顯示的位置,來與其它內文做搭配,如此一來就能讓清單不會動不動就突出內文區或縮得太裡面而不好看,詳細用法請參閱《CSS list-style-position》篇的介紹。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C