码迷,mamicode.com
首页 > Web开发 > 详细

CSS代码优化

时间:2018-02-08 15:30:23      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:自动   文件   ted   ati   文件的   盒模型   编写   公共类   作用   

代码优化的作用:

  1. 压缩代码量,提高编写效率
  2. 提高了文件的访问速度,利于快速编译
  3. 简化代码,便于复用,利于后期维护和扩展。

技术分享图片

  • 利用继承性优化代码

在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; }

代码优化的注意事项:在优化时,要适当采用就近原则,在同一模块内进行优化,不过有些具有全局属性的内容可以统一定义,如网页字体、大小、行距等。

CSS代码优化

标签:自动   文件   ted   ati   文件的   盒模型   编写   公共类   作用   

原文地址:https://www.cnblogs.com/john-jxsr/p/8430665.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!