CSS代码在线压缩优化工具示例

2009-07-13 0 条评论 4,418 次阅读被赞了 0 次

CSS在线压缩工具

CSS在线压缩工具

提供的CSS代码格式化和css在线压缩工具，不需要使用YUI Compressor 或者 CSSTidy等离线工具，直接在线操作。

/*请将CSS代码复制到下面*/

/*请将CSS代码复制到这里，下面是示例*/ 
input,button{height: 20px;background-color: #ffffff;/*border: 1px solid #333333;*/} 
textarea{background-color: #ffffff;border: #3872b4 1px solid;} 
select{height: 20px;font-size: 12px;background-color: #ffffff;border: 1px solid #333333;} 
a{/*color: #794820;color: #000000;*/color: #004f8a;text-decoration: none;text-transform: capitalize;} 
a: link{text-decoration: none;} 
a: visited{text-decoration: none;} 
.input{border: #3872b4 1px solid;height: 20px;line-height: 20px;font-size: 12px;} 
#result_dao{border-right: #b3cad6 1px solid;padding-right: 0px;border-top: #b3cad6 1px solid;padding-left: 2px;font-size: 12px;float: left;padding-bottom: 0px;margin: 2px 0px;border-left: #b3cad6 1px solid;padding-top: 0px;border-bottom: #b3cad6 1px solid;background-color: #e6eff4;width: 100%;text-align: left;text-indent: 20px;color: #333333;} 
#content{white-space: pre;} 
/***rss***/.rss_b{/*border: 1px solid #99ccff;*/padding: 1px;line-height: 18px;font-size: 12px;width: 95px;height: 18px;text-align: center} 
.rss_l{border: 1px solid #99ccff;background: #99ccff;margin: 0px;margin-right: 3px;padding-left: 2px;padding-right: 2px;color: #ffffff;} 
.rss_a{border: 1px solid #99ccff;background: #e8f3fd;margin: 0px;padding-left: 1px;padding-right: 1px;color: #ffffff;} 
.rss_a: link{color: #99ccff;} 
.rss_a: visited{color: #99ccff;} 
.rss_a: hover{background-color: #e8f3fd;text-decoration: none;color: #008ed2;border: 1px solid #99ccff;} 
/********rank*********/.mo_{background-color: #ffffff;width: 48px !important;width: 50px;border: 1px solid #99ccff;cursor: pointer ;text-align: center;font-size: 12px;float: left;border-top: 1px solid #99ccff;border-bottom: 1px solid #99ccff;text-decoration: underline;color: #cccccc;} 
.mu_{background-color: #e8f3fd;width: 48px !important;width: 50px;cursor: pointer ;text-align: center;font-size: 12px;float: left;border: 1px solid #99ccff;border-top: 1px solid #ff9966;border-bottom: 1px solid #99ccff;text-decoration: underline;} 
.ms_{background-color: #ffffff;border: 1px solid #99ccff;border-top: 1px solid #99ccff;border-bottom: 1px solid #ffffff;width: 48px !important;width: 50px;height: 25px !important;height: 27px;cursor: default;text-align: center;font-size: 14px;line-height: 25px;float: left;} 
.mx_{float: left;height: 260px !important;height: 250px;} 
#Hot_Div span{float: left;height: 26px !important;height: 27px;border-bottom: 1px solid #99ccff;width: 2px;} 
.top{background-image: url(bg2.gif);background-position: center -145px;background-repeat: repeat-x;padding-left: 5px;margin-top: 5px;width: 730px;float: left;margin-left: 8px;/*border: 1px solid #e8f3fd;*/border-top: 1px solid #99ccff;/*background-color: #e8f3fd;*/padding-bottom: 5px;} 
.top h1{font-family: arial, helvetica, sans-serif;font-size: 15px;text-indent: 5px;} 
.top li{float: left;width: 48%;/*background-color: #e8f3fd;height: 20px;*/} 
.belong_topic{margin-left: 15px;text-align: center;font-size: 14px;} 
#article{margin-left: 10px;width: 700px;margin-top: 20px;word-break: break-all;overflow: scroll !important;overflow: default;float: left;background-color: #FAFAFA;} 
#copyright{width: 700px;margin-left: 20px;background-color: #F7F7F7;color: #8B8B8B;padding: 10px;} 
#bd_more{display: none;} 
#page_p_div{width: 100%;padding: auto;text-align: center;} 
#page{margin: 0 auto;} 
/* 
#i_1{background-color: #fdf7ff;} 
#i_1 li{background-color: #fdf7ff;} 
#i_1 li{color: #333;} 
#i_1 li a{color: #333;}*/#i_1 .list2{border-top: 1px solid #cc00ff;background-color: #ccccff;} 
#i_1 .list2 h1{color: #333;} 
#i_1 h3 a{color: #333;}

| | | |

拓展学习：9个CSS在线格式化优化压缩工具

1. Online CSS Optimizer /在线CSS优化

该在线工具用于精简和压缩样式表的文件大小，优化后的代码将完全是混乱的，支持输入URL，提交文件和直接输入进行压缩。

2. CSS Compressor/CSS压缩

作用同上，但这个工具拥有非常详细的压缩选项，它包含基本模式和高级模式。

在基本模式下, 你可以选择压缩模式: 轻度，标准和高度。最高模式压缩后的文件最小，但同时可读性也就最低，甚至压缩后就出问题也可能，以此类推。还可以选择CSS注释代码的处理: 不处理注释，清除所有注释或限定注释字符数。

在高级模式下，还可以对空白，Tab，新行等等进行选择处理。

3. CleanCSS / CSS格式化和优化工具

基于 CssTidy 的一款在线CSS优化工具，既可以格式化CSS代码，也可以优化CSS减少CSS文件大小，包含非常详细的选项设置。比如选择器和属性的排序，大小写转换等等。

4. CSS Analyzer / CSS有效性分析工具

检查样式表的有效性，验证样式表是否符合 W3c 标准，同时进行颜色对比测试和确保尺寸的单位(W3C的Guideline 3.4 建议使用相对而非绝对单位，虽然px是相对单位，但是最终的字体大小却取决于输出介质，所以建议是使用百分比和em等尺寸单位。)