网站地图    收藏   

主页 > 专题教程 > css >

list-style

来源:自学PHP网    时间:2018-02-08 10:48 作者: 阅读:

[导读] CSS list-style 属性用于设置列表标记的样式。它是同时设置list-style-type, list-style-image 和 list-style-position 的简写属性。...

CSS list-style 属性用于设置列表标记的样式。它是同时设置, 和 的简写属性。

list-style属性是设置列表项标记样式或通过display: list-item设置的列表元素的列表项样式的常用方式。

如果你指定了属性,那么使用指定的标记类型会被替换为指定的图像。

如果list-style的三个属性值都没有设置,浏览器会使用它们默认的值作为列表项标记的样式。

注意,如果你只为list-style属性设置了一个none值,那么该元素的列表标记将不会被显示。例如下面的代码:

ul { 
    list-style: none; 
}                              
                            

那么ul元素中的列表标记将不会显示。

官方语法
list-style: [ <'list-style-type'> || <'list-style-position'> || <'list-style-image'> ] | inherit
                            

参数:

  • <'list-style-type'>:设置列表项标记的类型,具体可以参考属性。
  • <'list-style-position'>:设置列表项标记的位置,具体可以参考属性。
  • <'list-style-image'>:使用图像作为列表项标记,具体可以参考属性。
  • inherit:继承父元素的list-style值。

list-style属性的初始值为disc outside none

示例代码
ol {
    /* 同时指定图像和标记类型,使用的是图像作为标记 */
    list-style: url(images/arrow.png) disc;
}

ul li {
    list-style: upper-roman inside;
}

ol li > li {
    list-style: circle;
}

ul {
    list-style: square url('images/fancy-square.png') inside;
}                              
                            
浏览器支持

所有的现代浏览器都支持list-style属性,包括Chrome, Firefox, Safari, Opera, Internet Explorer 以及 Android 和 iOS。

最新评论

添加评论

更多文章推荐

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论