CSS Podcast - 030: 清單
假設你下次購物時打算購買多項商品。清單是呈現這項資訊的常見方式,但如何在購物清單中加入樣式?
<ul>
<li>oat milk</li>
<li>rhubarb</li>
<li>cereal</li>
<li>pie crust</li>
</ul>
建立清單
上述清單以語意元素 (<ul>
) 開始,雜貨清單項目 (<li>
元素) 則為子項。檢查每個 <li>
元素,您會發現它們都具有 display: list-item
,因此瀏覽器會預設呈現 ::marker
。
li {
display: list-item;
}
還有兩種清單類型。
您可以使用 <ol>
建立排序清單,在這種情況下,清單項目會顯示 ::marker
的編號。
<ol>
<li>oat milk</li>
<li>rhubarb</li>
<li>cereal</li>
<li>pie crust</li>
</ol>
說明清單則是使用 <dl>
建立,但這類清單不會使用 <li>
清單項目元素。
<dl>
<dt>oat milk</dt>
<dd>- non dairy trendy drink</dd>
<dt>cereal</dt>
<dd>- breakfast food</dd>
</dl>
清單樣式
您現在已瞭解如何建立清單,因此可以設定清單樣式。首先要探索的 CSS 屬性,是套用至整個清單的屬性。
您可以使用三種清單樣式屬性為範例設定樣式:list-style-position
、list-style-image
和 list-style-type
。
list-style-position
list-style-position
可讓您將項目符號移至 inside
或 outside
清單項目的內容。預設的 outside
表示清單項目內容中不包含項目符號,而 inside
會在清單項目內容中移動第一個元素。
list-style-image
list-style-image
可讓您將清單的項目符號替換為圖片。這樣一來,您就能設定圖片 (例如 url
或 none
),讓項目符號成為圖片、SVG 或 GIF 檔案。您也可以使用任何媒體類型,甚至是資料 URI。
我們來看看如何將每項雜貨商品的圖片新增為 list-style-image
:
list-style-type
最後一個選項是設定 list-style-type
的樣式,將項目符號變更為已知樣式關鍵字、自訂字串、表情符號等。如要查看所有可能的清單樣式類型,請按這裡。
list-style
速記法
有了所有這些個別屬性,您就可以使用 list-style
速記符號,在單一行中設定所有清單樣式:
list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>
list-style
可讓您以任意順序宣告一、兩或三個 list-style
屬性的組合。如果同時設定 list-style-type
和 list-style-image
,當圖片無法使用時,系統會使用 list-style-type
做為備用圖片。
/* type */
list-style: square;
/* image */
list-style: url('../img/shape.png');
/* position */
list-style: inside;
/* type | position */
list-style: georgian inside;
/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;
/* Keyword value */
list-style: none;
/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;
這是本節所述清單樣式中最常用的屬性。其中一個常見的應用是 list-style: none
,用於隱藏預設樣式。預設樣式來自瀏覽器,而您經常會看到重設樣式表移除邊距和邊框等清單樣式。您也可以使用這個簡寫符號來設定樣式,例如 list-style: square inside;
到目前為止,範例都著重於整個清單和清單項目的樣式設定,但如果採用更精細的方法呢?
::marker
擬造元素
list-item
標記元素是用於標示清單中每個項目的項目符號、連字號或羅馬數字。
如果您在開發人員工具中檢查清單,您會看到每個清單項目的 ::marker
元素,即使您未在 HTML 中宣告任何項目。如果進一步檢查 ::marker
,您會看到瀏覽器的預設樣式。
::marker {
unicode-bidi: isolate;
font-variant-numeric: tabular-nums;
text-transform: none;
text-indent: 0px !important;
text-align: start !important;
text-align-last: start !important;
}
宣告清單時,每個項目都會加上標記,即使 HTML 中沒有使用項目符號或羅馬數字。這是偽元素,因為瀏覽器會為您產生此元素,並提供受限的樣式 API 來指定此元素。進一步瞭解 CSS 子彈的結構。::marker
在 Safari 中僅支援部分功能。
標記方塊
在 CSS 版面配置模型中,清單項目標記會以與每個清單項目相關聯的標記方塊表示。標記方塊是通常包含項目符號或數字的容器。
如要設定標記方塊的樣式,您可以使用 ::marker
選取器。這樣一來,您就能只選取標記,而非根據整個清單選取樣式。
標記樣式
選取標記後,我們來看看這個選取器可用的樣式屬性。如要進一步瞭解如何使用 CSS ::marker 自訂項目符號,請前往 web.dev 參閱這篇文章。
允許的 CSS ::marker
屬性相當多:
animation-*
transition-*
color
direction
font-*
content
unicode-bidi
white-space
顯示類型
所有 list-style
和 ::marker
屬性都會為 <li>
元素設定樣式,因為它們具有預設的顯示值 list-item。您也可以將非 <li>
的項目加入清單。
方法是新增 display: list-item
屬性。舉例來說,如果您想在標題上使用懸掛式項目符號,可以使用 ::marker
將其變更為其他項目。display: list-item
以下範例顯示標題使用 display: list-item
設定樣式,並使用正確的清單標記。
雖然您可以使用 display
將任何內容轉換為清單項目檢視畫面,但如果您要設定的內容確實是清單,則不應使用 display
,而應使用正確的清單標記。將項目的外觀變更為清單項目,並不會改變無障礙服務讀取及辨識項目的方式,因此系統不會將其當作清單項目讀取給螢幕閱讀器或 Switch 裝置。您應一律使用語意標記,並盡可能使用 <li>
建立清單。
進行隨堂測驗
測驗你對清單的瞭解
清單項目前方的元素稱為
::bullet
::counter
::marker
::pencil
三種 HTML 清單類型如下:
<ul>
<ol>
<li>
<dl>
<list>
<lo>
下列清單中哪兩種樣式會將樣式套用至 ::marker
?
display
transition
background-color
color