CSS - 列表樣式

上一頁
下一頁

列表非常有用，因為它們以結構化和組織化的方式呈現資訊。列表提高了網頁內容的可讀性和理解性。因此，如果內容列出，就很容易理解。

列表通常用於顯示專案、步驟、選項或任何其他應按順序或分組呈現的相關資訊。

本章將討論如何使用 CSS 控制列表型別、位置、樣式等。在此之前，讓我們瞭解 HTML 中的列表型別。

目錄


 

列表型別

以下是 HTML 中使用的列表型別。

  • 有序列表 (<ol>)：當需要按特定順序呈現專案時使用。通常用於過程、步驟、說明或任何順序資訊，其中順序很重要。
  • 無序列表 (<ul>)：當專案的順序無關緊要，並且您想將專案作為一組呈現時使用。通常用於功能、好處、選項或任何非順序資訊的列表。
  • 定義列表 (<dl>)：用於術語及其相應的定義。

List Style Type 屬性

CSS 的list-style-type屬性用於更改有序 (<ol>) 或無序 (<ul>) 列表中列表項的標記（例如專案符號或數字）樣式。

以下示例顯示了一些列表樣式型別。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* Unordered List Styles */
        ul.circle {
            list-style-type: circle; /* Circle bullets */
        }

        ul.square {
            list-style-type: square; /* Square bullets */
        }

        ul.none {
            list-style-type: none; /* No bullets */
        }

        /* Ordered List Styles */
        ol.decimal {
            list-style-type: decimal; /* Default decimal numbers */
        }

        ol.upper-roman {
            list-style-type: upper-roman; /* Uppercase Roman numerals */
        }

        ol.lower-alpha {
            list-style-type: lower-alpha; /* Lowercase alphabetic characters */
        }
    </style>
</head>
<body>
    <h2>Unordered Lists</h2>
    <ul class="circle">
        <li>Circle bullet 1</li>
        <li>Circle bullet 2</li>
        <li>Circle bullet 3</li>
    </ul>

    <ul class="square">
        <li>Square bullet 1</li>
        <li>Square bullet 2</li>
        <li>Square bullet 3</li>
    </ul>

    <ul class="none">
        <li>No bullet </li>
        <li>No bullet </li>
        <li>No bullet </li>
    </ul>

    <h2>Ordered Lists</h2>
    <ol class="decimal">
        <li>Decimal number </li>
        <li>Decimal number </li>
        <li>Decimal number </li>
    </ol>

    <ol class="upper-roman">
        <li>Roman numeral </li>
        <li>Roman numeral </li>
        <li>Roman numeral </li>
    </ol>

    <ol class="lower-alpha">
        <li>Letter </li>
        <li>Letter </li>
        <li>Letter </li>
    </ol>
</body>
</html>

List Style Image 屬性

list-style-image屬性可用於指定影像/圖示作為專案列表標記。

您可以使用您自己的專案符號樣式。如果找不到影像，則返回預設專案符號。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        ul { 
            list-style-image: url('/css/images/smiley.png');
        }
        ol{
            list-style-type: upper-roman;
            list-style-image: url('/css/images/smiley');      
        }
    </style>
</head>

<body>
    <ul>
        <li> This is unordered list </li>
        <li> We made custom marker for this </li>
    </ul>

    <ol>
        <li> Incorrect URL given for ol style </li>
        <li> No custom image will be used.</li>
        <li> Specified style type will be used. </li>
    </ol>
</body>

</html>
建議為影像作為列表標記提供替代項，以便在影像未載入或損壞的情況下，使用者有備選方案。

List Style Position 屬性

list-style-position屬性指示標記應顯示在包含專案符號的框內還是框外。它可以具有以下值之一。

  • list-style-position: inside 如果文字轉到第二行，文字將環繞在標記下方。它還將具有正確的縮排。
  • list-style-position: outside 如果文字轉到第二行，文字將與第一行的開頭對齊（專案符號的右側）。
  • list-style-position: inherit 在巢狀列表的情況下繼承父列表的屬性。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        body{
            padding: 10px;
        }
        ul {
            padding: 0;
            border-left: solid 2px;
        }
    </style>
</head>

<body>
  <ul style = "list-style-position:outside;">
      <li>
          The list style position property is outside. In this 
          case when text overflows to the next line, the marker 
          will lay outside the text area of list. 
      </li>
      <li> Check out yourselves. </li>
  </ul>
  <ul style = "list-style-position:inside;">
      <li>
          The list style position property is inside. In this 
          case when text overflows to the next line, the marker 
          will lay inside the text area of list. 
      </li>
      <li> Check out yourselves. </li>
  </ul>
</body>
</html>

List Style 簡寫屬性

list-style 屬性允許您在一個宣告中指定所有三個列表屬性。

ul{
    list-style: url() | Marker Type |  Marker Position;
}

您可以按照任何順序為 list-style 屬性指定值。如果任何值缺失，則將使用該值的預設值填充。但是必須至少傳遞一個值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        ul{
           list-style: url('/css/images/smiley.png')  circle outside;
        }
    </style>
</head>

<body>
   <h2>List style shorthand</h2>
      <ul>
          <li> Item 1</li>
          <li> Item 2</li>
          <li> Item 3</li>
          <li> Item 4</li>
      </ul>
</body>
</html>

無序列表樣式

以下示例顯示如何透過新增背景顏色、懸停效果和其他 CSS 屬性來設定 CSS 中無序列表的樣式。

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .container {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            color: #333;
            margin: 20px;
            display: flex;
            justify-content: space-around;
        }

        h2 {
            color: #2c3e50;
        }

        .styled-list {
            list-style-type: none; 
            padding: 0;
            margin: 20px 0;
        }

        .styled-list li {
            background-color: #e3f2fd; 
            margin: 5px 0; 
            padding: 10px;
            border-radius: 5px;
            transition: background-color 0.3s ease;
            display: flex;
            align-items: center;
        }

        .styled-list li::before {
            content: "✔️"; 
            color: #3498db; 
            font-weight: bold;
            margin-right: 10px;
        }

        .styled-list ol li::before {
            content: counter(list-item) ". "; 
            font-weight: bold;
            color: #3498db;
        }

        .styled-list li:hover {
            background-color: #bbdefb; 
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="ul">
        <h2>Unordered List</h2>
            <ul class="styled-list">
                <li>First item</li>
                <li>Second item</li>
                <li>Third item</li>
                <li>Fourth item</li>
            </ul>
        </div>
    </div>
</body>

</html>

定義列表樣式

以下示例顯示如何透過新增背景顏色、懸停效果和其他 CSS 屬性來設定 CSS 中定義列表的樣式。

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .container {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            color: #333;
            margin: 20px;
            display: flex;
            justify-content: space-around;
        }

        h2 {
            color: #2c3e50;
        }

        .styled-dl {
            margin: 20px 0;
            padding: 0;
        }

        .styled-dl dt {
            background-color: #e3f2fd;
            margin: 5px 0;
            padding: 10px;
            border-radius: 5px;
            font-weight: bold;
            transition: background-color 0.3s ease;
        }

        .styled-dl dd {
            margin-left: 20px;
            margin-bottom: 10px;
            padding-left: 10px;
            border-left: 3px solid #3498db;
            color: #555;
            background-color: #f1f8e9;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .styled-dl dt:hover,
        .styled-dl dd:hover {
            background-color: #bbdefb;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="dl">
        <h2>Definition List</h2>
            <dl class="styled-dl">
                <dt>HTML</dt>
                <dd> 
                    A standard markup language for creating web 
                    pages.
                </dd>

                <dt>CSS</dt>
                <dd>
                    A style sheet language used for describing the 
                    presentation of a document.
                </dd>

                <dt>JavaScript</dt>
                <dd>
                    A programming language that enables interactive 
                    web pages.
                </dd>
            </dl>
        </div>
    </div>
</body>

</html>

List Style Type 參考

下表列出了可用於屬性list-style-type 的可能值

值 描述 示例
none 不顯示任何標記。 NA
disc (預設) 實心圓圈
circle 空心圓圈
square 實心方塊
decimal 數字 1, 2, 3, 4, 5, ...
decimal-leading-zero 數字前加 0 01, 02, 03, 04, 05, ...
lower-alpha 小寫字母數字字元 a, b, c, d, e, ...
upper-alpha 大寫字母數字字元 A, B, C, D, E, ...
lower-roman 小寫羅馬數字 i, ii, iii, iv, v, ...
upper-roman 大寫羅馬數字 I, II, III, IV, V, ...
lower-greek 標記為小寫希臘字母 alpha, beta, gamma, ...
lower-latin 標記為小寫拉丁字母 a, b, c, d, e, ...
upper-latin 標記為大寫拉丁字母 A, B, C, D, E, ...
hebrew 標記為傳統希伯來數字  
armenian 標記為傳統亞美尼亞數字  
georgian 標記為傳統喬治亞數字  
cjk-ideographic 標記為普通表意數字  
hiragana 標記為日語數字 - 平假名 a, i, u, e, o, ka, ki
katakana 標記為日語數字 - 片假名 A, I, U, E, O, KA, KI
hiragana-iroha 標記為日語數字（平假名-いろは） i, ro, ha, ni, ho, he, to
katakana-iroha 標記為日語數字（片假名-いろは） I, RO, HA, NI, HO, HE, TO
列印頁面
上一頁
下一頁
廣告
© . All rights reserved.