CSS list-style 屬性 · W3School CSS 參考手冊

# CSS list-style 屬性 ## 實例把圖像設置為列表中的列表項目標記： ``` ul { list-style:square inside url('/i/arrow.gif'); } ``` ## 瀏覽器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | 所有瀏覽器都支持 list-style 屬性。注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。 ## 定義和用法 list-style 簡寫屬性在一個聲明中設置所有的列表屬性。 ### 說明該屬性是一個簡寫屬性，涵蓋了所有其他列表樣式屬性。由于它應用到所有 display 為 list-item 的元素，所以在普通的 HTML 和 XHTML 中只能用于 li 元素，不過實際上它可以應用到任何元素，并由 list-item 元素繼承。可以按順序設置如下屬性： * list-style-type * list-style-position * list-style-image 可以不設置其中的某個值，比如 "list-style:circle inside;" 也是允許的。未設置的屬性會使用其默認值。 | 默認值： | disc outside none | | --- | --- | | 繼承性： | yes | | --- | --- | | 版本： | CSS1 | | --- | --- | | JavaScript 語法： | _object_.style.listStyle="decimal inside" | | --- | --- | ## 可能的值 | 值 | 描述 | | --- | --- | | _list-style-type_ | 設置列表項標記的類型。參閱：[list-style-type](/cssref/pr_list-style-type.asp "CSS list-style-type 屬性") 中可能的值。 | | _list-style-position_ | 設置在何處放置列表項標記。參閱：[list-style-position](/cssref/pr_list-style-position.asp "CSS list-style-position 屬性") 中可能的值。 | | _list-style-image_ | 使用圖像來替換列表項的標記。參閱：[list-style-image](/cssref/pr_list-style-image.asp "CSS list-style-image 屬性") 中可能的值。 | | inherit | 規定應該從父元素繼承 list-style 屬性的值。 | ## TIY 實例 [在一個聲明中定義所有的列表屬性](/tiy/t.asp?f=csse_list-style) 本例演示將所有針對列表的屬性設置于一個簡寫屬性。 ``` <html> <head> <style type="text/css"> ul { list-style: square inside url('/i/eg_arrow.gif') } </style> </head> <body> <ul> <li>咖啡</li> <li>茶</li> <li>可口可樂</li> </ul> </body> </html> ``` ## 相關頁面 CSS 教程：[CSS 列表](/css/css_list.asp "CSS 列表") HTML DOM 參考手冊：[listStyle 屬性](/jsref/prop_style_liststyle.asp "HTML DOM listStyle 屬性")