CSS代码优化（转载）

要点1：css代码优化作用与意义

1、减少占用网页字节。在同等条件下缩短浏览器下载css代码时间，相当于加快网页打开速度；
2、便于维护。简化和标准化css代码让css代码减少，便于日后维护；
3、让自己写的css代码更加专业。

要点2：css优化方法-需要优化css代码的地方

1、缩写css代码。
2、排列css代码。
3、同属性提取共用css选择器。
4、分离网页颜色和背景设置样式（较大站点需要注意）。
5、条理化css代码。

实例讲解以上几点div css优化方法

一、缩写css代码
常用需要缩写 css属性代码如下：
background(背景属性)
未优化前
对应属性为背景颜色为白色
background-image:url(divcss5.gif);　　　　　　对应属性是设置divcss5.gif图片为背景
background-position:bottom;　　　　　　　　背景图片是居底部
background-repeat:repeat-x;　　　　　　　　背景按X坐标（横坐标）重复延伸

以上CSS代码可以简写为
background:#FFF url(divcss5.gif) repeat-x bottom;
解释：背景颜色为白色，并以X坐标重复divcss5.gif图片，并且图标居下。未优化css background属性相同

margin(外补白属性)
未优化前
margin-left:5px;　　　　 意思为靠左5px
margin-right:6px; 　　　　靠右6px
margin-bottom:7px; 　　底部延伸7px
margin-top:8px;　　　　　　 顶部延伸8px

优化简写为
margin:8px 6px 7px 5px; 意思和属性效果同上

padding(内补白属性)
未优化前
padding-left:5px; 　　　　　　意思为左补白5px
padding-right:6px; 　　　　　　右补白6px
padding-bottom:7px; 　　　　底（下）补白7px
padding-top:8px; 　　　　　　顶（上）补白8px

优化简写为
padding:8px 6px 7px 5px; 意思和属性效果同上

border(边框属性)
未优化前
border-color:#000000;　　　　边框颜色为黑色
border-style:solid;　　　　　　边框样式为实线
border-width:1px;　　　　　　边框宽度为1px

可以简写为
border:1px solid #000000;意思同上未优化前
如果是只设置左边边框为1px，颜色为黑色的实线css代码如下
border-left:1px solid #000000;

font(字体属性)
未优化前
font-style:italic; 　　　　　　字体样式
font-variant:small-caps; 　　字体异体
font-weight:bold; 　　　　　　字体加粗
font-size:12px; 　　　　　　字大小为12px
line-height:22px;　　　　　　字行高为22px
font-family:”黑体” 　　　　　　字体为黑体字

可以缩写为一句：

font:italic small-caps bold 12px/22px “黑体”;

二、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;}

他们都有相同高度、宽度、浮动、文字大小，而只有内容居左居右不同(你可能需要了解CSS居中)，我们就可以提取他们相同属性
优化后:

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

注意观察以上代码，自己理解，不懂可到CSS论坛提出问题。

我们在写CSS的时候，常常会遇到让一个图片或一个布局不能超出设定一定高度范围值，有时也需要设置一个最小高度值，以达到对齐等样式。

接下来为大家总结的如何解决IE6不支持max-height和不支持max-height的方法。

目录
IE6支持max-height解决方法
IE6支持min-height解决方法
IE6支持max-height又支持min-height方法

1、IE6支持max-height解决方法 
IE6支持最大高度解决CSS代码：

 .yangshi{max-height:1000px;_height:expression_r((document.documentElement.clientHeight||document.body.clientHeight)<1000?”1000px”:”");overflow:hidden;}

说明：max-height:1000px; 这个是IE6以上级其它品牌浏览器支持最大范围高度。而_height:expression_r((document.documentElement.clientHeight||document.body.clientHeight)<1000?”1000px”:”");overflow:hidden;则是让IE6支持max-height替代CSS代码，但效果和其它版本浏览器相同效果。

让所有浏览器都支持max-height的CSS样式代码完整版本：

 .yangshi{
     maxheight:1000px;
     _height:expression_r((document.documentElement.clientHeight||document.body.clientHeight)<1000?”1000px”:”");
      overflow:hidden;
 }

这里的1000和1000px是你需要的数值，注意3个数值的相同。 让IE6支持最大高度max-height的时候别忘记加上overflow:hidden;

2、IE6支持min-height解决方法 – IE6支持最小高度解决方法

CSS代码：

.yangshi{min-height:1000px;_height:expression_r((document.documentElement.clientHeight||document.body.clientHeight)>1000?”1000px”:”");}

说明：min-height:1000px; 这个是IE6以上级其它品牌浏览器支持最小范围高度。而_height:expression_r((document.documentElement.clientHeight||document.body.clientHeight)>1000?”1000px”:”");则是让IE6支持min-height替代CSS代码，但效果和其它版本浏览器相同效果。
让所有浏览器都支持min-height的CSS样式代码，完整：
min-height:1000px;_height:expression_r((document.documentElement.clientHeight||document.body.clientHeight)>1000?”1000px”:”"); 这里的1000和1000px是你需要的数值，注意3个数值的相同。

3、IE6支持max-height又支持min-height方法 
css代码：

.yangshi{Max-Height:620px;Min-Height:40px;_height:expression_r(this.scrollHeight > 620 ? “620px” : (this.scrollHeight < 40 ? “40px” : “auto”));}

IE6支持Max-Height和支持Min-Height CSS代码 _height:expression_r(this.scrollHeight > 620 ? “620px” : (this.scrollHeight < 40 ? “40px” : “auto”));
说明：以上代码作用是让对象的最小高度为40px，最大高度为620px的CSS样式属性。

CSS命名规范
随着以后的趋势从现在的html4+css2.0到html5+css3.0的发展升级，现在的css命名规范显得相当重要了，当然发展到html 5+css 3.0完全兼容至少还需要5-8年时间，但是现在可以从点滴积累做起。html5+css3.0完全兼容至少还需要5-8年时间是怎么得来的，可以推算从IE6到现在IE8的发展，而现在还有很多用户在使用IE6浏览器，IE6现在还没有被微软淘汰或不能使用，从ie6开始到现在也经历了大概有8年时间，可想如果要发展到html5+css3.0各个浏览器都兼容至少需要8年时间。

CSS命名规范重要性：

1、为以后html5+css3.0发展方向打下基础。
现在命名头部、底部等大家习惯用 header、footer来命名，最终html调用css样式既是
这种形式，以后html5+css3.0标准将是直接用
标签来表示头部部分了，所以为以后版本升级规范有一定好处，虽然达到兼容html5+css3.0浏览器还早，但是可以为div+css开发者来说可以先注意一下。

2、css命名规范可以节约团队开发时间。
特别在团队合作开发网站项目中，大家规范的来制作一套共识的css命名，将节约开发时间及成本，如果开发项目中div+css开发者乱命名css，将给后来的程序员的解读带来不便。

3、css命名规范可为以后维护带来方便。
Div+css开发好后网站项目制作好后，很难保证以后不调整及优化，这样自己没有自己一套css命名特点，将为自己以后的维护带来不便。

总结：
无论是考虑团队开发、以后的维护、html5+css3的升级，DIV CSS开发伪类的命名都相当重要。
现在通常我们都是在html 4.0 和css 2.0基础上开发的div+css符合w3c标准的网站，至于html 5+css 3.0可以了解，如果要运用至少又将等几年，等浏览器IE6-IE8的淘汰不能使用，这时我们将合理的运用html 5+css 3.0 。

十句CSS学习顺口溜（很受用）：
一、IE边框若显若无，须注意，定是高度设置已忘记；
二、浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中；
三、三像素文本慢移不必慌，高度设置帮你忙；
四、兼容各个浏览须注意，默认设置行高可能是杀手；
五、独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览；
六、学布局须思路，路随布局原理自然直，轻松驾驭html，流水布局少hack，代码清爽，兼容好，友好引擎喜欢迎。
七、所有标签皆有源，只是默认各不同，span是无极，无极生两仪—内联和块级，img较特殊，但也遵法理，其他只是改造各不同，一个*号全归原，层叠样式理须多练习，万物皆规律。
八、图片链接排版须小心，图片链接文字链接若对齐，padding和vertical-align:middle要设定，虽差微细倒无妨。
九、IE浮动双边距，请用display：inline拘。
十、列表横向排版，列表代码须紧靠，空隙自消须铭记。

出处：http://www.zhiqianduan.com/201.html