DIV CSS优化 CSS压缩技巧教程

DIV CSS优化

DIVCSS5为大家介绍简单的CSS优化。
涉及优化内容：
CSS代码优化、CSS重用优化、缩短字符、删除换行等处优化

1. CSS样式单词简写优化
2. 标点符号优化
3. 删除换行
4. CSS重用优化
5. CSS代码优化简写总结

一、CSS样式属性单词代码简写优化 - TOP

1、border(CSS边框)简写：

1)、4个边边框宽度为1px，颜色为#000

border-color:#000;
    border-style:solid;
    border-width:1px

可以简写为：

border:1pxsolid#000;
    

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

border-left-color:#000;
    border-left-style:solid;
    border-left-width:1px

简写：

border-left:1pxsolid#000

右边：

border-right-color:#000;
    border-right-style:solid;
    border-right-width:1px

简写：

border-right:1pxsolid#000

上边：

border-top-color:#000;
    border-top-style:solid;
    border-top-width:1px

简写：

border-top:1pxsolid#000

下边：

border-bottom-color:#000;
    border-bottom-style:solid;
border-bottom-width:1px

简写：

border-bottom:1pxsolid#000

3)、技巧性简写边框
有时只设置3边的边框时候，我们可以技巧性减少代码量。
假如我们不设置上边框，而其他3边为1px实现黑色边框。

传统代码：

Div{
    border-right:1pxsolid#000;
    border-bottom:1pxsolid#000;
border-left:1pxsolid#000}

简写：

Div{
    border:1pxsolid#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:4px3px5px2px

2）、只对3边设置padding
假如我们不对"上"设置padding，其它3边设置padding属性

传统：

Padding-left:2px;
    Padding-right:3px;
    Padding-bottom:5px

简写：

Padding:03px5px2px

3边相同情况：
传统：

Padding-left:2px;
    Padding-right:2px;
    Padding-bottom:2px

简写：

Padding:02px2px2px;
    

3、margin简写

Margin与padding缩写类似

1）、四边间距设置缩写：
传统：

Margin-left:2px;
    Margin-right:3px;
    Margin-bottom:5px;
    Margin-top:4px;
    

简写：

Margin:4px3px5px2px

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:5px2px

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(http://www.divcss5.com/img201207/divcss5-logo-2012.gif);
    
background-position:00;
    background-repeat:repeat-x

简写：

background:url(http://www.divcss5.com/img201207/divcss5-logo-2012.gif)repeat-x00;
    

2）、背景为图片，Y纵向重复平铺

background-image:url(http://www.divcss5.com/img201207/divcss5-logo-2012.gif);
    
background-position:00;
    background-repeat:repeat-y

CSS简写优化为：

background:url(http://www.thinkcss5.com/images2012/logo.gif)repeat-y00;
    

3）、背景为图片，不重复平铺CSS压缩

background-image:url(http://www.divcss5.com/img201207/divcss5-logo-2012.gif);
    
background-position:00;
    background-repeat:no-repeat

简写：

background:url(http://www.divcss5.com/img201207/divcss5-logo-2012.gif)no-repeat00;
    

4）、背景为图片，网页全背景X和Y重复平铺

background-image:url(http://www.divcss5.com/img201207/divcss5-logo-2012.gif);
    

简写合并：

background:url(http://www.divcss5.com/img201207/divcss5-logo-2012.gif);
    

5）、背景为黑色，图片向X横向重复平铺

background-color:#CCC;
    background-image:url(http://www.divcss5.com/img201207/divcss5-logo-2012.gif);
    
background-position:00;
    background-repeat:repeat-x;
    

简写合并：

background:#CCCurl(http://www.divcss5.com/img201207/divcss5-logo-2012.gif)repeat-x00;
    

这里注意颜色与图片前后顺序。

5、font简写

font-size:12px;
    line-height:12px;
    font-family:Arial,Helvetica,sans-serif;
    

可简写为：

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

二、标点符号优化 - TOP

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

标点符号字空格字符优化

例子：

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

删除空格后：

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

去掉空格优化压缩后的CSS代码

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

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

删除分号前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}
    

去掉最后一个分号

三、删除换行 - TOP

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

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

简写删除选择器换行占位

CSS代码：

div{
    float:left;
    width:100px;
height:100%}
.divcss5{
    float:left;
    width:100px;
height:100px}
/*www.divcss5.com*/

简写缩写优化：

div{
    float:left;
    width:100px;
height:100%}
.divcss5{
    float:left;
    width:100px;
height:100px}
    
/*www.divcss5.com*/

简写删除换行，依然可以借助DW软件进行操作删除。

四、CSS重用优化 - TOP

这里主要介绍是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代码优化简写总结 - TOP

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！