css代码优化作用与意义
1、减少占用网页字节。在同等条件下缩短浏览器下载css代码时间，相当于加快网页打开速度
2、便于维护。简化和标准化css代码让css代码减少，便于日后维护
3、让自己写的css代码更加专业。
css优化方法-需要优化css代码地方
1、缩写css代码。
2、排列css代码。
3、同属性提取共用css选择器。
4、分离网页颜色和背景设置样式(较大站点需要注意)。
5、条理化css代码。
实例讲解以上几点div css优化方法
1、缩写css代码
常用需要缩写css属性代码如下：
background(背景属性-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(外补白属性-CSS手册详细了解margin手册)
未优化前
margin-left:5px; 意思为靠左5px
margin-right:6px; 靠右6px
margin-bottom:7px; 底部延伸7px
margin-top:8px; 顶部延伸8px
优化简写为
margin:8px 6px 7px 5px; 意思和属性效果同上，可详细了解css margin介绍
padding(内补白属性-CSS手册详细了解padding手册)
未优化前
padding-left:5px; 意思为左补白5px
padding-right:6px; 右补白6px
padding-bottom:7px; 底(下)补白7px
padding-top:8px; 顶(上)补白8px
优化简写为
padding:8px 6px 7px 5px; 意思和属性效果同上，可详细了解css padding介绍
border(边框属性-CSS手册详细了解border手册)
未优化前
border-color:#000000;边框颜色为黑色
border-style:solid;边框样式为实线
border-width:1px;边框宽度为1px
可以简写为
border:1px solid #000000;意思同上未优化前
如果是只设置左边边框为1px，颜色为黑色的实线css代码如下
border-left:1px solid #000000;
font(字体属性-CSS手册详细了解fonts手册)
字体的属性如下：
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 "黑体";
注意，如果你缩写字体定义，至少要定义font-size和font-family两个值了解css font技巧。
了解px是什么
2、排列css代码。
通常我们代码如下排列
这样将占css文件很多的空格和回车位空间，这里还占用了12行css文件空间
建议你改写为
.yangshi{ font-size:12px;border:1px solid #000000;padding:5px;}
.yangshi2{ font-size:12px;border:1px solid #000000;padding:5px;}
这样将节约空格和回车位，及css文件行数，从而节约代码文件字节。
3、同属性提取共用css选择器。
这个要了解的是如果有两个部分的css属性如宽度高度字体颜色都相同，而有很小一点不同，这个时候我们就需要提取大家相同的css样式出来，单独命名一个css属性选择器，从而节约css代码。
如：
.yangshi{ font-size:12px;border:1px solid #000000;padding:5px; width:25px;}
.yangshi2{ font-size:12px;border:1px solid #000000;padding:5px; width:50px;}
这里的yangshi和yanshi2两个样式有相同的字体大小为12px，边框相同,内补白相同，只有宽度不同，这个时候我们就可以提取他们相同部分并重新新建个css选择器和重用
新建css属性选择器演示如下
.gongyong{font-size:12px;border:1px solid #000000;padding:5px;}
.yangshi{ width:25px;}
.yangshi2{width:50px;}
这样在调用css时候-了解css 引入
<div class="gongyong yangshi">div css样式</div>
<div class="gongyong yangshi2">div css样式2</div>
这样就可以让通过调用相同css样式，再分别调用不同css属性类即可，以上实例还不能展示他的优点，但是如果代码多而且有很多地方如以上特点，这样将显示其功能特点。
4、分离网页颜色和背景设置样式(较大站点需要注意)。
这点有以上第三点同属性提取共用css选择器特点，但是区别地方，如果站比较大，需要改一个地方即可改变整个站点网页的字体颜色样式，背景图案颜色，边框颜色样式。
这个时候我们将需要在div+css开发的时候特别将的基本字体样式、背景图案颜色、边框等颜色提取到一起或放到一个css文件里，这样一来便于我们维护管理整个站点基本样式。
5、条理化css代码。
条理化css代码意思是将css代码整理归类，如控制头部、局部、底部的css代码选择器样式区别开来分别放到一起并与其他地方css代码互相隔开。
如头部的css代码与内容区css代码回车各行隔开
如以上“toubu”与“dibu”以行隔开得以区分，好处是以后维护方便，便于辨认更改维护。
DIV CSS优化
一、CSS样式属性单词代码简写优化
1、border(CSS边框)简写：
1)、4个边边框宽度为1px，颜色为#000
border-color:#000; border-style:solid; border-width:1px
可以简写为：
border:1px solid #000;
2)、单独上、下、左、右边框简写
左边：
border-left-color:#000; border-left-style:solid; border-left-width:1px
简写：
border-left:1px solid #000
右边：
border-right-color:#000; border-right-style:solid; border-right-width:1px
简写：
border-right:1px solid #000
上边：
border-top-color:#000; border-top-style:solid; border-top-width:1px
简写：
border-top:1px solid #000
下边：
border-bottom-color:#000; border-bottom-style:solid; border-bottom-width:1px
简写：
border-bottom:1px solid #000
3)、技巧性简写边框
有时只设置3边的边框时候，我们可以技巧性减少代码量。
假如我们不设置上边框，而其他3边为1px实现黑色边框。
传统代码：
Div{border-right:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000}
简写：
Div{border:1px solid #000;border-top:0}
这样达到相同效果也大大地减少CSS代码量
了解更多css边框优化压缩教程。
2、padding（CSS padding）简写：
1)、四边设置padding内补白属性
传统思维：
Padding-left:2px;Padding-right:3px;Padding-top:4px;Padding-bottom:5px
可以css padding简写：
Padding:4px 3px 5px 2px
2）、只对3边设置padding
假如我们不对“上”设置padding，其它3边设置padding属性
传统：
Padding-left:2px;Padding-right:3px;Padding-bottom:5px
简写：
Padding:0 3px 5px 2px
3边相同情况：
传统：
Padding-left:2px;Padding-right:2px;Padding-bottom:2px
简写：
Padding:0 2px 2px 2px;
3、margin简写
Margin与padding缩写类似
1）、四边间距设置缩写：
传统：
Margin-left:2px;Margin-right:3px;Margin-bottom:5px;Margin-top:4px;
简写：
Margin:4px 3px 5px 2px
2)、四边设置距离相同缩写
传统：
Margin-left:2px;Margin-right:2px;Margin-bottom:2px;Margin-top:2px;
简写：
Margin:2px
3）、上下相同、左右相同
Margin-left:2px;Margin-right:2px;Margin-bottom:5px;Margin-top:5px;
简写：
Margin:5px 2px
4、background简写
background-color:#000;
可以简写为
background:#000;
background-image:url(图片地址)
可简写为：
background:url(图片地址)
CSS背景比较常用的样式属性，包括单独设置一个背景颜色、单独设置背景为图片、单独设置背景图片是否重复，重复是全部重复还是按照X横向或Y纵向重复。接下来我们介绍background背景样式常用简写与注意。
1）、单独设置背景一种颜色的背景优化
background-color:#CCC
优化为：
background:#CCC
2）、背景为图片，X横向重复平铺
background-image:url(/img201207/divcss5-logo-2012.gif);
background-position:0 0; background-repeat:repeat-x
简写：
background:url(/img201207/divcss5-logo-2012.gif) repeat-x 0 0;
2）、背景为图片，Y纵向重复平铺
background-image:url(/img201207/divcss5-logo-2012.gif);
background-position:0 0; background-repeat:repeat-y
CSS简写优化为：
background:url(/images2012/logo.gif) repeat-y 0 0;
3）、背景为图片，不重复平铺CSS压缩
background-image:url(/img201207/divcss5-logo-2012.gif);
background-position:0 0; background-repeat:no-repeat
简写：
background:url(/img201207/divcss5-logo-2012.gif) no-repeat 0 0;
4）、背景为图片，网页全背景X和Y重复平铺
background-image:url(/img201207/divcss5-logo-2012.gif);
简写合并：
background:url(/img201207/divcss5-logo-2012.gif) ;
5）、背景为黑色，图片向X横向重复平铺
background-color:#CCC;background-image:url(/img201207/divcss5-logo-2012.gif);
background-position:0 0; background-repeat:repeat-x;
简写合并：
background:#CCC url(/img201207/divcss5-logo-2012.gif) repeat-x 0 0;
这里注意颜色与图片前后顺序。
5、font简写
font-size:12px; line-height:12px; font-family:Arial, Helvetica, sans-serif;
可简写为：
font:12px/12px Arial, Helvetica, sans-serif;
二、标点符号优化
1、删除多余空格字符
我们常常写CSS代码时候CSS样式单词之间会多html空格，我们可以在开发完CSS代码时候，可以利用软件快速删除多余空格字符
CSS代码优化字标点符号
标点符号字空格字符优化
例子：
div{ float:left; width:100px; height:100%;}
删除空格后：
div{float:left;width:100px;height:100%;}
去掉标点符号之空格后的css代码
去掉空格优化压缩后的CSS代码
删除空格，在开发CSS过程不必删除，只需要在开发完成后利用如DW软件批量替换删除掉多余空格即可。
2、删除每个选择器最后一个分号
删除分号优化CSS代码
删除分号前CSS代码
代码：
div{float:left;width:100px;height:100%;}
.divcss5{float:left;width:100px;height:100px;}
简写删除分号压缩后：
div{float:left;width:100px;height:100%}
.divcss5{float:left;width:100px;height:100px}
CSS代码优化压缩之去掉最后一个属性分号截图
去掉最后一个分号
三、删除换行
删除空格与换行，让代码都挤一起。
删除空格前截图
删除选择器之间换行空格截图
简写删除选择器换行占位
CSS代码：
div{float:left;width:100px;height:100%}
.divcss5{float:left;width:100px;height:100px}
简写缩写优化：
div{float:left;width:100px;height:100%}.divcss5{float:left;width:100px;height:100px}
删除后缩短字节优化CSS
简写删除换行，依然可以借助DW软件进行操作删除。
四、CSS重用优化
这里主要介绍是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代码优化简写总结
根据以上几点优化简写，你可以压缩你CSS代码，同时减少不必要占用字节空格、分号，通过简写常用CSS代码等大大解决压缩CSS代码。