css样式表如何进行代码压缩

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-边框宽度为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-字行高为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; }
.yangshi2{ font-size:12px;border:1px solid #000000;padding:5px; }

这里的yangshi和yanshi2两个样式有相同的字体大小为12px，边框相同,内补白相同，只有宽度不同，这个时候我们就可以提取他们相同部分并重新新建个css选择器和重用

新建css属性选择器演示如下

.gongyong{font-size:12px;border:1px solid #000000;padding:5px;}
.yangshi{ }
.yangshi2{}

这样在调用css时候-了解css 引入

 

这样就可以让通过调用相同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-

可以简写为：

border:1px solid #000;

2)、单独上、下、左、右边框简写

左边：

border-left-color:#000; border-left-style:solid; border-left-

简写：

border-left:1px solid #000

右边：

border-right-color:#000; border-right-style:solid; border-right-

简写：

border-right:1px solid #000

上边：

border-top-color:#000; border-top-style:solid; border-top-

简写：

border-top:1px solid #000

下边：

border-bottom-color:#000; border-bottom-style:solid; border-bottom-

简写：

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- font-family:Arial, Helvetica, sans-serif;

可简写为：

font:12px/12px Arial, Helvetica, sans-serif;

二、标点符号优化

1、删除多余空格字符
我们常常写CSS代码时候CSS样式单词之间会多html空格，我们可以在开发完CSS代码时候，可以利用软件快速删除多余空格字符

CSS代码优化字标点符号
标点符号字空格字符优化

例子：

div{ float:left; height:100%;}

删除空格后：

div{float:left;height:100%;}

去掉标点符号之空格后的css代码
去掉空格优化压缩后的CSS代码

删除空格，在开发CSS过程不必删除，只需要在开发完成后利用如DW软件批量替换删除掉多余空格即可。

2、删除每个选择器最后一个分号

删除分号优化CSS代码
删除分号前CSS代码

代码：

div{float:left;height:100%;}
.divcss5{float:left;}

简写删除分号压缩后：

div{float:left;height:100%}
.divcss5{float:left;}

CSS代码优化压缩之去掉最后一个属性分号截图
去掉最后一个分号

三、删除换行

删除空格与换行，让代码都挤一起。

删除空格前截图
删除选择器之间换行空格截图

简写删除选择器换行占位

CSS代码：

div{float:left;height:100%}
.divcss5{float:left;}

简写缩写优化：

div{float:left;height:100%}.divcss5{float:left;}

删除后缩短字节优化CSS
简写删除换行，依然可以借助DW软件进行操作删除。

四、CSS重用优化

这里主要介绍是CSS代码的共用属性提取来达到节约代码、维护方便，CSS实例如下：

.yangshi_a{ text-align:left; float:left; font-size:24px;}
.yangshi_b{ text-align:right; float:left; font-size:24px;}

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

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

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

五、CSS代码优化简写总结

根据以上几点优化简写，你可以压缩你CSS代码，同时减少不必要占用字节空格、分号，通过简写常用CSS代码等大大解决压缩CSS代码。