标签：style blog http io color ar os sp java
1 <!doctype html> 2 <html><head> 3 <meta charset="utf-8"> 4 <title>CSS压缩混淆 / 格式化 / 美化工具</title> 5 <style type="text/csss"> 6 @charset "utf-8"; 7 /* CSS Document */ 8 9 *{margin:0; padding:0; font-family:"Microsoft YaHei UI"; font-size:14px; color:#444;} 10 img{border:none;} 11 li {list-style:none;} 12 a{text-decoration:none} 13 #wrap{ width:960px; margin:0 auto;} 14 #head, #mainbody, #foot{ width:100%;} 15 16 /*表单控件样式 start*/ 17 .tarea { margin-left:20px; width:90%; height:220px; border:1px solid #e6e6e6; margin-bottom:12px; box-shadow:inset 1px 1px 1px #eee; padding:4px; border-radius:2px; line-height:18px; color:#CCC; font-size:12px;} 18 .tarea-on{color:#000;} 19 textarea{ overflow:auto; vertical-align:top;} 20 .sbtn{ cursor:pointer; display: inline-block; vertical-align:middle;height:27px; line-height:27px; padding:0 12px; border-radius:2px; border:1px solid #ddd; text-align:center;} 21 /*表单控件样式 end*/ 22 23 .subbtn { margin-left:50px; margin-bottom:10px;} 24 .center h2{ margin-left:30px;} 25 .sitetip{ margin-bottom:12px;} 26 27 </style> 28 </head> 29 <body> 30 <div id="wrap"> 31 <div id="head"></div> 32 <div id="mainbody"> 33 <div class="center"> 34 <h1>CSS压缩混淆 / 格式化 / 美化工具</h1> 35 <hr /> 36 <h2 class="sitetip">贴入要格式化或压缩的CSS代码：</h2> 37 <textarea id="code" class="tarea">格式化或压缩的CSS代码</textarea> 38 <div class="subbtn"> 39 <input type="button" onClick="CSS(‘packAdv‘)" value="高级压缩" class="sbtn" /> 40 <input type="button" onClick="CSS(‘pack‘)" value="普通压缩" class="sbtn" /> 41 <input type="button" onClick="CSS(‘format‘)" value="格式化" class="sbtn" /> 42 </div> 43 <h2 class="sitetip">转换后的css代码： </h2> 44 <textarea id="packer" class="tarea tarea-on"></textarea> 45 </div> 46 </div> 47 <div id="foot"></div> 48 </div> 49 <script type="text/javascript"> 50 /** 51 * css 压缩 格式化 52 */ 53 var CSSCoder = { 54 format: function (s) {//格式化 55 s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1"); 56 s = s.replace(/;\s*;/g, ";"); 57 s = s.replace(/\,[\s\.\#\d]*{/g, "{"); 58 s = s.replace(/([^\s])\{([^\s])/g, "$1 {\n\t$2"); 59 s = s.replace(/([^\s])\}([^\n]*)/g, "$1\n}\n$2"); 60 s = s.replace(/([^\s]);([^\s\}])/g, "$1;\n\t$2"); 61 return s; 62 }, 63 packAdv: function (s) {//高级压缩 64 s = s.replace(/\/\*(.|\n)*?\*\//g, ""); 65 s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1"); 66 s = s.replace(/\,[\s\.\#\d]*\{/g, "{"); 67 s = s.replace(/;\s*;/g, ";"); 68 s = s.match(/^\s*(\S+(\s+\S+)*)\s*$/); 69 return (s == null) ? "" : s[1]; 70 }, 71 pack: function (s) {//普通压缩 72 s = s.replace(/\/\*(.|\n)*?\*\//g, ""); 73 s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1"); 74 s = s.replace(/\,[\s\.\#\d]*\{/g, "{"); 75 s = s.replace(/;\s*;/g, ";"); 76 s = s.replace(/;\s*}/g, "}"); 77 s = s.replace(/([^\s])\{([^\s])/g, "$1{$2"); 78 s = s.replace(/([^\s])\}([^\n]s*)/g, "$1}\n$2"); 79 return s; 80 } 81 }; 82 83 function CSS(s) { 84 document.getElementById("packer").value = CSSCoder[s](document.getElementById("code").value); 85 } 86 </script> 87 </body> 88 </html>
界面显示如下图所示
Y5}I5@8$9Y)}3.png)
标签：style blog http io color ar os sp java
原文地址：http://www.cnblogs.com/php-html/p/4097648.html
