当前位置: 网站建设 > 网页设计 > 建站经验 >

9个精简优化CSS文件的技巧

时间:2013-03-02 03:41来源:未知 作者:admin 点击:

标签:9个精简优化CSS文件的技巧 #(1)精简(5)优化(50)CSS(655)9个(7)文件(18)div(47)技巧(106)color(11)
div{ color: #ffffff; } /* Shortcode: color:#fff; */ div{ color: #ff88ff; } /* Shortcode: color:#f8f; */ div{ color: #f8f7f2; } /* No shortcode possible */ /*-----Comment-------*/ 编写CSS时注解显得分外有用,这样协同工作的共事就会懂得代码的
9个精简优化CSS文件的技巧》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302331532013.htm

div{ color: #ffffff; } /* Shortcode: color:#fff; */
div{ color: #ff88ff; } /* Shortcode: color:#f8f; */
div{ color: #f8f7f2; } /* No shortcode possible */

/*-----Comment-------*/

编写CSS时注解显得分外有用,这样协同工作的共事就会懂得代码的含意。注释方法有多种,你可以使用如下办法:

/*-------------------*/

这样能节省20个字符,假设有15个解释,那么就能节省300个字符。

1. 正文

--> [网站建设之]9个精简优化CSS文件的技巧

/*Comment*/

/* 简写: padding: 0 5px 5px 10px; */

同样也能够应用下面的方式:

4. 值为0时省略Out Px/Em/%

可以使用 CSS optimizers 来优化CSS, 但是我以为如果你使用下面提到的技巧编写代码时,效力和才能都会得到进步。

0并不须要Px,Em和百分号。当你的值为0时(我想你会用到),省略单位能节省一倍的字符。

Tag:技能   文件   优化   精简    

例如,假如有一堆h2 h3 跟 h4这样的元素,而他们都有相同的属性,只有个别属性不同,那么就可以按如下方法书写:

颜色代码用HEX codes定义,它包括6个字符,然而一些情形下可以使用3个字符取代。看下面的例子:

优化CSS文件还能节省流量同时提高页面加载速度。

/*-------------------*/

div{ padding: 0px 5px 5px 10px; }

2. 缩写色彩代码

这样就合并了雷同属性的元素,同时申明了不同的字体大小属性。能节俭大批的空间。

因为CSS文件加载于网页的头部,所以每位拜访者都会下载这些文件。我们会对PHP文件、图片进行优化,而往往疏忽了CSS文件。今天咱们应当思考这个问题并做点什么。

 

h2, h3, h4{
padding:0 ;
margin:0 ;
color:#333;
letter-spacing:.05em;
word-spacing:0.1em;
}
h2{  font-size:1.2em; }
h3{  font-size:1.1em; }
h4{  font-size:1em; }

3. 合并元素

相关的主题文章:
(责任编辑:网站建设)
9个精简优化CSS文件的技巧相关文章
上一篇:9.复习CSS 下一篇:absolute与relative如何区分怎么用?
回到顶部