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属性设置新的颜色就可以了，新的边框颜色属性设置会覆盖之前的样式设置，从而实现了覆盖进行优化。

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

猜你还喜欢下面的内容