CSS list-style-type 属性值说明
| 值 | 描述 |
|---|---|
| disc | 创建标记为填充圆圈。这是此属性的默认值。 |
| armenian | 创建标记作为传统的亚美尼亚人编号。 |
| circle | 创建标记为圆圈。 |
| cjk-ideographic | 创建标记，这是普通表现号码。 |
| decimal | 创建标记为数字。 |
| decimal-leading-zero | 创建标记为具有前导零的数字，如01,02,05 ... |
| georgian | 创建标记作为传统的格鲁吉亚编号。 |
| hebrew | 创建标记作为传统希伯来语编号。 |
| hiragana | 创建标记作为传统的平假名编号。 |
| hiragana-iroha | 创建标记作为传统的平假名Iroha编号。 |
| katakana | 创建标记作为传统的卡其卡纳编号。 |
| katakana-iroha | 创建标记作为传统的卡其卡伊罗哈编号。 |
| lower-alpha | 创建标记为下α，如a，b，c，d ... |
| lower-greek | 创建标记为较低希腊语。 |
| lower-latin | 创建标记为下拉丁语，如A，B，C，D ... |
| lower-roman | 创建标记为下罗马，如I，II，III，IV ...... |
| none | 意味着不会显示标记。 |
| square | 创建标记为广场。 |
| upper-alpha | 创建标记为上α，如A，B，C，D ... |
| upper-latin | 创建标记为上拉丁语，如A，B，C，D ... |
| upper-roman | 创建标记为上罗马，如I，II，III，IV，V ... |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
语法
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-latin | upper-roman | initial | inherit;
list-style-type 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
ul.list-styles {
list-style-type: square;
}
ul.list-styles2 {
list-style-type: hebrew;
}
</style>
</head>
<body>
<h2>List-style-type 属性示例</h2>
<ul class="list-styles">
<li>Appetizers</li>
<li>Main Course</li>
<li>Salads</li>
</ul>
<ul class="list-styles2">
<li>Cold Drinks</li>
<li>Hot Drinks</li>
<li>Ice-Creams</li>
</ul>
</body>
</html>
具有“disc”值的 list-style-type 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.text {
list-style-type: disc;
}
</style>
</head>
<body>
<h1>
Example of the list-style-type property with "disc" value.
</h1>
<ul class="text">
<li>Barcelona</li>
<li>Madrid</li>
<li>London</li>
</ul>
</body>
</html>
具有“十进制”值的列表样式类型属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.text {
list-style-type: decimal;
}
</style>
</head>
<body>
<h1>
Example of the list-style-type property
</h1>
<ul class="text">
<li>Barcelona</li>
<li>Madrid</li>
<li>London</li>
</ul>
</body>
</html>
带有有序列表的 list-style-type 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
ol.e {
list-style-type: armenian;
}
ol.f {
list-style-type: decimal;
}
ol.g {
list-style-type: cjk-ideographic;
}
ol.h {
list-style-type: decimal-leading-zero;
}
ol.i {
list-style-type: georgian;
}
ol.j {
list-style-type: hebrew;
}
ol.k {
list-style-type: hiragana;
}
ol.l {
list-style-type: hiragana-iroha;
}
ol.m {
list-style-type: katakana;
}
ol.n {
list-style-type: katakana-iroha;
}
ol.o {
list-style-type: lower-greek;
}
ol.p {
list-style-type: lower-latin;
}
ol.q {
list-style-type: lower-roman;
}
ol.r {
list-style-type: none;
}
ol.s {
list-style-type: upper-alpha;
}
ol.t {
list-style-type: upper-latin;
}
</style>
</head>
<body>
<h2>List-style-type 属性示例</h2>
<p>Examples of unordered lists:</p>
<h3>Circle</h3>
<ul class="a">
<li>New York</li>
<li>Las Vegas</li>
<li>Washington</li>
</ul>
<h3>Square</h3>
<ul class="b">
<li>San Francisco</li>
<li>Los Angeles</li>
<li>Miami</li>
</ul>
<p>Examples of ordered lists:</p>
<h3>Upper-roman</h3>
<ol class="c">
<li>Barcelona</li>
<li>Madrid</li>
<li>London</li>
</ol>
<h3>Lower-alpha</h3>
<ol class="d">
<li>Dubai</li>
<li>Anu Dhabi</li>
<li>Qatar</li>
</ol>
<h3>Armenian</h3>
<ol class="e">
<li>Yerevan</li>
<li>Paris</li>
<li>Rome</li>
</ol>
<h3>Decimal</h3>
<ol class="f">
<li>Sydney</li>
<li>Honk Kong</li>
<li>Moscow</li>
</ol>
<h3>Cjk-ideographic</h3>
<ol class="g">
<li>Kiev</li>
<li>Saint-Petersburg</li>
<li>Tula</li>
</ol>
<h3>Decimal-leading-zero</h3>
<ol class="h">
<li>Bangkok</li>
<li>Gyumri</li>
<li>Valencia</li>
</ol>
<h3>Georgian</h3>
<ol class="i">
<li>Madrid</li>
<li>Barcelona</li>
<li>Prague</li>
</ol>
<h3>Hebrew</h3>
<ol class="j">
<li>Jerusalem</li>
<li>Toronto</li>
<li>Prague</li>
</ol>
<h3>Hiragana</h3>
<ol class="k">
<li>Cairo</li>
<li>Tokyo</li>
<li>Athens</li>
</ol>
<h3>Hiragana-iroha</h3>
<ol class="l">
<li>Tehran</li>
<li>Tavriz</li>
<li>Tel Aviv</li>
</ol>
<h3>Katakana</h3>
<ol class="m">
<li>Munich</li>
<li>Berlin</li>
<li>Bavaria</li>
</ol>
<h3>Katakana-iroha</h3>
<ol class="n">
<li>Brussels</li>
<li>Istanbul</li>
<li>Sydney</li>
</ol>
<h3>Lower-greek</h3>
<ol class="o">
<li>Seville</li>
<li>Granada</li>
<li>Venice</li>
</ol>
<h3>Lower-latin</h3>
<ol class="p">
<li>Budapest</li>
<li>Vienna</li>
<li>Amsterdam</li>
</ol>
<h3>Lower-roman</h3>
<ol class="q">
<li>Buenos Aires</li>
<li>Rio de Janeiro</li>
<li>San Paolo</li>
</ol>
<h3>None</h3>
<ol class="r">
<li>Vilnius</li>
<li>Tallin</li>
<li>Riga</li>
</ol>
<h3>Upper-alpha</h3>
<ol class="s">
<li>Montreal</li>
<li>Melbourne</li>
<li>Edinburgh</li>
</ol>
<h3>Upper-latin</h3>
<ol class="t">
<li>Dublin</li>
<li>Mexico</li>
<li>Florence</li>
</ol>
</body>
</html>
CSS list-style-type 属性用于指定列表项元素的类型。
列表标记可以具有三种类型：字形（圆形、圆盘、方形）、编号系统和字母系统。
标记的颜色将与其应用的元素的计算颜色相同。
我们可以从这里选择颜色。
只有 <li> 和 <summary> 元素具有 display 属性的“list-item”值。
我们可以将 list-style-type 属性应用于 display 设置为 list-item 的任何元素。
可以在父元素（通常是 <ol> 或者 <ul>）上设置此属性。
| 初始值 | disc |
|---|---|
| 应用于 | 列出项目（item）（item）。 |
| 继承 | 可继承 |
| 可动画的 | 无效 |
| 版本 | CSS1. |
| DOM 语法 | object.style.liststyletype =“armenian”; |
日期：2020-06-02 22:14:38 来源：oir作者：oir