CSS代码优化，受益无穷

写在前面：
CSS代码优化是指将多行的CSS属性声明化成一行，简洁代码。CSS优化的最大好处就是能够显著减少CSS文件的大小，其实还有很多其他益处。臃肿而杂乱的CSS样式表会使你遇到问题是难以调试。尤其是当一个团队在进行设计的时候，你的臃肿的CSS代码会使你的团队其他成员做很多无用功，甚至会降低工作效率。
今天，为大家整理了一些常用css代码简写方法，一方面让你的css代码看起来整洁，另一方面减小css代码的臃肿度，提高css样式的读取速度。

1.属性为0

书写原则是如果CSS属性值为0，那么你不必为其添加单位(如:px/em)，你可能会这样写:

padding: 10px 5px 0px 0px;

优化为:

padding: 10px 5px 0 0;

2.背景(background)

背景(background)属性可能会包含设置背景色、背景图、背景图的位置和背景图重复方式的参数，你可能会写成:

background-image: url(”logo.png”);
background-position: top center;
background-repeat: no-repeat;

优化为：

background:url(logo.png) top center no-repeat;

3.颜色(color)

颜色(color)属性在CSS通常指定为一个十六进制的值,一个#加6位数，他的简写方式是如果颜色值由成对儿出现的三对而数字组成，你可以省略掉没对中的一个数字。

　　#FFFFFF 可以写成 #FFF, #336699 可以写成 #369;

这种简写技巧只适用于成对出现的颜色值，其它颜色值不适用这种技巧，比如:

　　#010101, #F20000, #FFF000

4.外边距/空白边(Margin)/内边距(Padding)

声明CSS magin值得时候通常会写成这样:

margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:10px;
———————————-
padding-top:0px;
padding-right:10px;
padding-bottom:0px;
padding-left:10px;
优化为：

margin:0 10px 0px 10px;

padding:0 10px 0px 10px;

当你生命padding、margin、border(还有一些其他属性)时，记得要把按照顺时针的方向来声明属性值，也就是按照上-右-下-左的方向。关于这些属性还有另一个更加简单的写法，看看属性中上和下、左和右是否值是相等的，如果是那么就可以进一步优化了，你可以省略掉后两个值，剩下的两个值前者指上下，后者指左右:

margin:0 10px;

padding:0 10px;

5.边框(Border)

边框的简写方式相比其它生命来说会比较复杂，很多CSSer一开始都容易记混它的简写顺序，如果你想声明一个1像素宽的实线黑色边框，可能会写成:

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

优化为：

border:1px solid #000;

注意:这里的颜色值已经使用了上面讲过的颜色简写方法了哦。

我们还可以为四个边设置不同的宽度:

border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;

优化为：

border: 1px 2px 3px 4px;

6.文字(font)

文字属性也有很多可能会用到的属性值，像背景一样，你可能会声明这种复杂的文字样式:

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5;
font-family:宋体, Arial, sans-serif;

优化为：

font:italic small-caps bold 12px/1.5 宋体, Arial, sans-serif;

7.公有属性(public)

一般大家可能会这样写：

ul { margin:0; padding:0; }
li{ margin:0; padding:0; }
img { margin:0; padding:0; }

优化为：

ul,li,img { margin:0; padding:0; }

希望以上的编写技巧，能够让你的css代码简洁不少。

欢迎转载：注明出处,”UED,紫枫-80後” ，珍惜他人的劳动成果！^-^