---
# System prepended metadata

title: 列表樣式 list-style-type
tags: [html, CSS, ES6]

---

列表樣式 list-style-type
========================
CSS list-style 列表屬性
-----------------------
CSS 列表屬性，可用來調整列表的顯示功能，也就是上述提到的 ul li 或 ol li 項目標籤。

以下介紹幾種列表屬性：

list-style-type：修改列表開頭符號
list-style-image：修改列表開頭小圖示
list-style-position：修改列表的顯示位置
list-style-type 屬性：修改列表開頭顯示符號
我們可透過 `<ul>`,`<ol>`元素的 type 屬性，改變開頭編號的種類，如以下範例：
	
```
<!-- 小寫字母 -->
<ol style="list-style-type:lower-alpha;">
　<li>lower-alpha</li>
　<li>lower-alpha</li>
</ol>

<!-- 羅馬字母 -->
<ol style="list-style-type: lower-roman;">
  <li>lower-roman</li>
  <li>lower-roman</li>
</ol>
```
	
輸出效果如下：
	
<ol style="list-style-type:lower-alpha;">
	<li>lower-alpha</li>
	<li>lower-alpha</li>
</ol>

<ol style="list-style-type: lower-roman;">
	<li>lower-roman</li>
	<li>lower-roman</li>
</ol>
	
所有list-style-type
------------------
```
<style>
	/* Partial list of types */
	list-style-type: disc;
	list-style-type: circle;
	list-style-type: square;
	list-style-type: decimal;
	list-style-type: georgian;
	list-style-type: trad-chinese-informal;
	list-style-type: kannada;

	/* <string> value */
	list-style-type: "-";

	/* Identifier matching an @counter-style rule */
	list-style-type: custom-counter-style;

	/* Keyword value */
	list-style-type: none;
</style>
```

#### list-style-type: disc;
<ul style="list-style-type: disc;">
	<li>test word test word</li>
	<li>test word test word</li>
</ul>
		
#### list-style-type: circle;
<ul style="list-style-type: circle;">
	<li>test word test word</li>
	<li>test word test word</li>
</ul>

#### list-style-type: square;
<ul style="list-style-type: square;">
	<li>test word test word</li>
	<li>test word test word</li>
</ul>

#### list-style-type: decimal;
<ul style="list-style-type: decimal;">
	<li>test word test word</li>
	<li>test word test word</li>
</ul>

#### list-style-type: georgian;
<ul style="list-style-type: georgian;">
	<li>test word test word</li>
	<li>test word test word</li>
</ul>

list-style-type: trad-chinese-informal;
<ul style="list-style-type: trad-chinese-informal;">
	<li>test word test word</li>
	<li>test word test word</li>
</ul>

#### list-style-type: kannada;
<ul style="list-style-type: kannada;">
	<li>test word test word</li>
	<li>test word test word</li>
</ul>

/* <string> value */
#### list-style-type: "-";
<style>
	ul li {
		list-style-type: "-";
	}	
</style>
<ul>
	<li>test word test word</li>
	<li>test word test word</li>
</ul>

/* Identifier matching an @counter-style rule */
#### list-style-type: custom-counter-style;
<style>
	@counter-style circled-alpha {
	  system: fixed;
	  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
	  suffix: " ";
	}

	ul {
	  list-style: circled-alpha;
	}
</style>
<ul style="	list-style-type: custom-counter-style;">
	<li>test word test word</li>
	<li>test word test word</li>
</ul>
	
list-style-image 屬性：修改列表開頭為小圖示
---------------------------------------
HTML 標籤
```
<ul>
　<li>開頭符號為圖示的清單</li>
　<li>開頭符號為圖示的清單</li>
</ul>

```
CSS 樣式
```
ul li {
　list-style-image: url('圖片路徑.svg');
}
```
Custom List Style 自訂標號樣式
-------------------------------
假如不想使用 ul, ol 標籤預設樣式，也可透過下列步驟來自訂標號樣式：

在 ol 取消預設樣式，並自訂一個標號變數

```
ol {
  list-style: none;
  counter-reset: my-counter;
}
```

在 ol li 使用自訂標號，可透過 text-indent 修改段落縮排：
```
ol li {
/*  使用自訂標號  */
  counter-increment: my-counter;
/* 段落首行縮排 */
  text-indent: -1em;
}
```

透過偽元素 li::before 使用自訂標號樣式，例如 (1)，即可插入想要的符號．或也可以替換成 url 路徑插入圖示：
```
/* 代表在自訂變數前後加上 ( ) */
ol li::before {
  content: "("counter(my-counter) ")";
}
```

完成的 CSS 樣式如下：
```
ol {
  list-style: none;
/*  命名自訂標號變數  */
  counter-reset: my-counter;
}
ol li {
/*  使用自訂標號  */
  counter-increment: my-counter;
/* 段落首行縮排 */
  text-indent: -1em;
}
/* 以偽元素自訂標號樣式 */
ol li::before {
  content: "("counter(my-counter) ")";
  color: blue;
  font-weight: bold;
}
```
<style>
	ol.bracket_list {
	  list-style: none;
	/*  命名自訂標號變數  */
	  counter-reset: my-counter;
	}
	ol.bracket_list li {
	/*  使用自訂標號  */
	  counter-increment: my-counter;
	/* 段落首行縮排 */
	  text-indent: -1em;
	}
	/* 以偽元素自訂標號樣式 */
	ol.bracket_list li::before {
	  content: "("counter(my-counter) ")";
	  color: blue;
	  font-weight: bold;
	}
</style>
<ol class="bracket_list" >
	<li>lower-roman</li>
	<li>lower-roman</li>
</ol>