您的位置:CSS主页 > DIV+CSS技巧 >

CSS代码优化简写缩写压缩经验篇

 

CSS代码优化简写压缩经验篇

CSS代码压缩优化目录
  1. CSS代码简写
  2. 标点符号优化压缩
  3. 删除换行
  4. CSS代码优化简写总结

一、CSS代码简写   -   TOP

我们列出常用CSS样式可简写和简写方法,方便大家对照与查阅。
边框样式单词:border 详细了解CSS 边框css border

1、CSS边框border
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代码量

2、CSS padding内补白
1)、四边设置padding内补白属性
传统思维:
Padding-left:2px;Padding-right:3px;Padding-top:4px;Padding-bottom:5px
可以简写:
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、CSS 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、css background背景
CSS背景比较常用的样式属性,包括单独设置一个背景颜色、单独设置背景为图片、单独设置CSS背景图片是否重复,重复是全部重复还是按照X横向或Y纵向重复。接下来我们介绍background背景样式常用简写与注意。

1)、单独设置背景一种颜色
background-color:#CCC
简写为:
background:#CCC

2)、背景为图片,X横向重复平铺
background-image:url(http://www.thinkcss5.com/images2012/logo.gif); background-position:0 0; background-repeat:repeat-x
简写:
background:url(http://www.thinkcss5.com/images2012/logo.gif) repeat-x 0 0;

2)、背景为图片,Y纵向重复平铺
background-image:url(http://www.thinkcss5.com/images2012/logo.gif); background-position:0 0; background-repeat:repeat-y
简写:
background:url(http://www.thinkcss5.com/images2012/logo.gif) repeat-y 0 0;

3)、背景为图片,不重复平铺
background-image:url(http://www.thinkcss5.com/images2012/logo.gif); background-position:0 0; background-repeat:no-repeat
简写:
background:url(http://www.thinkcss5.com/images2012/logo.gif) no-repeat 0 0;

4)、背景为图片,网页全背景X和Y重复平铺
background-image:url(http://www.thinkcss5.com/images2012/logo.gif);
简写:
background:url(http://www.thinkcss5.com/images2012/logo.gif) ;

5)、背景为黑色,图片向X横向重复平铺
background-color:#CCC;background-image:url(http://www.thinkcss5.com/images2012/logo.gif); background-position:0 0; background-repeat:repeat-x;
简写:
background:#CCC url(http://www.thinkcss5.com/images2012/logo.gif) repeat-x 0 0;
这里注意颜色与图片前后顺序。

CSS background知识http://www.thinkcss.com/view/c93.html

二、标点符号优化   -   TOP

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

例子:
div{ float:left; width:100px; height:100%;}
删除空格后:
div{float:left;width:100px;height:100%;}

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

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

代码:
div{float:left;width:100px;height:100%;}
.thinkcss{float:left;width:100px;height:100px;}
简写删除分号后:
div{float:left;width:100px;height:100%}
.thinkcss{float:left;width:100px;height:100px}

三、删除换行   -   TOP

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


简写删除选择器换行占位

CSS代码:
div{float:left;width:100px;height:100%}
.thinkcss{float:left;width:100px;height:100px}
/* www.thinkcss.com */

简写缩写优化:
div{float:left;width:100px;height:100%}.thinkcss{float:left;width:100px;height:100px}/* www.thinkcss.com */


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

四、CSS代码优化简写总结   -   TOP

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

扩展阅读:
1、压缩HTMLhttp://www.thinkcss.com/view/g76.html

标签(Tag): 压缩 优化 简写

更多

上一页: 上一篇:DIV CSS隐藏html内容方法
下一页: 下一篇:没有了

 

HTML必备基础教程

 

CSS必备基础教程

 

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期:2012-12-17     点击:
原创来源:ThinkCSS     来源网址:http://www.thinkcss.com/view/g108.html
本文WWW.ThinkCSS.COM(DIV CSS) ThinkCSS版权所有,欢迎转载,并注明出处来源及URL!

 

推荐信息