Tạo trang nén và làm đẹp code CSS

Bài viết này sẽ hướng dẫn cho bạn cách tạo trang nén và làm đẹp code CSS. Nén sẽ giúp cho đoạn code được gọn hơn trong HTML. Code khi được làm đẹp sẽ dễ nhìn hơn cũng như dễ dàng sửa chữa
Tạo trang nén và làm đẹp code CSS
Ảnh trang nén và làm đẹp code CSS (ảnh bởi ThichNet)

Các bước thực hiện

Bước 1: Đăng nhập Blogger > Trang > Tạo trang mới
Bước 2: Dán đoạn code phía dưới vào trang vừa tạo (trang phải ở chế độ soạn HTML):

<style type="text/css"> .left{float:left;margin-left:1%} .col{width:48%;margin:0 auto 30px;margin-left:auto} .right{float:right;margin-right:1%;margin-bottom:15px} .box p{margin:4px} label{cursor:pointer;text-decoration:none} textarea{display:block;text-shadow:none;width:98%;height:479px;margin:10px auto 30px;padding:0 5px;background-color:#e9f9e9;text-align:left;border:1px solid #47ae32;font:normal 14px/15px "Consolas","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;color:#555555} .button-group{text-align:center;border:1px solid #47ae32;padding:15px;margin:0 0 10px} .box{text-align:left;margin:10px auto 30px} pre{overflow:auto;white-space:pre;white-space:pre-wrap;word-wrap:break-word;text-shadow:none;background-color:#fff;border:2px groove #00ad62;margin:0 2% 30px;cursor:text;height:300px} pre .st{color:purple} pre .pr{color:brown} pre .vl{color:darkgreen} pre .pn{color:black} pre .im{color:red} pre .cm,pre .cm span{color:#666!important;font-style:italic;font-weight:normal} </style> <h2></h2> <div class="clear"></div><div class="col left"><span class="right"><input type="checkbox" checked="" id="highlightCode"> <label for="highlightCode">Hiển thị HighLight Code?</label> <button class="button" onclick="clearField(&quot;cssField&quot;);">Clear</button> <button class="button" onclick="selectAll(&quot;cssField&quot;);">Sellect All</button></span><span class="clear"></span><textarea autofocus="" placeholder="Paste your CSS code here..." id="cssField" spellcheck="false"></textarea></div><div class="col right"><div class="button-group"><div class="box"><p><input type="checkbox" id="stripAllComment"> <label for="stripAllComment">Xóa bỏ tất cả chú thích</label></p><p><input type="checkbox" id="superCompact"> <label for="superCompact">Nén siêu gọn</label></p><p><input type="checkbox" id="betterIndentation"> <label for="betterIndentation">Giữ thụt đầu dòng trong <code>@query {}</code></label></p><p><input type="checkbox" checked="" id="keepLastComma"> <label for="keepLastComma">Xóa bỏ các dấu chấm phẩy cuối cùng</label></p></div><button class="button" onclick="compressCSS(&quot;cssField&quot;);">Compressor CSS</button></div><div class="button-group"><div class="box"><p><input type="checkbox" onchange="beautifyCSS(&quot;cssField&quot;);" id="inlineLayout"> <label for="inlineLayout">Bố cục theo dòng</label></p><p><input type="checkbox" id="toTab" onchange="beautifyCSS(&quot;cssField&quot;);"> <label for="toTab">Replace double space indentation with:</label><br>&emsp;&nbsp;<span id="tabOpt"><input type="radio" onchange="beautifyCSS(&quot;cssField&quot;);" id="op-1" name="op" disabled=""> <label for="op-1">Một Tab</label> <input type="radio" onchange="beautifyCSS(&quot;cssField&quot;);" id="op-2" name="op" disabled=""> <label for="op-2">4 dấu cách</label></span></p><p><input type="checkbox" checked="" id="breakSelector" onchange="beautifyCSS(&quot;cssField&quot;);"> <label for="breakSelector">Chia đa bộ (e.g: <code>html,<span style="color:darkred;">\n</span>body,<span style="color:darkred;">\n</span>table {}</code>)</label></p><p><input type="checkbox" id="spaceBetween" onchange="beautifyCSS(&quot;cssField&quot;);"> <label for="spaceBetween">Thêm dấu cách sau <code>:</code> và <code>,</code></label></p><p><input type="checkbox" id="inlineSingleProp" onchange="beautifyCSS(&quot;cssField&quot;);"> <label for="inlineSingleProp">Chế độ một dòng cho thuộc tính đơn</label></p><p><input type="checkbox" id="removeLastSemicolon" onchange="beautifyCSS(&quot;cssField&quot;);"> <label for="removeLastSemicolon">Loại bỏ dấu chấm phẩy cuối cùng cho chế độ một dòng</label></p><p><input type="checkbox" id="singleBreak" onchange="beautifyCSS(&quot;cssField&quot;);"> <label for="singleBreak">Loại bỏ dòng trắng</label></p></div><button class="button" onclick="beautifyCSS(&quot;cssField&quot;);">Beautifier Code</button></div></div><div class="clear"></div><h2 style="display: block; clear:both">Kết quả:</h2><pre id="highlightedResult" style="display: block;"><code>#foo <span class="pn">{</span><span class="pr"> width</span><span class="pn">:</span><span class="vl">560px</span><span class="pn">;</span> <span class="pr"> background</span><span class="pn">:</span><span class="vl">#ffffff url<span class="pn">(</span>http<span class="pn">:</span>//4.bp.blogspot.com/-agZncgR_66Q/U5P6jOLGXWI/AAAAAAAAPnk/lJfj2KGcOAc/s1600/-04.jpg<span class="pn">)</span> repeat</span><span class="pn">;</span> <span class="pr"> border-collapse</span><span class="pn">:</span><span class="vl">collapse</span><span class="pn">;</span> <span class="pr"> color</span><span class="pn">:</span><span class="vl">white</span><span class="pn">;</span> <span class="pn">}</span> .foo td, .foo th <span class="pn">{</span><span class="pr"> border</span><span class="pn">:</span><span class="vl">2px solid white</span><span class="pn">;</span> <span class="pr"> padding</span><span class="pn">:</span><span class="vl">5px</span><span class="pn">;</span> <span class="pn">}</span></code></pre></div> <script type="text/javascript"> /* CSS Compressor & Beautifier Script by Taufik Nurrohman, https://plus.google.com/108949996304093815163/posts */ function get(id) { return document.getElementById(id); } var hc = get('highlightCode'), sa = get('stripAllComment'), sc = get('superCompact'), cm = get('keepLastComma'), bi = get('betterIndentation'), bs = get('breakSelector'), tt = get('toTab'), to = get('tabOpt').getElementsByTagName('input'), sb = get('spaceBetween'), ip = get('inlineSingleProp'), rs = get('removeLastSemicolon'), il = get('inlineLayout'), si = get('singleBreak'), hr = get('highlightedResult'), rt = document.getElementsByTagName('h2')[1]; /* Syntax Highlighter */ function highlightCode(el) { if (hc.checked) { var t = el.innerHTML; t = t.replace(/\{([\s\S]+?)\}/g, function(m) { return m.replace(/\'(.*?)\'/g, "<span class='st'>\'$1\'</span>").replace(/\"(.*?)\"/g, "<span class='st'>\"$1\"</span>").replace(/(\{|\n|;)?(.[^\{]*?):(.[^\{]*?)(;|\})/g, "$1<span class='pr'>$2</span>:<span class='vl'>$3</span>$4").replace(/<span class='pr'>\{/g, "{<span class='pr'>"); }); t = t.replace(/&lt;(.*?)('|")(.*?)('|")&gt;/g, function(m) { return m.replace(/'(.*?)'/g, "<span class='vl'>\'$1\'</span>").replace(/"(.*?)"/g, "<span class='vl'>\"$1\"</span>") }); t = t.replace(/\{([\s\S]+?)\}/g, function(m) { return m.replace(/([\(\)\{\}\[\]\:\;\,]+)/g, "<span class='pn'>$1</span>").replace(/\!important/ig, "<span class='im'>!important</span>"); }); t = t.replace(/\/\*([\w\W]+?)\*\//gm, "<span class='cm'>/*$1*/</span>"); el.innerHTML = '<code>' + t + '</code>'; hr.style.display = "block"; rt.style.display = "block"; } else { hr.style.display = "none"; rt.style.display = "none"; } } /* CSS Compressor */ function compressCSS(id) { var cf = get(id), iq = /@(media|-w|-m|-o|keyframes|page)(.*?)\{([\s\S]+?)?\}\}/ig, v = cf.value, ln = v.length; v = (sa.checked || sc.checked) ? v.replace(/\/\*[\w\W]*?\*\//gm, "") : v.replace(/(\n+)?(\/\*[\w\W]*?\*\/)(\n+)?/gm, "\n$2\n"); v = v.replace(/([\n\r\t\s ]+)?([\,\:\;\{\}]+?)([\n\r\t\s ]+)?/g, "$2"); v = (sc.checked) ? v : v.replace(/\}(?!\})/g, "}\n"); v = (bi.checked) ? v.replace(iq, function(m) { return m.replace(/\n+/g, "\n "); }) : v.replace(iq, function(m) { return m.replace(/\n+/g, ""); }); v = (bi.checked && !sc.checked) ? v.replace(/\}\}/g, "}\n}") : v; v = (bi.checked && !sc.checked) ? v.replace(/@(media|-w|-m|-o|keyframes)(.*?)\{/g, "@$1$2{\n ") : v; v = (cm.checked) ? v.replace(/;\}/g, "}") : v.replace(/\}/g,";}").replace(/;+\}/g,";}").replace(/\};\}/g,"}}"); v = v.replace(/\:0(px|em|pt)/ig, ":0"); v = v.replace(/ 0(px|em|pt)/ig, " 0"); //v = v.replace(/ +?(\>|\+|\~) +?/g,"$1"); v = v.replace(/\s+\!important/ig, "!important"); v = v.replace(/(^\n+|\n+$)/, ""); cf.value = v; hr.innerHTML = '\/\* ' + (ln - v.length) + ' of ' + ln + ' unused characters has been removed. \*\/\n' + v.replace(/</g, "&lt;").replace(/>/g, "&gt;"); highlightCode(hr); } /* CSS Beautifier */ function beautifyCSS(id) { sc.checked = false; sa.checked = false; bi.checked = false; compressCSS('cssField'); // Compress first... var bf = get(id), iq = /\n@(media|-w|-m|-o|keyframes|page)(.*?)\{([\s\S]+?)?\}\n\}/ig, // Inside `@query{}` v = bf.value; if (!il.checked) { v = v.split(';').join(';\n '); v = v.split('{').join(' {\n '); v = v.split('}').join(';\n}\n'); v = v.replace(/\}([\n\s;]+?)?\}/g, "}\n}"); v = (bs.checked) ? v.replace(/\n(.*?)\{/g, function(m) { return m.replace(/,/g, ",\n"); // Break multiple selectors }) : v; v = v.replace(/@([\s\S]+?)\{/g, function(m) { return m.replace(/,\n/g, ", "); }); v = v.replace(iq, function(m) { return m.replace(/\n/g, "\n ").replace(/\n\s+\n/g, "\n").replace(/\}\n+\s+\}/g, "}\n}"); }); } else { v = v.replace(/;/g, "; "); v = v.replace(/\{(.*?)\}/g, " { $1; }"); v = v.replace(/\}\}/g, "}\n}"); v = v.replace(iq, function(m) { return m.replace(/\n/g, "\n ").replace(/\n+\s+\n/g, "\n").replace(/\}\n\s+\}/g, "}\n}"); }) v = v.replace(/\{(.*?)\{(.*?):(.*?)\}\n/g, "{\n $1 { $2:$3}\n"); } v = v.replace(/\{\n ;\n\}|\{ ; \}/g, "{}"); // Empty selectors v = (sb.checked) ? v.replace(/\{([\s\S]+?)\}|\((.*?)\)/gm, function(m) { return m.replace(/(,|\:)/g, "$1 "); }) : v; v = (sb.checked) ? v.replace(/(.*?)\{/g, function(m) { return m.replace(/,/g, ", "); }) : v; v = v.replace(/\!important/g, " !important"); v = v.replace(/data: ?image(.*?);([\n\r\t\s]+)base64, ?/g, "data:image$1;base64,"); // Data URI Image v = v.replace(/\n\s+@(.*?)\{\n /g, "\n\n@$1{\n "); //v = v.replace(/(\>|\+|\~)/g," $1 "); v = (ip.checked) ? v.replace(/(.*){(\n\s+|\t)(.*)\:(.*);\n(\s+)?}/g, "$1{$3:$4;}") : v; v = (rs.checked) ? v.replace(/\{(.*?)\;(\s+)?\}/g, "{$1$2}") : v; v = (tt.checked && to[0].checked) ? v.split(/ /).join('\t') : v; v = (tt.checked && to[1].checked) ? v.split(/ /).join(' ') : v; v = (il.checked) ? v.replace(iq, function(m) { return m.replace(/\}/g, "} "); }) : v; v = (si.checked) ? v.replace(/(\}|\*\/)\n+/g, "$1\n").replace(/\/\*/g, "\n/*") : v.replace(/\*\/\n(.)/g, "*/\n\n$1"); v = v.replace(/(^\n+|\n+$)/, ""); bs.disabled = (il.checked) ? true : false; ip.disabled = (il.checked) ? true : false; tt.disabled = (il.checked) ? true : false; to[0].disabled = (tt.checked && !il.checked) ? false : true; to[1].disabled = (tt.checked && !il.checked) ? false : true; bf.value = v; hr.innerHTML = v.replace(/</g, "&lt;").replace(/>/g, "&gt;"); highlightCode(hr); } /* Clear the field value */ function clearField(id) { var fl = get(id); fl.value = ""; fl.focus(); } /* Select All */ function selectAll(id) { get(id).focus(); get(id).select(); } </script><!--Beautifier Script-->

Bước 3: Bấm xuất bản trang và xem thành quả.
Code by ThichNet

Bình luận

  1. Này đưa vào blog a sao đẹp zữ ko biết (xem thử nè)

    Trả lờiXóa
    Trả lời
    1. anh làm ẩn thanh cuộn nhỡ code dài thì sao a. e mới test code dài nó ko kéo xuống đc :v

      Xóa
  2. Hay qué
    .
    .
    .
    .
    .
    .
    .
    Chẳng thú vị xí nèo anh ạ

    Trả lờiXóa
  3. quá chất, lâu nay em bận ôn thi nên tt không đầy đủ, xin lỗi a <3 Sau kì thi này hứa sẽ tt đầy đủ cho admin

    Trả lờiXóa
  4. Đẹp đó em nhìn nó đơn giản nhưng chất đấy <3

    Trả lờiXóa

XEM NHIỀU TRONG TUẦN

Bạn có thể quan tâm