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
標記元素是項目符號、連字號或羅馬數字,可協助說明清單中的每個項目。
在開發人員工具中檢查清單時,即使未在 HTML 中宣告任何清單項目,您還是可以看到每個清單項目的 ::marker
元素。如果您進一步檢查 ::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 項目符號的構成元素。在 Safari 中,::marker
僅提供有限支援。
標記方塊
在 CSS 版面配置模型中,清單項目標記會以與每個清單項目相關聯的標記方塊表示。標記方塊是一種容器,通常包含項目符號或編號。
如要設定標記方塊的樣式,可以使用 ::marker
選取器。這可讓您只選取標記,而不用根據整個清單設定樣式。
標記樣式
現在您已選取標記,接下來讓我們看看這個選取器可用的樣式屬性。你可以在 web.dev 上進一步瞭解使用 CSS ::marker 自訂項目符號。
可以使用的 CSS ::marker
屬性如下:
animation-*
transition-*
color
direction
font-*
content
unicode-bidi
white-space
顯示類型
我們所有的 list-style
和 ::marker
屬性都知道為 <li>
元素設定樣式,因為這些元素有清單項目的預設顯示值。您也可以將非 <li>
的內容設為清單項目。
方法很簡單,只要新增 display: list-item
屬性即可。例如,如果您想要在標題上懸掛項目符號,以便使用 ::marker
將項目符號變更為其他標題,便可以使用 display: list-item
。以下範例顯示使用 display: list-item
設定樣式的標題,以及使用正確清單標記的清單。
雖然您可以使用 display
將任何內容轉換為清單項目檢視畫面,但如果您實作樣式確實是清單內容,就不應使用正確的清單標記,而不應使用正確的清單標記。將項目的外觀變更為清單項目並不會改變無障礙服務的讀取及辨識項目的方式,因此這些內容無法在螢幕閱讀器閱讀或切換裝置時顯示為清單項目。請一律使用語意標記,並盡可能透過 <li>
建立清單。
隨堂測驗
測驗您對清單的瞭解程度
清單項目前方的元素稱為
HTML 清單有三種類型
<dl>
<lo>
<ol>
<li>
<ul>
<list>
這份清單中的哪兩種樣式會將樣式套用至 ::marker?
transition
background-color
color
display