css优化

涉及优化内容：

①CSS样式单词简写优化

②标点符号优化

③删除换行

④CSS重用优化

⑤CSS代码优化简写总结

 

一、CSS样式属性单词代码简写优化  

（1）border边框简写：4个边边框宽度为1px，颜色为#000

border-color:#000; 
border-style:solid; 
border-width:1px 

可以简写为：

border:1px solid #000; 

 

（2）单独上、下、左、右边框简写

有时只设置3边的边框时候，我们可以技巧性减少代码量。

假如我们不设置上边框，而其他3边为1px实现黑色边框。

传统代码：

Div{border-right:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000} 

 简写：

Div{border:1px solid #000;border-top:0} 

这样达到相同效果也大大地减少CSS代码量

【注意：】border:1px solid #000; 和border-top:none;前后顺序不能调换。

因为CSS读取有从上到下、从左到右读取原理，而先设置了整个边框样式，后再加上声明顶部上边边框为“none”没有意思，即实现该实例要的样式。从而无需分别设置下、左、右，从而节约一定代码。

 

拓展：

①border顺序：与margin和padding类似上右下左，举例：

margin: 10px 20px 30px 40px;/*顺时针顺序：上右下左*/
margin: 20px;/*上下左右均为20px*/
maigin:50px 80px 30px  /*上为50px  左右为80px  下为30px*/

 有三个的时候为上，左右，下。

 

 

（3）CSS背景比较常用的样式属性，包括单独设置一个背景颜色、单独设置背景为图片、单独设置背景图片是否重复，重复是全部重复还是按照X横向或Y纵向重复。接下来我们介绍background背景样式常用简写与注意。

①单独设置背景一种颜色的背景优化

background-color:#CCC 

 优化为：

background:#CCC 

 

②背景为图片，X横向重复平铺

background-image:url(http://www.divcss5.com/img201207/divcss5-logo-2012.gif);  
background-position:0 0; background-repeat:repeat-x 

简写：

background:url(http://www.divcss5.com/img201207/divcss5-logo-2012.gif) repeat-x 0 0; 

 

③背景为图片，Y纵向重复平铺

background-image:url(http://www.divcss5.com/img201207/divcss5-logo-2012.gif); 
background-position:0 0; background-repeat:repeat-y 

 CSS简写优化为：

background:url(http://www.thinkcss5.com/images2012/logo.gif) repeat-y 0 0; 

 

④背景为图片，不重复平铺CSS压缩

background-image:url(http://www.divcss5.com/img201207/divcss5-logo-2012.gif);
background-position:0 0; background-repeat:no-repeat 

简写：

background:url(http://www.divcss5.com/img201207/divcss5-logo-2012.gif) no-repeat 0 0; 

 

⑤背景为黑色，图片向X横向重复平铺

background-color:#CCC;background-image:url(http://www.divcss5.com/img201207/divcss5-logo-2012.gif);  
background-position:0 0; background-repeat:repeat-x; 

简写合并：这里注意颜色与图片前后顺序。

background:#CCC url(http://www.divcss5.com/img201207/divcss5-logo-2012.gif) repeat-x 0 0; 

 

（4）font简写

font-size:12px;
line-height:12px; 
font-family:Arial, Helvetica, sans-serif; 

可简写为：

font:12px/12px Arial, Helvetica, sans-serif; 

 

二、标点符号优化  

（1）删除多余空格字符

我们常常写CSS代码时候CSS样式单词之间会多html空格，我们可以在开发完CSS代码时候，可以利用软件快速删除多余空格字符

（2）删除每个选择器最后一个分号

例子：

div{float:left;width:100px;height:100%;} 
.divcss5{float:left;width:100px;height:100px;} 

 删除末尾分号后：

div{float:left;width:100px;height:100%} 
.divcss5{float:left;width:100px;height:100px} 

 

三、删除换行  

删除空格与换行，让代码都挤一起，快捷键即可完成

 

 

四、CSS重用优化  

这里主要介绍是CSS代码的共用属性提取来达到节约代码、维护方便，CSS实例如下：

.yangshi_a{ width:100px; height:20px; text-align:left; float:left; font-size:24px;} 
.yangshi_b{ width:100px; height:20px; text-align:right; float:left; font-size:24px;} 

观察后即可发现，他们都有相同高度、宽度、浮动、文字大小，而只有内容居左居右不同，那我们就可以提取他们相同属性

优化压缩后:

.yangshi_a ,.yangshi_b{ width:100px; height:20px; text-align:left; float:left; font-size:24px;} 
.yangshi_b{text-align:right; }

 【注意：】二者顺序不能颠倒，css样式读取是由上到下，有左到右

 

 

五、CSS代码优化简写总结 

根据以上几点优化简写，你可以压缩你CSS代码，同时减少不必要占用字节空格、分号，通过简写常用CSS代码等大大解决压缩CSS代码。