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>界面显示如下图所示
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
