CSS代碼格式化和壓縮的方法與技巧

第一步：需要掌握css的縮寫技巧
參考下面的文章即可
CSS縮寫最佳化CSS檔案的體積
CSS常用屬性縮寫執行個體[推薦]
第二步：用css線上格式化與壓縮公用程式
第三步：測試，看看經過壓縮後的css檔案，會不會導致頁面變形等問題，一般情況下不會，不排除特殊情況。別忘了備份樣式檔案啊。

下面是一般用於css壓縮的代碼，一般情況下，喜歡指令碼的朋友看下。具體的應用上面的兩部即可。

<meta name="Generator" content="EditPlus"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><br />CSS代碼格式化和加密化<br /><hr /><textarea name="" rows="" cols="" style="width:600px;height:300px;" id="code"><br />/*請將CSS代碼複製到這裡，下面是樣本*/<br />input,button{<br />height:20px;background-color: #ffffff;/*border:1px solid #333333;*/<br />}<br />textarea{background-color: #ffffff;border: #3872b4 1px solid;}<br />select{<br />height:20px;font-size: 12px;background-color: #ffffff;border:1px solid #333333;<br />}<br />a{<br />/*color:#794820;color:#000000;*/color:#004f8a;text-decoration: none;text-transform: capitalize;<br />}<br />a:link {<br />text-decoration: none;<br />}<br />a:visited {<br />text-decoration: none;<br />}<br />.input{border: #3872b4 1px solid;height:20px;line-height:20px;font-size:12px;}<br />#result_dao{<br />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;}<br />#content{<br />white-space: pre;<br />}<br />/***rss***/<br />.rss_b{/*border:1px solid #99ccff;*/ padding:1px;line-height:18px;font-size:12px;width:95px;height:18px;text-align:center}<br />.rss_l{border:1px solid #99ccff;background:#99ccff;margin:0px;margin-right:3px;padding-left:2px;padding-right:2px;color:#ffffff;}<br />.rss_a{border:1px solid #99ccff;background:#e8f3fd;margin:0px;padding-left:1px;padding-right:1px;color:#ffffff;}<br />.rss_a:link{color:#99ccff;}<br />.rss_a:visited{color:#99ccff;}<br />.rss_a:hover{background-color: #e8f3fd;text-decoration: none;color:#008ed2;border:1px solid #99ccff;}<br />/********rank*********/<br />.mo_{<br />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;}<br />.mu_{<br />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;}<br />.ms_{<br />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;}<br />.mx_{<br />float:left;height:260px !important;height:250px;<br />}<br />#Hot_Div span{float:left;height:26px !important;height:27px;border-bottom:1px solid #99ccff;width:2px;<br />}<br />.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;}<br />.top h1{ font-family: arial, helvetica, sans-serif;font-size:15px;text-indent:5px;}<br />.top li{float:left;width:48%;/*background-color: #e8f3fd;height:20px;*/}<br />.belong_topic{<br />margin-left:15px;text-align:center;font-size:14px;<br />}<br />#article{<br />margin-left:10px;width:700px;margin-top:20px;word-break:break-all;overflow:scroll !important;overflow:default;float:left;background-color: #FAFAFA;<br />}<br />#copyright{width:700px;margin-left:20px;background-color: #F7F7F7;color:#8B8B8B;padding:10px;}<br />#bd_more{display:none;}<br />#page_p_div{width:100%;padding:auto;text-align: center;}<br />#page{margin:0 auto;}<br />/*<br />#i_1{background-color:#fdf7ff;}<br />#i_1 li{background-color:#fdf7ff;}<br />#i_1 li{color:#333;}<br />#i_1 li a{color:#333;}<br />*/<br />#i_1 .list2{border-top:1px solid #cc00ff;background-color: #ccccff;}<br />#i_1 .list2 h1{color:#333;}<br />#i_1 h3 a{color:#333;} </p><p><input type="submit" onclick="$('code').value = CSSdecode($('code').value);" value="格式化"> | <input type="submit" onclick="$('code').value = CSSencode($('code').value);" value="加密化">