优化技巧CSS代码

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

1、减少占用网页字节。在同等条件下缩短浏览器下载css代码时间，相当于加快网页打开速度

2、便于维护。简化和标准化css代码让css代码减少，便于日后维护

3、让自己写的css代码更加专业。

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

1、缩写css代码。

2、排列css代码。

3、同属性提取共用css选择器。

4、分离网页颜色和背景设置样式（较大站点需要注意）。

5、条理化css代码。

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

1、缩写css代码

常用需要缩写    css属性代码如下：

background(背景属性

未优化前

background-color:#FFF;对应属性为背景颜色为白色

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代码。