Hello xin chào các bạn, chào mừng các bạn đã đến với trang Bảy Sắc IT. Hôm nay mình sẽ share code nén css cho các bạn, lần trước mình cũng đã có share code nén css các bạn cũng có thể xem lại bài viết đó ở link phía bên dưới.

• http://baysacit.blogspot.com/2018/10/share-code-cong-cu-nen-css-cho.html

Đơn giản bạn chỉ cần tạo trang tĩnh mới, copy code bên dưới dán vào, xuất bản trang là xong!

<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>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL7JT7Hs4bvny65Rh6SFkgs_CHCzmPbOYzertw3MUAeeXxjoqFfx1wLONL7zFVNnap0URIZlWD3MkrkrMCc8k7QDJElaG-3D1mhMBS_2leZKVLLyyz2zZfpTT5wieXpiiNA3LmK5XIaJk/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 

Nguồn: https://www.thichnet.com/