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
打印页面
上一页
下一页
广告