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

# CSS list-style-type 屬性 ## 實例設置不同的列表樣式： ``` ul.circle {list-style-type:circle;} ul.square {list-style-type:square;} ol.upper-roman {list-style-type:upper-roman;} ol.lower-alpha {list-style-type:lower-alpha;} ``` （在頁面底部可以找到更多實例） ## 瀏覽器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | 所有瀏覽器都支持 list-style-type 屬性。注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "decimal-leading-zero"、"lower-greek"、"lower-latin"、"upper-latin"、"armenian"、"georgian" 或 "inherit"。 ## 定義和用法 list-style-type 屬性設置列表項標記的類型。 | 默認值： | disc | | --- | --- | | 繼承性： | yes | | --- | --- | | 版本： | CSS1 | | --- | --- | | JavaScript 語法： | _object_.style.listStyleType="square" | | --- | --- | ## 可能的值 ### CSS2 的值： | 值 | 描述 | | --- | --- | | none | 無標記。 | | disc | 默認。標記是實心圓。 | | circle | 標記是空心圓。 | | square | 標記是實心方塊。 | | decimal | 標記是數字。 | | decimal-leading-zero | 0開頭的數字標記。(01, 02, 03, 等。) | | lower-roman | 小寫羅馬數字(i, ii, iii, iv, v, 等。) | | upper-roman | 大寫羅馬數字(I, II, III, IV, V, 等。) | | lower-alpha | 小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。) | | upper-alpha | 大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。) | | lower-greek | 小寫希臘字母(alpha, beta, gamma, 等。) | | lower-latin | 小寫拉丁字母(a, b, c, d, e, 等。) | | upper-latin | 大寫拉丁字母(A, B, C, D, E, 等。) | | hebrew | 傳統的希伯來編號方式 | | armenian | 傳統的亞美尼亞編號方式 | | georgian | 傳統的喬治亞編號方式(an, ban, gan, 等。) | | cjk-ideographic | 簡單的表意數字 | | hiragana | 標記是：a, i, u, e, o, ka, ki, 等。（日文片假名） | | katakana | 標記是：A, I, U, E, O, KA, KI, 等。（日文片假名） | | hiragana-iroha | 標記是：i, ro, ha, ni, ho, he, to, 等。（日文片假名） | | katakana-iroha | 標記是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名） | ### CSS2.1 的值： ``` disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none | inherit ``` ## TIY 實例 [在無序列表中的不同類型的列表標記](/tiy/t.asp?f=csse_list-style-type) 本例演示在CSS中不同類型的列表項標記。 ``` <html> <head> <style type="text/css"> ul.disc {list-style-type: disc} ul.circle {list-style-type: circle} ul.square {list-style-type: square} ul.none {list-style-type: none} </style> </head> <body> <ul class="disc"> <li>咖啡</li> <li>茶</li> <li>可口可樂</li> </ul> <ul class="circle"> <li>咖啡</li> <li>茶</li> <li>可口可樂</li> </ul> <ul class="square"> <li>咖啡</li> <li>茶</li> <li>可口可樂</li> </ul> <ul class="none"> <li>咖啡</li> <li>茶</li> <li>可口可樂</li> </ul> </body> </html> ``` [在有序列表中不同類型的列表項標記](/tiy/t.asp?f=csse_list-style-type2) 本例演示在CSS中不同類型的列表項標記。 ``` <html> <head> <style type="text/css"> ol.decimal {list-style-type: decimal} ol.lroman {list-style-type: lower-roman} ol.uroman {list-style-type: upper-roman} ol.lalpha {list-style-type: lower-alpha} ol.ualpha {list-style-type: upper-alpha} </style> </head> <body> <ol class="decimal"> <li>咖啡</li> <li>茶</li> <li>可口可樂</li> </ol> <ol class="lroman"> <li>咖啡</li> <li>茶</li> <li>可口可樂</li> </ol> <ol class="uroman"> <li>咖啡</li> <li>茶</li> <li>可口可樂</li> </ol> <ol class="lalpha"> <li>咖啡</li> <li>茶</li> <li>可口可樂</li> </ol> <ol class="ualpha"> <li>咖啡</li> <li>茶</li> <li>可口可樂</li> </ol> </body> </html> ``` [所有的列表樣式類型](/tiy/t.asp?f=csse_list-style-type_all) 本例演示在CSS中所有不同類型的列表項標記。 ``` <html> <head> <style type="text/css"> ul.none {list-style-type: none} ul.disc {list-style-type: disc} ul.circle {list-style-type: circle} ul.square {list-style-type: square} ul.decimal {list-style-type: decimal} ul.decimal-leading-zero {list-style-type: decimal-leading-zero} ul.lower-roman {list-style-type: lower-roman} ul.upper-roman {list-style-type: upper-roman} ul.lower-alpha {list-style-type: lower-alpha} ul.upper-alpha {list-style-type: upper-alpha} ul.lower-greek {list-style-type: lower-greek} ul.lower-latin {list-style-type: lower-latin} ul.upper-latin {list-style-type: upper-latin} ul.hebrew {list-style-type: hebrew} ul.armenian {list-style-type: armenian} ul.georgian {list-style-type: georgian} ul.cjk-ideographic {list-style-type: cjk-ideographic} ul.hiragana {list-style-type: hiragana} ul.katakana {list-style-type: katakana} ul.hiragana-iroha {list-style-type: hiragana-iroha} ul.katakana-iroha {list-style-type: katakana-iroha} </style> </head> <body> <ul class="none"> <li>"none" 類型</li> <li>茶</li> <li>可口可樂</li> </ul> <ul class="disc"> <li>Disc 類型</li> <li>茶</li> <li>可口可樂</li> </ul> <ul class="circle"> <li>Circle 類型</li> <li>茶</li> <li>可口可樂</li> </ul> <ul class="square"> <li>Square 類型</li> <li>茶</li> <li>可口可樂</li> </ul> <ul class="decimal"> <li>Decimal 類型</li> <li>茶</li> <li>可口可樂</li> </ul> <ul class="decimal-leading-zero"> <li>Decimal-leading-zero 類型</li> <li>茶</li> <li>可口可樂</li> </ul> <ul class="lower-roman"> <li>Lower-roman 類型</li> <li>茶</li> <li>可口可樂</li> </ul> <ul class="upper-roman"> <li>Upper-roman 類型</li> <li>茶</li> <li>可口可樂</li> </ul> <ul class="lower-alpha"> <li>Lower-alpha 類型</li> <li>茶</li> <li>可口可樂</li> </ul> <ul class="upper-alpha"> <li>Upper-alpha 類型</li> <li>茶</li> <li>可口可樂</li> </ul> <ul class="lower-greek"> <li>Lower-greek 類型</li> <li>茶</li> <li>可口可樂</li> </ul> <ul class="lower-latin"> <li>Lower-latin 類型</li> <li>茶</li> <li>可口可樂</li> </ul> <ul class="upper-latin"> <li>Upper-latin 類型</li> <li>茶</li> <li>可口可樂</li> </ul> <ul class="hebrew"> <li>Hebrew 類型</li> <li>茶</li> <li>可口可樂</li> </ul> <ul class="armenian"> <li>Armenian 類型</li> <li>茶</li> <li>可口可樂</li> </ul> <ul class="georgian"> <li>Georgian 類型</li> <li>茶</li> <li>可口可樂</li> </ul> <ul class="cjk-ideographic"> <li>Cjk-ideographic 類型</li> <li>茶</li> <li>可口可樂</li> </ul> <ul class="hiragana"> <li>Hiragana 類型</li> <li>茶</li> <li>可口可樂</li> </ul> <ul class="katakana"> <li>Katakana 類型</li> <li>茶</li> <li>可口可樂</li> </ul> <ul class="hiragana-iroha"> <li>Hiragana-iroha 類型</li> <li>茶</li> <li>可口可樂</li> </ul> <ul class="katakana-iroha"> <li>Katakana-iroha 類型</li> <li>茶</li> <li>可口可樂</li> </ul> </body> </html> ``` ## 相關頁面 CSS 教程：[CSS 列表](/css/css_list.asp "CSS 列表") CSS 參考手冊：[CSS list-style 屬性](/cssref/pr_list-style.asp "CSS list-style 屬性") HTML DOM 參考手冊：[listStyleType 屬性](/jsref/prop_style_liststyletype.asp "HTML DOM listStyleType 屬性")