# 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 屬性")
- CSS3 動畫屬性(Animation)
- CSS3 @keyframes 規則
- CSS3 animation 屬性
- CSS3 animation-name 屬性
- CSS3 animation-duration 屬性
- CSS3 animation-timing-function 屬性
- CSS3 animation-delay 屬性
- CSS3 animation-iteration-count 屬性
- CSS3 animation-direction 屬性
- CSS3 animation-play-state 屬性
- CSS3 animation-fill-mode 屬性
- CSS 背景屬性(Background)
- CSS background 屬性
- CSS background-attachment 屬性
- CSS background-color 屬性
- CSS background-image 屬性
- CSS background-position 屬性
- CSS background-repeat 屬性
- CSS3 background-clip 屬性
- CSS3 background-origin 屬性
- CSS3 background-size 屬性
- CSS 邊框屬性(Border 和 Outline)
- CSS border 屬性
- CSS border-bottom 屬性
- CSS border-bottom-color 屬性
- CSS border-bottom-style 屬性
- CSS border-bottom-width 屬性
- CSS border-color 屬性
- CSS border-left 屬性
- CSS border-left-color 屬性
- CSS border-left-style 屬性
- CSS border-left-width 屬性
- CSS border-right 屬性
- CSS border-right-color 屬性
- CSS border-right-style 屬性
- CSS border-right-width 屬性
- CSS border-style 屬性
- CSS border-top 屬性
- CSS border-top-color 屬性
- CSS border-top-style 屬性
- CSS border-top-width 屬性
- CSS border-width 屬性
- CSS outline 屬性
- CSS outline-color 屬性
- CSS outline-style 屬性
- CSS outline-width 屬性
- CSS3 border-bottom-left-radius 屬性
- CSS3 border-bottom-right-radius 屬性
- CSS3 border-image 屬性
- CSS3 border-image-outset 屬性
- CSS3 border-image-repeat 屬性
- CSS3 border-image-slice 屬性
- CSS3 border-image-source 屬性
- CSS3 border-image-width 屬性
- CSS3 border-radius 屬性
- CSS3 border-top-left-radius 屬性
- CSS3 border-top-right-radius 屬性
- CSS3 box-shadow 屬性
- Box 屬性
- CSS3 overflow-x 屬性
- CSS3 overflow-y 屬性
- CSS3 overflow-style 屬性
- CSS3 rotation 屬性
- CSS3 rotation-point 屬性
- Color 屬性
- CSS3 opacity 屬性
- Content for Paged Media 屬性
- CSS 尺寸屬性(Dimension)
- CSS height 屬性
- CSS max-height 屬性
- CSS max-width 屬性
- CSS min-height 屬性
- CSS min-width 屬性
- CSS width 屬性
- 可伸縮框屬性(Flexible Box)
- CSS3 box-align 屬性
- CSS3 box-direction 屬性
- CSS3 box-flex 屬性
- CSS3 box-flex-group 屬性
- CSS3 box-lines 屬性
- CSS3 box-ordinal-group 屬性
- CSS3 box-orient 屬性
- CSS3 box-pack 屬性
- CSS 字體屬性(Font)
- CSS font 屬性
- CSS font-family 屬性
- CSS font-size 屬性
- CSS font-size-adjust 屬性
- CSS font-stretch 屬性
- CSS font-style 屬性
- CSS font-variant 屬性
- CSS font-weight 屬性
- 內容生成(Generated Content)
- CSS content 屬性
- CSS counter-increment 屬性
- CSS counter-reset 屬性
- CSS quotes 屬性
- Grid 屬性
- CSS3 grid-columns 屬性
- CSS3 grid-rows 屬性
- Hyperlink 屬性
- CSS3 target 屬性
- CSS3 target-name 屬性
- CSS3 target-new 屬性
- CSS3 target-position 屬性
- CSS 列表屬性(List)
- CSS list-style 屬性
- CSS list-style-image 屬性
- CSS list-style-position 屬性
- CSS list-style-type 屬性
- CSS 外邊距屬性(Margin)
- CSS margin 屬性
- CSS margin-bottom 屬性
- CSS margin-left 屬性
- CSS margin-right 屬性
- CSS margin-top 屬性
- Marquee 屬性
- 多列屬性(Multi-column)
- CSS3 column-count 屬性
- CSS3 column-fill 屬性
- CSS3 column-gap 屬性
- CSS3 column-rule 屬性
- CSS3 column-rule-color 屬性
- CSS3 column-rule-style 屬性
- CSS3 column-rule-width 屬性
- CSS3 column-span 屬性
- CSS3 column-width 屬性
- CSS3 columns 屬性
- CSS 內邊距屬性(Padding)
- CSS padding 屬性
- CSS padding-bottom 屬性
- CSS padding-left 屬性
- CSS padding-right 屬性
- CSS padding-top 屬性
- Paged Media 屬性
- CSS 定位屬性(Positioning)
- CSS bottom 屬性
- CSS clear 屬性
- CSS clip 屬性
- CSS cursor 屬性
- CSS display 屬性
- CSS float 屬性
- CSS left 屬性
- CSS overflow 屬性
- CSS position 屬性
- CSS right 屬性
- CSS top 屬性
- CSS vertical-align 屬性
- CSS visibility 屬性
- CSS z-index 屬性
- CSS 打印屬性(Print)
- CSS page-break-after 屬性
- CSS page-break-before 屬性
- CSS page-break-inside 屬性
- CSS 表格屬性(Table)
- CSS border-collapse 屬性
- CSS border-spacing 屬性
- CSS caption-side 屬性
- CSS empty-cells 屬性
- CSS table-layout 屬性
- CSS 文本屬性(Text)
- CSS color 屬性
- CSS direction 屬性
- CSS letter-spacing 屬性
- CSS line-height 屬性
- CSS text-align 屬性
- CSS text-decoration 屬性
- CSS text-indent 屬性
- CSS text-transform 屬性
- CSS unicode-bidi 屬性
- CSS white-space 屬性
- CSS word-spacing 屬性
- CSS3 hanging-punctuation 屬性
- CSS3 punctuation-trim 屬性
- CSS3 text-emphasis 屬性
- CSS3 text-justify 屬性
- CSS3 text-outline 屬性
- CSS3 text-overflow 屬性
- CSS3 text-shadow 屬性
- CSS3 text-wrap 屬性
- CSS3 word-break 屬性
- CSS3 word-wrap 屬性
- 2D/3D 轉換屬性(Transform)
- CSS3 transform 屬性
- CSS3 transform-origin 屬性
- CSS3 transform-style 屬性
- CSS3 perspective 屬性
- CSS3 perspective-origin 屬性
- CSS3 backface-visibility 屬性
- 過渡屬性(Transition)
- CSS3 transition 屬性
- CSS3 transition-property 屬性
- CSS3 transition-duration 屬性
- CSS3 transition-timing-function 屬性
- CSS3 transition-delay 屬性
- 用戶界面屬性(User-interface)
- CSS3 appearance 屬性
- CSS3 box-sizing 屬性
- CSS3 icon 屬性
- CSS3 nav-down 屬性
- CSS3 nav-index 屬性
- CSS3 nav-left 屬性
- CSS3 nav-right 屬性
- CSS3 nav-up 屬性
- CSS3 outline-offset 屬性
- CSS3 resize 屬性
- CSS 選擇器參考手冊
- CSS 聽覺參考手冊
- CSS 網絡安全字體組合
- CSS 單位
- CSS 顏色
- CSS 合法顏色值
- CSS 顏色名
- CSS 顏色十六進制值
- 免責聲明