HackMDtags: HTML & CSS
[學習筆記] CSS 自訂標號圖示、段落縮排效果
- CSS list-style 列表屬性
- 更多項目標籤寫法參考：CSS list-style-type
CSS 中的標號圖示
在 HTML & CSS 中，想要建立段落標號樣式，可透過下列幾種方法：
- 第一種：
<span>行內標籤- 可插入 icon，但用在排序會較不符合語意化
<li><span>(1)</span>這是第一項</li>
<li><mat-icon class="cat"></mat-icon>這是一隻貓</li>
- 第二種：使用 ul（無序）、ol（有序）項目標籤
- 透過 li::before 自訂標號圖示，同樣可插入 icon
ul li 或 ol, li 項目標籤
在 HTML 中，可根據是否需呈現排序項目，使用 ol li 標籤；若不需排序，就直接使用 ul li 標籤。
可參考以下範例：
<!-- 無序列 -->
<ul>
<li>星期一</li>
<li>星期二</li>
</ul>
<!-- 有序列 -->
<ol>
<li>星期一</li>
<li>星期二</li>
</ol>
輸出效果如下：
- 星期一
- 星期二
- 星期一
- 星期二
CSS list-style 列表屬性
CSS 列表屬性，可用來調整列表的顯示功能，也就是上述提到的 ul li 或 ol li 項目標籤。
以下介紹幾種列表屬性：
- list-style-type：修改列表開頭符號
- list-style-image：修改列表開頭小圖示
- list-style-position：修改列表的顯示位置
list-style-type 屬性：修改列表開頭顯示符號
我們可透過 <ul>, <ol> 元素的 type 屬性，改變開頭編號的種類，如以下範例：
<!-- 小寫字母 -->
<ul style="list-style-type:lower-alpha;">
<li>lower-alpha</li>
<li>lower-alpha</li>
</ul>
<!-- 羅馬字母 -->
<ul style="list-style-type: lower-roman;">
<li>lower-roman</li>
<li>lower-roman</li>
</ul>
輸出效果如下：
a. lower-alpha
b. lower-alpha
i. lower-roman
ii. lower-roman
list-style-image 屬性：修改列表開頭為小圖示
- HTML 標籤
<ul>
<li>開頭符號為圖示的清單</li>
<li>開頭符號為圖示的清單</li>
</ul>
- CSS 樣式
ul li {
list-style-image: url('圖片路徑.svg');
}
list-style-position：修改列表的顯示位置
- HTML 標籤
<ul class="p1">
<li>這是在標籤範圍之內顯示</li>
<li>這是在標籤範圍之內顯示</li>
</ul>
<ul class="p2">
<li>這是在標籤範圍之外顯示</li>
<li>這是在標籤範圍之外顯示</li>
</ul>
- CSS 樣式
/* 項目符號在 li 範圍內 */
ul.p1 {
list-style-position: inside;
}
/* 項目符號在 li 範圍外（預設值） */
ul.p2 {
list-style-position: outside;
}
/* 可用來確認 li 項目位置 */
li {
border: 1px #cccccc solid;
}
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;
}
- 以下 DEMO 樣式渲染結果：
