代码优化的作用:
- 压缩代码量,提高编写效率
- 提高了文件的访问速度,利于快速编译
- 简化代码,便于复用,利于后期维护和扩展。
- 利用继承性优化代码
在CSS中,子元素会自动继承父元素的属性值,如颜色、字体、大小、行距等排版格式。
如:
a:link {
color:#000000;
text-decoration:none;
}
a:visited {
text-decoration:none;
color:#0000FF;
}
a:hover {
text-decoration:none;
color:#FF0000;
}
a:active {
text-decoration:none;
color:#00FF00;
}
可优化为:
a {
text-decoration:none;
}
a:link {
color:#000000;
}
a:visited {
color:#0000FF;
}
a:hover {
color:#FF0000;
}
a:active {
color:#00FF00;
}
注意:一般来说如布局、盒模型属性的display、width、height等只使用自己的属性值,不会继承上级元素。
利用默认值优化代码:
CSS的属性一般都预定义默认值,如果定义的属性值与默认值相同,就没必要再重复定义了。
使用*号来定义默认值。
利用公共类优化代码:
如:
span {
color:red;
font-size:14px;
}
#tips {
color:red;
width:100%;
}
.msg {
color:red;
font-size:12px;
line-height:1.6em;
}
可简化为:
span {
font-size:14px;
}
#tips { width:100%; }
.msg {
font-size:12px;
line-height:1.6em;
}
.red {
/*<定义红色公共类>*/
color:Red;
}
html标签中进行调用 :<div class="msg red" ></div>
利用选择符分组优化代码:
如:
h1 { font-family:"黑体"; }
h2 { font-family:"黑体"; }
h3 { font-family:"黑体"; }
h4 { font-family:"黑体"; }
h5 { font-family:"黑体"; }
h6 { font-family:"黑体"; }
可以优化为:
h1,h2,h3,h4,h5,h6 { font-family:"黑体"; }
定义单独的样式:
h1,h2,h3,h4,h5,h6 { font-family:"黑体"; }
h1 { font-size:20px; }
h2 { font-size:18px; }
h4 { font-size:12px; }
利用层叠覆盖优化代码:
如果对同一个元素定义了多个样式,在相同特殊性的情况下,CSS会遵循最近原则应用样式,也就是说相同属性声明,后面的值会覆盖前面的值。
如:
#title1,#title2,#title3 {
font-size:14px;
font-weight:bold;
text-align:center;
}
#title1 { color:Blue; }
#title1 { color:Red; }
#title1 { color:Green; }
可优化为:
#title1,#title2,#title3 {
font-size:14px;
font-weight:bold;
text-align:center;
color:Blue;
}
#title2 { color:Red; }
#title3 { color:Green; }
代码优化的注意事项:在优化时,要适当采用就近原则,在同一模块内进行优化,不过有些具有全局属性的内容可以统一定义,如网页字体、大小、行距等。