層疊樣式表/列表

`list-style-type`

list-style-type 屬性設定列表專案開頭使用的標記。標記可以是計數器或專案符號。有幾種不同的專案符號可用。在 CSS1 或 CSS2.1 中定義的值在下面的列表中顯示。列表中每個值的標記應以該樣式呈現。您的瀏覽器可能不支援所有專案符號型別，在這種情況下，您可能會看到一個圓盤代替任何不支援的值。

disc

circle

square

decimal

lower-roman

upper-roman

lower-alpha

upper-alpha

decimal-leading-zero，在 CSS2.1 中定義。

lower-latin，在 CSS2.1 中定義。

upper-latin，在 CSS2.1 中定義。

armenian，在 CSS2.1 中定義，但有可能被刪除

georgian，在 CSS2.1 中定義，但有可能被刪除.

lower-greek，在 CSS2.1 中定義，但有可能被刪除.

none

list-style-type 可以應用於列表容器元素（在 HTML 中為 ul 或 ol）以及列表專案元素（在 HTML 中為 li）。CSS 規則

ul {
  list-style-type:disc
}

示例 HTML

    <ul>
      <li>Item A</li>
      <li>Item B
        <ul>
          <li>Item B1</li>
          <li>Item B2
            <ul>
              <li>Item B2a</li>
              <li>Item B2b</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>

示例渲染

專案 A
專案 B
- 專案 B1
- 專案 B2
  - 專案 B2a
  - 專案 B2b

請注意，子列表中的所有專案符號都是圓盤。如果您希望子列表具有不同的型別，則需要額外的規則，例如

ul {
  list-style-type:disc
}

ul ul {
  list-style-type:circle
}

ul ul ul {
  list-style-type:square
}

示例渲染

專案 A
專案 B
- 專案 B1
- 專案 B2
  - 專案 B2a
  - 專案 B2b

`list-style-image`

W3C 規範 CSS1 CSS2.1

list-style-image 屬性允許您指定要作為列表專案專案符號使用的影像。該值是 URI 或 none。當該值為 none 時，專案符號將由 list-style-type 屬性設定。當它是一個 URI 時，Web 瀏覽器將嘗試從給定的 URI 載入影像。如果成功，它將使用該影像作為專案符號。如果失敗，它將使用 list-style-type 屬性指定的專案符號。

下面的示例顯示了一個列表，其中紅色和綠色專案符號交替出現。

CSS 規則

li.odd{
  list-style-image: url(green_bullet.gif)
}

li.even {
  list-style-image: url(red_bullet.gif)
}

示例 HTML

    <ul>
      <li class="odd">Item 1</li>
      <li class="even">Item 2</li>
      <li class="odd">Item 3</li>
      <li class="even">Item 4</li>
    </ul>

示例渲染

• 專案 1

• 專案 2

• 專案 3

• 專案 4

`list-style-position`

W3C 規範 CSS1 CSS2.1

list-style-position 屬性確定列表專案的專案符號是否被視為列表專案內容的一部分（inside）還是放置在塊之外（outside）。大多數 Web 瀏覽器將專案符號放置在 (X)HTML 列表的外部。

CSS 規則

li {
  border: 1px solid red
}

ul#inner {
  list-style-position: inside
}

ul#outer {
  list-style-position: outside
}

示例 HTML

    <p>The first list has the bullets on the inside.&lt;/p>
    <ul id="inner">
      <li>This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
      </li>
      <li>This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
      </li>
      <li>This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
      </li>
    </ul>
    <p>The second list has the bullets on the outside. This is the default.&lt;/p>
    <ul id="outer">
      <li>This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
      </li>
      <li>This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
      </li>
      <li>This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
      </li>
    </ul>

示例渲染 - 注意文字相對於專案符號和邊框的換行位置。

第一個列表的專案符號在內部。

此文字需要足夠長才能換行到下一行。此文字需要足夠長才能換行到下一行。此文字需要足夠長才能換行到下一行。
此文字需要足夠長才能換行到下一行。此文字需要足夠長才能換行到下一行。此文字需要足夠長才能換行到下一行。
此文字需要足夠長才能換行到下一行。此文字需要足夠長才能換行到下一行。此文字需要足夠長才能換行到下一行。

第二個列表的專案符號在外部。這是預設設定。

此文字需要足夠長才能換行到下一行。此文字需要足夠長才能換行到下一行。此文字需要足夠長才能換行到下一行。
此文字需要足夠長才能換行到下一行。此文字需要足夠長才能換行到下一行。此文字需要足夠長才能換行到下一行。
此文字需要足夠長才能換行到下一行。此文字需要足夠長才能換行到下一行。此文字需要足夠長才能換行到下一行。

下一個示例顯示了當專案符號在內部時，更改邊距或填充如何影響專案符號的位置。由於專案符號在內容內部，因此填充出現在邊框和專案符號之間。

邊距 0
邊距 1em
邊距 2em
填充 0
填充 1em
填充 2em

下一個示例顯示了當專案符號在外部時，更改邊距或填充如何影響專案符號的位置。由於它在內容外部，因此它相對於邊框保持在相同的位置。

邊距 0
邊距 1em
邊距 2em
填充 0
填充 1em
填充 2em

簡寫屬性

W3C 規範 CSS1 CSS2.1

list-style 簡寫屬性可用於在一個宣告中設定所有三個單獨的列表樣式屬性。

規則

ul {
  list-style:circle url(wavy_circle.png) inside
}

等效於

ul {
  list-style-type:circle;
  list-style-image:url(wavy_circle.png);
  list-style-position:inside
}

各個屬性可以按任何順序給出，因此以下宣告都是等效的。

  list-style:circle url(wavy_circle.png) inside;
  list-style:url(wavy_circle.png) circle inside;
  list-style:inside circle url(wavy_circle.png);

如果省略了任何單個屬性，它們將設定為其初始值。例如

ul {
  list-style:url(wavy_circle.png)
}

等效於

ul {
  list-style-image:url(wavy_circle.png);
  list-style-type:disc; /* initial value */
  list-style-position:outside /* initial value */
}