列表樣式 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>