list列表样式缩写与css覆盖样式

2021-06-19    分类: 网站建设

list列表样式缩写与css覆盖样式

list缩写是针对list-style-type, list-style-position等用于ul的list属性,其缩写格式如下:

list一style: list一style-type(类型)list一style-position(位置)list-style-image(项目符号图像) 例如设置li对象,类型为圆点、出现在对象外、项目符号图像为无,CSS样式表如下:

li{
list一style-position: outside;
list一style-image: none;
list一style-type:disc;
)

其样式表可以缩写为:

li{list-style:disc outside none}

在CSS代码中对某一元素如果应用多个样式表代码,在基本情况下,往往是后一段代码中的属性会替换前一段代码中相同的属性设置,应用CSS样式表的这个特点,可以采用覆盖的方式,使代码得到重用.以下是CSS样式表代码:

fontOl,.font02,#font03{
font一size: 12px;
list一style: none;
width: 200px;
padding: l0px;
background-color: #CCCCCC;
}
.fontOl{border:lpx solid #AC4BD5;}
.font02(border:lpx solid #4B4ED5;)
.font03(border: ipx solid #82D54B;)

在3个样式表的代码中,边框样式只有边框的颜色不同,其他属性都是一样的,就可以将该样式表进行优化,优化后的CSS样式表如下:

fontOl。font02。#font03
font一size:12px;
list一style: none;
width: 200px;
padding: 10px;
background-color: #CCCCCC;
border: lpx solid #AC4BD5;
.font02{border-color: #4B4ED5;
.font03{border-color: #82D54B;

优化后的代码,使3个样式都具有了一种颜色的边框设置,再根据每个样式的边框颜色有所不同,只需要用border-color属性设置新的颜色就可以了,新的边框颜色属性设置会覆盖之前的样式设置,从而实现了覆盖进行优化。

名称栏目:list列表样式缩写与css覆盖样式
网站地址:https://www.cdcxhl.com/news35/117985.html

成都网站建设公司_创新互联,为您提供网站设计公司营销型网站建设微信小程序标签优化App开发网站策划

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

商城网站建设