CSS - list-style-type 屬性

上一頁
下一頁

CSS list-style-type 屬性用於設定列表專案元素的標記。標記的顏色將與其應用到的元素的顏色相同。

語法

list-style-type: disc | armenian | circle | cjk-ideographic | decimal | decimal-leading-zero | georgian| hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-alpha | lower-greek | lower-latin | lower-roman | none | square | upper-alpha | upper-greek | upper-latin | upper-roman | initial | inherit;

屬性值

值 描述
disc 標記為實心圓。預設值。
armenian 標記為傳統的亞美尼亞數字。
circle 標記為圓形。
cjk-ideographic 標記為普通表意數字。
decimal 標記為數字。
decimal-leading-zero 標記為帶有前導零的數字（01、02、03 等）。
georgian 標記為傳統的喬治亞數字。
hebrew 標記為傳統的希伯來數字。
hiragana 標記為傳統的平假名數字。
hiragana-iroha 標記為傳統的平假名いろは數字。
katakana 標記為傳統的片假名數字。
katakana-iroha 標記為傳統的片假名いろは數字。
lower-alpha 標記為小寫字母 (a, b, c 等)
lower-greek 標記為小寫希臘字母。
lower-latin 標記為小寫拉丁字母 (a, b, c 等)
lower-roman 標記為小寫羅馬數字 (i, ii, iii 等)
none 不顯示標記。
square 標記為正方形。
upper-alpha 標記為大寫字母 (A, B, C 等)
upper-greek 標記為大寫希臘字母。
upper-latin 標記為大寫拉丁字母 (A, B, C 等)
upper-roman 標記為大寫羅馬數字 (I, II, III 等)
initial 將其屬性設定為預設值。
inherit 它繼承自父元素的屬性。

CSS 列表樣式型別屬性示例

以下示例解釋了使用不同值的list-style-type 屬性。

使用 disc 值的列表樣式型別屬性

以下示例顯示了使用list-style-type: disc 的列表項標記。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: disc;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: disc
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

使用 Armenian 值的列表樣式型別屬性

以下示例顯示了使用list-style-type: armenian 的列表項標記。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: armenian;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: armenian
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

使用 Circle 值的列表樣式型別屬性

以下示例顯示了使用list-style-type: circle 的列表項標記。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: circle;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: circle
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

使用 Cjk Ideographic 值的列表樣式型別屬性

以下示例顯示了使用list-style-type: cjk-ideographic 的列表項標記。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: cjk-ideographic;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: cjk-ideographic
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

使用 Decimal 值的列表樣式型別屬性

以下示例顯示了使用list-style-type: decimal 的列表項標記。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: decimal;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: decimal
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

使用 Decimal Leading Zero 值的列表樣式型別屬性

以下示例顯示了使用list-style-type: decimal-leading-zero 的列表項標記。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: decimal-leading-zero;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: decimal-leading-zero
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

使用 Georgian 值的列表樣式型別屬性

以下示例顯示了使用list-style-type: georgian 的列表項標記。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: georgian;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: georgian
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

使用 Hebrew 值的列表樣式型別屬性

以下示例顯示了使用list-style-type: hebrew 的列表項標記。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: hebrew;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: hebrew
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

使用 Hiragana 值的列表樣式型別屬性

以下示例顯示了使用list-style-type: hiragana 的列表項標記。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: hiragana;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: hiragana
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

使用 Hiragana Iroha 值的列表樣式型別屬性

以下示例顯示了使用list-style-type: hiragana-iroha 的列表項標記。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: hiragana-iroha;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: hiragana-iroha
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

使用 Katakana 值的列表樣式型別屬性

以下示例顯示了使用list-style-type: katakana 的列表項標記。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: katakana;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: katakana
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

使用 Katakana Iroha 值的列表樣式型別屬性

以下示例顯示了使用list-style-type: katakana-iroha 的列表項標記。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: katakana-iroha;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: katakana-iroha
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

使用 Lower Alpha 值的列表樣式型別屬性

以下示例顯示了使用list-style-type: lower-alpha 的列表項標記。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: lower-alpha;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: lower-alpha
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

使用 Lower Greek 值的列表樣式型別屬性

以下示例顯示了使用list-style-type: lower-greek 的列表項標記。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: lower-greek;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: lower-greek
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

使用 Lower Latin 值的列表樣式型別屬性

以下示例顯示了使用list-style-type: lower-latin 的列表項標記。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: lower-latin;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: lower-latin
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

使用 Lower Roman 值的列表樣式型別屬性

以下示例顯示了使用list-style-type: lower-roman 的列表項標記。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: lower-roman;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: lower-roman
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

使用 None 值的列表樣式型別屬性

以下示例顯示了使用list-style-type: none 的列表項標記。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: none;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: none
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

使用 Square 值的列表樣式型別屬性

以下示例顯示了使用list-style-type: square 的列表項標記。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: square;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: square
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

使用 Upper Alpha 值的列表樣式型別屬性

以下示例顯示了使用list-style-type: upper-alpha 的列表項標記。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: upper-alpha;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: upper-alpha
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

使用 Upper Greek 值的列表樣式型別屬性

以下示例顯示了使用list-style-type: upper-greek 的列表項標記。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: upper-greek;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: upper-greek
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

使用 Upper Latin 值的列表樣式型別屬性

以下示例顯示了使用list-style-type: upper-latin 的列表項標記。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: upper-latin;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: upper-latin
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

使用 Upper Roman 值的列表樣式型別屬性

以下示例顯示了使用list-style-type: upper-roman 的列表項標記。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 25px;
         font-weight: bold;
      }

      .unordered {
         color: blue;
         width: 50%;
         list-style-type: upper-roman;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-type property
   </h2>
   <h4>
      list-style-type: upper-roman
   </h4>
   <ul class="unordered">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
list-style-type 1.0 4.0 1.0 1.0 3.5
css_properties_reference.htm
列印頁面
上一頁
下一頁
廣告