好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

list-style-type

CSS list-style-type 属性用于指定列表项标记符号的外观样式。

也可以通过 list-style-type 属性来指定通过: list-item指定的列表元素的列表项标记的外观样式。

只有在属性设置为 none 时, list-style-type 属性设置的列表项外观才会被呈现出来。否则列表项标记使用指定的图像作为标记图像。

可以使用的列表项标记有三种类型:

图形类型:实心圆点,空心圆点和实心方块。 数字类型。 字母类型。

列表项标记的颜色和列表项的颜色相同。列表项标记的值可以是预定义的关键字,或CSS3中才能使用的自定义字符串。自定义字符串在CSS3中使用 ::marker 伪元素来设置。目前还没有浏览器支持自定义字符串。

官方语法
list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit 
                            

CSS3新的语法格式为:

list-style-type: <string> | <counter-style> | none                              
                            

参数:

disc :使用实心圆点作为列表标记。 circle :使用空心圆点作为列表标记。 square :使用实心方块作为列表标记。 decimal :使用十进制阿拉伯数字作为列表标记,数字从1开始。 decimal-leading-zero :前导0的十进制数,如01, 02, 03, …, 98, 99。 lower-roman :小写的罗马数字,如:i, ii, iii, iv, v。 upper-roman :大写的罗马数字,如:I, II, III, IV, V。 georgian :传统的格鲁吉亚编号,如:an, ban, gan, …, he, tan, in, in-an, …。 armenian :传统的大写亚美尼亚编号。 lower-greek :小写希腊字母,如:α,β,γ。 lower-latin :小写的ASCII字符。如:a, b, c, … z。IE7及之前的IE浏览器不支持该取值。 upper-latin ::大写的ASCII字符。如:A, B, C, … Z。IE7及之前的IE浏览器不支持该取值。 lower-alpha :小写的ASCII字符。如:a, b, c, … z。 upper-alpha ::大写的ASCII字符。如:A, B, C, … Z。 none :列表标记为空。 inherit :继承父元素的列表标记。

list-style-type 属性的默认值为 disc 。

应用范围

list-style-position 属性可以应用在列表元素或 display: list-item 的元素上。

示例代码
<ol class="upper-alpha">
  <li>列表项-1</li>
  <li>列表项-2</li>
  <li>列表项-3</li>
</ol>                              
                            

对上面的列表使用下面的CSS代码:

ol.upper-alpha {
    list-style-type: upper-alpha;
}                              
                            

得到的结果为:

列表项-1 列表项-2 列表项-3

在线演示

下面的例子演示了 list-style-type 属性的各种取值的效果:

Disc:

列表项-1 列表项-2 列表项-3

Circle:

列表项-1 列表项-2 列表项-3

Square:

列表项-1 列表项-2 列表项-3

decimal:

列表项-1 列表项-2 列表项-3

decimal-leading-zero:

列表项-1 列表项-2 列表项-3

lower-roman:

列表项-1 列表项-2 列表项-3

upper-roman:

列表项-1 列表项-2 列表项-3

georgian:

列表项-1 列表项-2 列表项-3

armenian:

列表项-1 列表项-2 列表项-3

lower-latin (lower-alpha):

列表项-1 列表项-2 列表项-3

upper-latin (upper-alpha):

列表项-1 列表项-2 列表项-3

lower-greek:

列表项-1 列表项-2 列表项-3

none:

列表项-1 列表项-2 列表项-3

浏览器支持

所有的现代浏览器都支持 list-style-type 属性的 inherit, none, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman 值,包括Chrome, Firefox, Safari, Opera, Internet Explorer4+ 以及 Android 和 iOS。

lower-latin, upper-latin, lower-greek, armenian, georgian, decimal-leading-zero值在IE中需要IE8+才支持。

查看更多关于list-style-type的详细内容...

  阅读:62次

上一篇: margin-bottom

下一篇:margin-left

CopyRight:2016-2025好得很程序员自学网 备案ICP:湘ICP备09009000号-16 http://www.haodehen.cn
本站资讯不构成任何建议,仅限于个人分享,参考须谨慎!
本网站对有关资料所引致的错误、不确或遗漏,概不负任何法律责任。
本网站刊载的所有内容(包括但不仅限文字、图片、LOGO、音频、视频、软件、程序等)版权归原作者所有。任何单位或个人认为本网站中的内容可能涉嫌侵犯其知识产权或存在不实内容时,请及时通知本站,予以删除。

网站内容来源于网络分享,如有侵权发邮箱到:kenbest@126.com,收到邮件我们会即时下线处理。
网站框架支持:HDHCMS   51LA统计 百度统计
Copyright © 2018-2025 「好得很程序员自学网
[ SiteMap ]