CSS 清單



CSS 教學  >  清單

在 CSS 中常見的清單 (list) 屬性有以下幾種:

  • list-style-type
  • list-style-position
  • list-style-image
  • list-style

    每一個屬性在以下會有詳細地介紹:

    list-style-type

    list-style-type 屬性是用來設定在清單中,每一條之前的記號要用什麼。最常見的 list-style-type 設定值為:

  • none (沒有)
  • disc (全黑圓圈)
  • circle (空心圓圈)
  • square (正方形)

    One may also wish to use ordered character sets. Common ones are:

  • upper-latin (大寫拉丁文)
  • lower-latin (小寫拉丁文)
  • upper-roman (大寫羅馬文)
  • lower-roman (小寫羅馬文)
  • upper-alpha (大寫希臘文 )
  • lower-alpha (小寫希臘文 )

    以下列舉幾個例子:

    例 1:
    <ul style='list-style-type:upper-roman;'>
      <li>項目 1</li>
      <li>項目 2</li>
    </ul>

    結果:

    • 項目 1
    • 項目 2

    例 2:
    <ul style='list-style-type:square;'>
      <li>正方形項目 1</li>
      <li>正方形項目 2</li>
    </ul>

    結果:

    • 正方形項目 1
    • 正方形項目 2

    list-style-position

    list-style-position 屬性讓我們可以決定記號是否應該被視為是文字的一部份,並且由此而決定記號的位置。這個屬性可能的設定值為 "inside" 及 "outside"。預定值為 "outside"。

    以下是兩個例子,由其中我們可以看出來 inside 及 outside 的不同:

    例 3:

    <ul style='list-style-position:inside;'>
      <li>第一個項目<br>第一項目的第二行
      <li>第二個項目
    </ul>

    結果:

    • 第一個項目
      第一項目的第二行
    • 第二個項目

    例 4:

    <ul style='list-style-position:outside;'>
      <li>第一個項目<br>第一項目的第二行
      <li>第二個項目
    </ul>

    結果:

    • 第一個項目
      第一項目的第二行
    • 第二個項目

    list-style-image

    list-style-image 屬性是用來將某個圖案設定為記號。這個屬性的用法為,

    list-style-image:url([image_url]);

    舉例來說,若 CSS 樣式為:

    ul {
      list-style-image:url("circle.gif");
    }

    那以下的 HTML 碼,

    <ul>
      <li>第一項利用自我設定的記號。
      <li>第二項利用自我設定的記號。
    </ul>

    就會顯現為,

    • 第一項利用自我設定的記號。
    • 第二項利用自我設定的記號。

    list-style

    以上提到的這三個 (list-style-stylelist-style-position、及 list-style-image) 屬性可以被簡化為一個 list-style 屬性。這種做法稱為捷徑 (shortcut)。在這裡,屬性的順序並不重要。

    舉例來說,以下的 CSS 樣式,

    ul {
      list-style: url("circle.gif") none inside;
    }

    套用在以下的 HTML 碼中,

    <ul>
      <li>第一項以捷徑方式列出的清單。
      <li>第二項以捷徑方式列出的清單。
    </ul>

    就會顯現出,

    • 第一項以捷徑方式列出的清單。
    • 第二項以捷徑方式列出的清單。

    下一頁: CSS 表格




    Copyright © 2017   1keydata.com   版權所有