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 屬性是套用到整份清單的 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 項目符號的構成元素。::marker
在 Safari 中僅提供部分支援。
標記框
在 CSS 版面配置模型中,清單項目標記會以與每個清單項目相關聯的標記方塊表示。標記方塊是指容器,通常包含項目符號或編號。
如要設定標記方塊的樣式,您可以使用 ::marker
選取器。這樣您就可以只選取標記,而不是根據整個清單設定樣式。
標記樣式
您已選取標記,接著來看看此選取器可用的樣式屬性。你可以前往 web.dev,進一步瞭解如何使用 CSS 自訂項目符號 ::marker。
以下列舉幾個允許的 CSS ::marker
屬性:
animation-*
transition-*
color
direction
font-*
content
unicode-bidi
white-space
顯示類型
我們所有的 list-style
和 ::marker
屬性都知道設定 <li>
元素的樣式,因為它們具有預設的 list-item 顯示值。您也可以將非 <li>
的項目轉換為清單項目。
要做到這一點,請新增屬性 display: list-item
。display: list-item
的其中一個例子,是想在標題上放置項目符號,以便使用 ::marker
將項目符號變更為其他內容。下例顯示使用 display: list-item
設定樣式的標題,其中包含使用正確的清單標記的清單。
雖然您可以使用 display
將任何內容轉換為清單項目檢視畫面,但如果設定的內容確實為清單,請勿使用正確的清單標記。將項目的外觀外觀變更為清單項目,並不會改變無障礙服務讀取及辨識項目的方式,因此不會向螢幕閱讀器讀取及辨識該項目,因此不會向螢幕閱讀器讀取該項目,也無法切換裝置。請盡可能使用語意標記,並以 <li>
建立清單。
隨堂測驗
考驗你對清單的瞭解
清單項目之前的元素稱為
::bullet
::counter
::marker
::pencil
HTML 清單有三種類型
<ul>
<dl>
<lo>
<li>
<ol>
<list>
這份清單中的哪兩種樣式會將樣式套用至 ::marker
?
transition
color
display
background-color