複製代碼 代碼如下:
var lCSSCoder={
format : function(s){//格式化代碼
s=s.replace(/\s*([\{\}\:\;\,])\s*/g,"$1");
s=s.replace(/\,[\s\.\#\d]*{/g,"{");
s=s.replace(/([^\s])\{([^\s])/g,"$1 {\n\t$2");
s=s.replace(/([^\s])\}([^\n]*)/g,"$1\n}\n$2");
s=s.replace(/([^\s]);([^\s\}])/g,"$1;\n\t$2");
s=s.replace(/;\s*;/g,";");//清除連續分號
return s;
},
pack :function(s){//壓縮代碼
s=s.replace(/\/\*(.|\n)*?\*\//g,"");//刪除注釋
s=s.replace(/\s*([\{\}\:\;\,])\s*/g,"$1");
s=s.replace(/\,[\s\.\#\d]*\{/g,"{");//容錯處理
s=s.replace(/;\s*;/g,";");//清除連續分號
return s;
}
};
示範代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <title> lCSSCoder: CSS代碼壓縮與格式化</title> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <meta name="author" content="楓岩,CNLEI" /> <meta name="copyright" content="cnlei.y.l@gmail.com" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> body {text-align:center;} textarea {border-width:1px;margin:0 5px;} </style> <script type="text/javascript"> var lCSSCoder={ format : function(s){//格式化代碼 s=s.replace(/\s*([\{\}\:\;\,])\s*/g,"$1"); s=s.replace(/;\s*;/g,";");//清除連續分號 s=s.replace(/\,[\s\.\#\d]*{/g,"{"); s=s.replace(/([^\s])\{([^\s])/g,"$1 {\n\t$2"); s=s.replace(/([^\s])\}([^\n]*)/g,"$1\n}\n$2"); s=s.replace(/([^\s]);([^\s\}])/g,"$1;\n\t$2"); return s; }, pack :function(s){//壓縮代碼 s=s.replace(/\/\*(.|\n)*?\*\//g,"");//刪除注釋 s=s.replace(/\s*([\{\}\:\;\,])\s*/g,"$1"); s=s.replace(/\,[\s\.\#\d]*\{/g,"{");//容錯處理 s=s.replace(/;\s*;/g,";");//清除連續分號 s = s.match(/^\s*(\S+(\s+\S+)*)\s*$/);//去掉首尾空白 return (s == null)?"": s[1]; } }; </script> </head> <body> <table align="center" cellspacing="0" cellpadding="0"> <tr> <td>原始代碼：<textarea id="Code_1" rows="25" cols="50">/*PageHead*/ #PageHead {float:left;padding:3px 0;border-bottom:1px solid #b0bec7;margin-bottom:6px;} #hCity li {float:left;padding:0 10px 0 0;} #hCity li.fst {padding:0;} #hRight { float:right;padding:0 5px 0 20px; background:url(img/ico_home.gif) no-repeat 0 50%;} .SubPage #hRight { background-image:url(img/ico_favorite.gif);} /*PageBody*/ #PageBody {float:left;padding:4px 0 0 0;} .SCol {float:left;width:174px;} .MCol {float:right;width:678px;overflow:hidden; } #Logo {height:66px;margin:0;padding:0;} /*MailLogin*/ #MailLogin {height:32px;} #MailLogin li {float:left;} #MailLogin li.txt {line-height:20px;} #MailLogin li.inp {padding:0 2px;} #MailLogin li.inp input { margin:0;padding:0 4px;border:1px solid #7a9dbb;font:bold 12px/18px tahoma,Geneva,Arial,sans-serif;height:18px; } #MailLogin li.inp input.notClicked {color:#ccc;font-weight:normal;} #MailLogin li.sel {padding:1px 10px 0 0;} #MailLogin li.btn {padding:1px 12px 0 5px;} </textarea></td> <td>轉換後：<textarea id="Code_2" rows="25" cols="50"></textarea></td> </tr> </table> <p><input type="button" value="格式化代碼" onclick="CSS('format');" /><input type="button" value="壓縮代碼" onclick="CSS('pack');"/></p> <script type="text/javascript"> <!-- function CSS(s){ document.getElementById("Code_2").value=lCSSCoder[s](document.getElementById("Code_1").value); } //--> </script> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
下面是雲棲社區的css格式化工具，喜歡的朋友也可以看看裡面的代碼
CSS代碼格式化 css在線壓縮工具
