list-style-type
是 CSS 中的一个属性,它用于指定 HTML 列表项(<li>
元素)前面的标记(bullet point)的样式。这个属性主要应用于有序列表(<ol>
)和无序列表(<ul>
),以改变它们默认的列表项标记样式。
值
list-style-type
属性可以接受多个不同的值,每个值都会改变列表项的显示方式。以下是一些常用的值:
-
无序列表(
<ul>
)的常用值:none
:无标记。disc
:默认。实心圆点。circle
:空心圆点。square
:实心方块。
-
有序列表(
<ol>
)的常用值:none
:无标记。decimal
:默认。阿拉伯数字。lower-roman
:小写罗马数字。upper-roman
:大写罗马数字。lower-alpha
:小写英文字母。upper-alpha
:大写英文字母。
此外,还有一些其他不太常用的值,如 armenian
、cjk-ideographic
、georgian
、hebrew
、hiragana
、katakana
、hiragana-iroha
、katakana-iroha
等,它们提供了更多样化的列表项标记样式。
示例
以下是一个简单的示例,展示了如何使用 list-style-type
属性来改变列表项的标记样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Style Type Example</title>
<style>ul.circle {list-style-type: circle;}ol.upper-alpha {list-style-type: upper-alpha;}
</style>
</head>
<body><h2>Unordered List with Circle Bullets</h2><ul class="circle"><li>Apple</li><li>Banana</li><li>Cherry</li></ul><h2>Ordered List with Uppercase Alphabetical Bullets</h2><ol class="upper-alpha"><li>Apple</li><li>Banana</li><li>Cherry</li></ol>
</body>
</html>
在这个示例中,我们为无序列表 <ul>
指定了 circle
样式,使其使用空心圆点作为列表项标记;为有序列表 <ol>
指定了 upper-alpha
样式,使其使用大写英文字母作为列表项标记。