售前咨询 售后咨询
当前位置: 上海网站设计 > 建站知识 > 行业新闻

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

网站编辑:小润 | 发表时间:2019-01-18 15:50:55

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

关键字:
官方微信
上海市长宁区宣化路300号华宁国际广场中区7层
+021-8031 0607
+135 8590 1130