CssGaga图文使用教程:css压缩的技巧

网站建设是指使用标识语言（markup language)，通过一系列设计、建模、和执行的过程将电子格式的信息通过互联网传输，最终以图形用户界面（GUI）的形式被用户所浏览。简单来说，网页设计的目的就是产生网站。简单的信息如文字，图片（GIF，JPEG，PNG）和表格，都可以通过使超文件标示语言、可扩展超文本标记语言等标示语言放置到网站页面上。

　　勾选换行则每条规则后换行，否则全部压为一行(MHTML除外)

　　CssGaga参考了一部分YUI Compressor，拥有比YUI Compressor更极限的压缩

　　去除注释和空白

　　Before:

　　/*****

　　Multi-line comment

　　before a new class name

　　*****/

　　.classname {

　　/* comment in declaration block */

　　font-weight: normal;

　　}

　　After:

　　.classname{font-weight:normal}

　　去除结尾的分号

　　Before:

　　.classname {

　　border-top: 1px;

　　border-bottom: 2px;

　　}

　　After:

　　.classname{border-top:1px;border-bottom:2px}

　　Before:

　　去除多余的分号

　　.classname {

　　border-top: 1px; ;

　　border-bottom: 2px;;;

　　}

　　After:

　　.classname{border-top:1px;border-bottom:2px}

　　去除无效的规则

　　Before:

　　.empty { ;}

　　.nonempty {border: 0;}

　　After:

　　.nonempty{border:0}

　　去除零值的单位并合并多余的零

　　Before:

　　a {

　　margin: 0px 0pt 0em 0%;

　　background-position: 0 0ex;

　　padding: 0in 0cm 0mm 0pc

　　}

　　After:

　　a{margin:0;background-position:0 0;padding:0}

　　去除小数点前多余的0

　　Before:

　　.classname {

　　margin: 0.6px 0.333pt 1.2em 8.8cm;

　　background: rgba(0, 0, 0, 0.5);

　　}

　　After:

　　.classname{margin:.6px .333pt 1.2em 8.8cm;background:rgba(0,0,0,.5)}

　　压缩border、outline

　　Before:

　　.classname {

　　border-left: 0 none;

　　border-right: none;

　　border: 0 none;

　　outline: 0 none;

　　}

　　After:

　　.classname{border-left:0;border-right:0;border:0;outline:0}

　　色值压缩

　　Before:

　　.color-me {

　　color: rgb(123, 123, 123);

　　border-color: #ffeedd;

　　background: none repeat scroll 0 0 rgb(255, 0,0);

　　}

　　After:

　　.color-me{color:#7b7b7b;border-color:#fed;background:none repeat scroll 0 0 #f00}

大多数人在上网的时候，都会浏览网页提供给我们的信息。

……