一、css优化简介

编写高质量的css代码主要体现在以下两个方面：可读性和可维护性和高性能，

1、属性缩写

在css中，许多属性是可以缩写的，属性缩写可以减少字符数，使得css代码量更少，对于属性缩写，主要从四个方面进行优化。（1）盒模型缩写；在css盒模型中，有3个重要属性： border（边框） 对于边框，需要定义3个方面：边框的宽度（border-width)、边框的外观（border-style)、边框的颜色（border-color).对于边框，有两种写法：完整形式和缩写形式。 *完整形式

border-width: 1px;
border-style: solid;
border-color: red;

缩写形式：

border:1px solid red;

缩写形式定义的是四条边的样式，有时候只想定义一条边样式，可以定义“border-top:1px solid red”这种方式，有时候，只想定义三条边的边框，可以采用以下方法：

border:1px solid red;
border-bottom: 0;
或者：
border:1px solid red;
border-bottom: none;

padding（内边距） padding写法有三种，分别如下：语法： padding：长度值； padding：长度值1 长度值2； padding：长度值1 长度值2 长度值3 长度值4；例如：“padding：20px”表示四个内边距都是20px； margin（外边距） 写法与padding相同，有三种方式； margin：长度值； margin：长度值1 长度值2； margin：长度值1 长度值2 长度值3 长度值4；（2）背景缩写；为元素定义背景，涉及以下属性：

background-color ：背景颜色；
background-image：背景图片；
background-repeat：背景重复；
background-attachment：背景图片是固定还是滚动；
background-position：背景图片的定位；对于背景，有完整形式和简写形式。完整形式：

background-image：url("images/flower.jpg");
        background-repeat：no-repeat;
        background-position：80px 40px;

简写形式：

background-image：url("images/flower.jpg") no-repeat 80px 40px;

（3）字体缩写；在css中，常用到的字体以及文本属性如下所示：

font-family:字体类型；
font-size:字体大小；
font-weight：字体粗细；
line-height：行高；（4）颜色值缩写；如果两位的值相同，可以缩写一半。

2、语法压缩

对于语法压缩，进行7个方面的优化。（1）空白符（2）结尾空白。（3）url（）的引号（4）属性值为“0”。（5）属性值为“以0开头的小数” （6）合并相同的定义；（7）利用继承性进行合并。

3、压缩工具

css压缩工具有在线版、本地版和编辑器插件三种； CSS Compressor和YUI Compressor。

4、图片压缩

（1）JPEG:JPEGmini。（2）png：TinyPNG。

5、高性能的选择器

（1）选择器在浏览器的解析原理

#column .content div{color:red;}

浏览器是从右到左解析选择器的：首先查找所有的div元素，然后再查找div元素是否存在content类的父元素，然后在已经匹配的父元素中继续向上查找祖先元素是否含有id为column的元素。（2）不同选择器的解析速度。 css选择器的匹配效率从高到低做了一个排序；

id选择器
class选择器
元素选择器
相邻选择器
子选择器
后代选择器
通配符选择器
属性选择器
伪类选择器

css性能优化