CSS列表

1. 咖啡
2. 茶
3. 可口可樂

• 咖啡
• 茶
• 可口可樂

HTML列表和CSS列表屬性

在HTML中，有兩種​​主要類型的列表：

• 無序列表(<ul>) -列表項標有子彈
• 有序列表(<ol>) -列表項都標有數字或字母

在CSS列表屬性，您可以：

• 設置不同的列表項標記為有序列表
• 設置不同的列表項標記為無序列表
• 圖像設置為列表項標記
• 添加背景顏色列表和列表項

不同的列表項標記

該list-style-type屬性指定列表項標記的類型。

下面的例子顯示了一些可用的列表項標記：

注意：有些價值觀是無序列表，以及一些為有序列表。

圖像作為列表項標記

該list-style-image屬性指定的圖像作為列表項標記：

放置列表項標記

該list-style-position屬性指定列表項標記是否出現內部或內容流之外：

列表 - 速記屬性

該list-style屬性是一個速記屬性。 它是用來設置在一個聲明中的所有列表屬性：

當使用速記屬性，該屬性值的順序是：

• list-style-type （如果指定了目錄樣式圖像，將顯示該屬性的值，如果不能顯示由於某種原因圖像）
• list-style-position （指定列表項標記是否應出現內部或外部的內容流）
• list-style-image （指定為列表項標記的圖像）

如果屬性值高於缺失之一，缺少的屬性的默認值將被插入，如果有的話。

造型列表顏色

我們還可以列出款式顏色，使它們看起來更有趣一點。

任何加入<ol>或<ul>標記，影響整個列表，而屬性添加到<li>標記會影響個別列表項：

更多示例

全寬邊框列表
此示例演示如何創建沒有子彈接壤列表。

所有不同的列表項標誌物清單
這個例子演示了所有CSS不同的列表項標記。

自測練習用！

練習1» 練習2» 練習3»

所有的CSS列表屬性