css优化十大办法

CSS优化

一、CSS优化能够让页面更快加载 ，并且对搜索引擎更友好。

首先介绍一下CSS的相关技术包括

（1）分组声明和选择器。

（2）合并通用样式为共享类

（3）继承

（4）通过

（5） 属性简写来进行缩略。 化类和ID名

面向HTML的技术包括用CSS代替Javascript行为。以及为子选择器和CSS布局设计标记等等。

二、建立CSS架构。   

优秀的CSS架构从设计CSS布局，样式，和行为的一开始就早做打算。这样你就能够避免乱七八糟的CSS布局所导致的各种限制以及浏览器兼容问题。

   使用重置样式表。 

     解决不同浏览器之间的CSS选择器的各种特有行为。是实现跨浏览器兼容的方法之一

三、CSS优化的十大技巧

（1）用类型选择器代替内联样式，从而定位相同元素的多个实例。

（2）使用后代选择器（又称为上下文），而不要使用内嵌类。

     与显式的将类嵌入到每一个元素中相比，选择后代选择器更加高效。

（3）将含有共同声明的选择器归组。

（4）将相同选择器的不同声明归组

其中将（3），（4）结合，可以编写出简洁但更为强大的CSS规则。

eg:#nav{font-size:1em;}

  #nav{color:#000;background:transparent;}

  #nav ul{font-size:1em; }

  #nav ul li{font-size:1em; }

可以改成：

#nav,#nav ul,#nav ul li{font-szie:1em;color:#000;background:transparent;}

（5）将相同的样式合并为共享类

这种技术让CSS更为模块化      使CSS更为标准化。

（6）利用继承来消除重复声明

（7）使用CSS缩写   

    【1】使用颜色缩写

    【2】属性缩写（margin,padding,border,font,background,list-style,outline）

属性值复写：对于可以指定框的四边的CSS属性（border,border-color,margin,padding以及outline等等）

 （8）将较长的类名和ID名进行简写

【1】 使用语义上有意义的名称   

（9）使用CSS2和CSS3.x技术

利用属性选择器，属性选择器是css2.1引入的除了IE6其他浏览器都支持。

（10）用CSS技术来代替JavaScript实现。

  JavaScript常用于翻转和下拉菜单，然而在许多情况下，你可以使用CSS:hover效果来替换掉JavaScript翻转。

CSS按钮，CSS翻转，单幅图像菜单翻转，

CSS精灵：

（  CSS精灵是将多个图片放在一张图片之中，通过CSS背景定位技术来实行分别显示的技术，互联网上最为繁忙的站点，会使用CSS精灵来提高响应速度，以节省大量HTTP请求。将多个类的背景设置成一张图片，并通过背景位置的移动来显示不同的类，这就是CSS精灵的核心思想）    

基于列表的菜单

通过条件注释来避免CSS招数。                                                                               

注记：IE5.5和IE6不支持子选择器，但IE7及以后的版本就支持子选择器。

      还可以利用属性缩写特性进行优化。

IE5~7都不支持outline属性