list-style, list-style-image, list-style-position, list-style-type, marker-offset

list-style | list-style-image | list-style-position | list-style-type | marker-offset

list-style

可以一次設定 list-style-image, list-style-position, list-style-type 三個參數。個別的設定值請參考後面的說明。此特徵可設為：

1. list-style-image, list-style-position, list-style-type 的組合。
2. inherit：繼承父元素的特徵值。

list-style-image

設定項目單的標誌的圖像檔案的網址，可設為：

1. <URI>：標誌的圖像檔案的網址。
2. nono：沒有標誌，此為預設值。
3. inherit：繼承父元素的特徵值。

<ul style='list-style-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisusG9Gxvhb9HT3WDSKFsiW_cEXy1nTaztMKzvjoq8hhXesJiyqD2aABdrIwLSTjLnGQprkM3tmU7ywgAqdlWajZIDPnxLV3sDB23pJAY7xpHdoCUZ9i-tRWRnjYidYBivnoCmjxkB62yg/s200/ant.GIF") '> <li>賽車遊戲。 <li>網路遊戲。 <li>空戰遊戲。 </ul>

list-style-position

設定標誌矩形格子相對於主矩格的位置，可設為：

1. indise：標誌放在主矩格之內的第一個位置，其它內容接在其後。
2. outside：標誌放在主矩格之外，此為預設值。
3. inherit：繼承父元素的特徵值。

<style type='text/css'> .cls LI { background:#733; width:300px } </style> <div class='cls'> <ul style="list-style: inside lower-greek"> <li>射擊遊戲。 <li>遊戲天堂。 <li>小遊戲。 </ul><br /> <ol style="list-style: outside georgian"> <li>巴哈姆特。 <li>益智遊戲。 <li>無名小站。 </ol> </div>

list-style-type

設定項目單的標誌，以 list-style-image 為優先。可設為：

1. disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-alpha, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha：可設定為各種形狀的標誌，或不同語言的數字，或不同語言的字母。預設值為 disc。部分瀏覽器沒有完全支援這些項目，尤其是舊版本的瀏覽器。
2. none：沒有標誌。
3. inherit：繼承父元素的特徵值。

<style type='text/css'> .fst BR {clear:both} .typ LI {list-style-position:inside; float:left} </style> <ol class=fst> <li>disc（實心圓） <ol class=typ style='list-style-type: disc'> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> </ol><br /><br /> <li>circle（空心圓） <ol class=typ style='list-style-type: circle'> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> </ol><br /><br /> <li>square <ol class=typ style='list-style-type: square'> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> </ol><br /><br /> <li>decimal <ol class=typ style='list-style-type: decimal'> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> </ol><br /><br /> <li>decimal-leading-zero <ol class=typ style='list-style-type: decimal-leading-zero'> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> </ol><br /><br /> <li>lower-roman <ol class=typ style='list-style-type: lower-roman'> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> </ol><br /><br /> <li>upper-roman <ol class=typ style='list-style-type: upper-roman'> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> </ol><br /><br /> <li>lower-greek <ol class=typ style='list-style-type: lower-greek'> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> </ol><br /><br /> <li>lower-alpha <ol class=typ style='list-style-type: lower-alpha'> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> </ol><br /><br /> <li>lower-latin <ol class=typ style='list-style-type: lower-latin'> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> </ol><br /><br /> <li>upper-alpha <ol class=typ style='list-style-type: upper-alpha'> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> </ol><br /><br /> <li>upper-latin <ol class=typ style='list-style-type: upper-latin'> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> </ol><br /><br /> <li>hebrew <ol class=typ style='list-style-type: hebrew'> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> </ol><br /><br /> <li>armenian <ol class=typ style='list-style-type: armenian'> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> </ol><br /><br /> <li>georgian <ol class=typ style='list-style-type: georgian'> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> </ol><br /><br /> <li>cjk-ideographic <ol class=typ style='list-style-type: cjk-ideographic'> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> </ol><br /><br /> <li>hiragana <ol class=typ style='list-style-type: hiragana'> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> </ol><br /><br /> <li>katakana <ol class=typ style='list-style-type: katakana'> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> </ol><br /><br /> <li>hiragana-iroha <ol class=typ style='list-style-type: hiragana-iroha'> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> </ol><br /><br /> <li>katakana-iroha <ol class=typ style='list-style-type: katakana-iroha'> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> </ol><br /><br /> </ol>

• IE6 沒支援；Firefox3.0, Safari, Chrome 都成功。

marker-offset

設定標誌矩格與主矩格的距離，要配合 display:marker 使用。主要瀏覽器都沒有支援此特徵。可設為：

1. 長度：設定距離，可為負值。
2. auto：系統決定，此為預設值。
3. inherit：繼承父元素的特徵值。

:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。 <style type='text/css'> .hvr {list-style-type: upper-roman; } .hvr LI {list-style-position:inside; float:left; } .hvr LI:hover {list-style-type: lower-greek;} .hvr LI:active {list-style-type: cjk-ideographic;} </style> <ol class=hvr> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> </ol> <br clear=all>

javascript 應用。可以用 style 物件 的特徵 listStyle, listStyleImage, listStylePosition, listStyleType 讀取或設定特徵值。 <ul style='list-style:inside decimal' id='lst'> <li>測試 </ul> <script type='text/javascript'> var os=document.getElementById('lst').style; document.write( os.listStyle +'<br />'+ os.listStyleImage +'<br />'+ os.listStylePosition +'<br />'+ os.listStyleType ); </script>

• 不同瀏覽器的輸出結果有差異。