网站建设是指使用标识语言(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}
大多数人在上网的时候,都会浏览网页提供给我们的信息。
关键词:CssGaga图文详细教程:css压缩的技巧