清單

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>

清單樣式

瀏覽器支援

  • 1
  • 12
  • 1
  • 1

資料來源

現在您已瞭解如何建立清單，現在可以設定清單樣式。要探索的第一個 CSS 屬性會套用至整份清單。

您可以利用三種清單樣式屬性來設定範例的樣式：list-style-position、list-style-image 和 list-style-type。

list-style-position

list-style-position 可讓您將項目符號移至 inside 或 outside 清單項目的內容。預設的 outside 表示項目符號不在清單項目內容中，而 inside 會在清單項目內容中移動第一個元素。

同時包含外部和位於 ::marker 的清單，其中顯示外部 (預設值) 並不在清單項目中，而且位於清單項目內容方塊中。

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 pseudo-elements。

在開發人員工具中檢查清單時，即使未在 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> 建立清單。

隨堂測驗

測驗您對清單的瞭解程度

清單項目前方的元素稱為

::項目符號
請再試一次。
::鉛筆
請再試一次。
::標記
答對了！
::counter
請再試一次。

HTML 清單有三種類型

<dl>
答對了！
<lo>
請再試一次。
<ol>
答對了！
<li>
請再試一次。
<ul>
答對了！
<list>
請再試一次。

這份清單中的哪兩種樣式會將樣式套用至 ::marker？

transition
答對了！
background-color
請再試一次。
color
答對了！
display
請再試一次。

資源