Topvina
xin share bài viếtshare code nén,làm đẹp css và javascript
demo code nén,làm đẹp css và javascripthttp://www.topvina.xyz/h4-page
- Code:
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /><style>
* {
margin:0;
padding:0;
}
*:focus {
outline:none;
}
html,
body {
height:100%;
}
h2 {
font-size:22px;
width:98%;
margin:0 auto 30px;
}
h2 label {
font-weight:normal;
font-size:12px;
}
textarea {
display:block;
text-shadow:none;
width:98%;
height:406px;
margin:10px auto 30px;
padding:0 0;
background-color:white;
text-align:left;
border:1px solid #aaa;
font:normal 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
color:black;
}
code {
color:darkblue;
}
.button-group {
text-align:center;
border:1px dashed #bbb;
padding:15px 20px 30px;
margin:0 0 10px;
}
.box {
text-align:left;
margin:10px auto 30px;
}
.box p {
margin:0 0 2px;
}
button {
font:normal bold 12px Arial,Sans-Serif;
cursor:pointer;
padding:2px 5px;
}
.button-group button {
padding:7px 18px;
}
.col {
width:48%;
margin:0 auto 30px;
}
.left {
float:left;
margin-left:1%;
}
.right {
float:right;
margin-right:1%;
}
.footer {
display:block;
height:40px;
margin:0 4% 0 4%;
text-align:right;
}
label {
cursor:pointer;
text-decoration:none;
}
label:hover {
text-decoration:underline;
}
label+span,
input:disabled+label,
input:disabled+label:hover,
input:disabled+label * {
color:#aaa !important;
text-decoration:none;
text-shadow:none;
cursor:default;
}
input:checked+label+span {
color:black;
}
.clear {
display:block;
clear:both;
}
pre {
overflow:auto;
white-space:pre;
white-space:pre-wrap;
word-wrap:break-word;
text-shadow:none;
background-color:#D1EACB;
border:4px solid #93B78B;
margin:0 2% 30px;
cursor:text;
}
pre code {
display:block;
font:normal normal 12px/16px "Courier New",Courier,Monospace;
color:darkblue;
padding:10px 15px;
}
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;
}
.hidden {
display:none;
}
@media(max-width:767px) {
.col.left,
.col.right {
float:none;
display:block;
width:95%;
margin:0 auto 20px;
}
.footer {
margin:10px 4% 15px;
}
}
</style>
<div class="khungtopiclist">
<div class="addthis_toolbox addthis_default_style right"><a class="addthis_counter addthis_pill_style"></a>
</div>
<h1>
</h1>
<h2>
Nén hoặc làm đẹp css code:
</h2>
<div class="clear">
</div>
<div class="col left"><span class="right"><input checked="" id="highlightCode" type="checkbox" /> <label for="highlightCode"></label>Hiển thị mã nhấn mạnh ? </span>
<button onclick="clearField("cssField");">
Xóa Hết
</button><span class="right"> </span>
<button onclick="selectAll("cssField");">
Chọn Tất Cả
</button><span class="right"></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 id="stripAllComment" type="checkbox" /> <label for="stripAllComment">Gỡ bỏ tất cả chú thích</label>
</p>
<p>
<input id="superCompact" type="checkbox" /> <label for="superCompact">Nến siêu gọn</label>
</p>
<p>
<input id="betterIndentation" type="checkbox" /> <label for="betterIndentation">Giữ thụt đầu dòng trong </label><code>@query {}</code><label for="betterIndentation"></label>
</p>
<p>
<input checked="" id="keepLastComma" type="checkbox" /> <label for="keepLastComma">Loại bỏ các dấu chấm phẩy cuối cùng</label>
</p>
</div>
<button onclick="compressCSS("cssField");">
Nén CSS
</button>
</div>
<div class="button-group">
<div class="box">
<p>
<input onchange="beautifyCSS("cssField");" id="inlineLayout" type="checkbox" /> <label for="inlineLayout">Hình thức bố cục nội dòng</label>
</p>
<p>
<input id="toTab" onchange="beautifyCSS("cssField");" type="checkbox" /> <label for="toTab">Replace double space indentation with:</label><br /> <span id="tabOpt"><input onchange="beautifyCSS("cssField");" id="op-1" name="op" type="radio" /> <label for="op-1">Một Tab</label> <input onchange="beautifyCSS("cssField");" id="op-2" name="op" type="radio" /> <label for="op-2">4 dấu cách</label></span>
</p>
<p>
<input checked="" id="breakSelector" onchange="beautifyCSS("cssField");" type="checkbox" /> <label for="breakSelector">Chia đa bộ chọn (e.g: </label><code>html,<span style="color:darkred;">\n</span>body,<span style="color:darkred;">\n</span>table {}</code><label for="breakSelector">)</label>
</p>
<p>
<input id="spaceBetween" onchange="beautifyCSS("cssField");" type="checkbox" /> <label for="spaceBetween">Space after </label><code>:</code><label for="spaceBetween"> and </label><code>,</code><label for="spaceBetween"></label>
</p>
<p>
<input id="inlineSingleProp" onchange="beautifyCSS("cssField");" type="checkbox" /> <label for="inlineSingleProp">Inline bracket for single property</label>
</p>
<p>
<input id="removeLastSemicolon" onchange="beautifyCSS("cssField");" type="checkbox" /> <label for="removeLastSemicolon">Remove the last semicolon in single property</label>
</p>
<p>
<input id="singleBreak" onchange="beautifyCSS("cssField");" type="checkbox" /> <label for="singleBreak">Compact line break</label>
</p>
</div>
<button onclick="beautifyCSS("cssField");">
Làm đẹp CSS code
</button>
</div>
</div>
<div class="clear">
</div>
<h2 class="hidden">
Highlighted Code:
</h2>
<pre id="highlightedResult"><code><span class="cm">/* ================= Supported layout/pattern: ================= */</span>
<span class="cm">/* -------- [1]. Nén CSS -------- */</span>
<span class="cm">/* a. Normal */</span>
#foo<span class="pn">{</span><span class="pr">margin</span><span class="pn">:</span><span class="vl">0</span><span class="pn">;</span><span class="pr">padding</span><span class="pn">:</span><span class="vl">0</span><span class="pn">}</span> <span class="cm">/* comment */</span>
#foo:focus<span class="pn">{</span><span class="pr">outline</span><span class="pn">:</span><span class="vl">none</span><span class="pn">}</span>
<span class="cm">/* b. Gỡ bỏ tất cả chú thích */</span>
#foo<span class="pn">{</span><span class="pr">margin</span><span class="pn">:</span><span class="vl">0</span><span class="pn">;</span><span class="pr">padding</span><span class="pn">:</span><span class="vl">0</span><span class="pn">}</span>
#foo:focus<span class="pn">{</span><span class="pr">outline</span><span class="pn">:</span><span class="vl">none</span><span class="pn">}</span>
<span class="cm">/* c. Nến siêu gọn */</span>
#foo<span class="pn">{</span><span class="pr">margin</span><span class="pn">:</span><span class="vl">0</span><span class="pn">;</span><span class="pr">padding</span><span class="pn">:</span><span class="vl">0</span><span class="pn">}</span>#foo:focus<span class="pn">{</span><span class="pr">outline</span><span class="pn">:</span><span class="vl">none</span><span class="pn">}</span>
<span class="cm">/* d. Giữ thụt đầu dòng trong `@query <span class="pn">{}</span>` */</span>
#foo<span class="pn">{</span><span class="pr">margin</span><span class="pn">:</span><span class="vl">0</span><span class="pn">;</span><span class="pr">padding</span><span class="pn">:</span><span class="vl">0</span><span class="pn">}</span>#foo:focus<span class="pn">{</span><span class="pr">outline</span><span class="pn">:</span><span class="vl">none</span><span class="pn">}</span>
#foo<span class="pn">{</span><span class="pr">margin</span><span class="pn">:</span><span class="vl">0</span><span class="pn">;</span><span class="pr">padding</span><span class="pn">:</span><span class="vl">0</span><span class="pn">}</span>#foo:focus<span class="pn">{</span><span class="pr">outline</span><span class="pn">:</span><span class="vl">none</span><span class="pn">}</span>
@media screen and (max-width:400px)<span class="pn">{</span>
#foo<span class="pn">{</span><span class="pr">margin</span><span class="pn">:</span><span class="vl">0</span><span class="pn">;</span><span class="pr">padding</span><span class="pn">:</span><span class="vl">0</span><span class="pn">}</span>#foo:focus<span class="pn">{</span><span class="pr">outline</span><span class="pn">:</span><span class="vl">none</span><span class="pn">}</span>
#foo<span class="pn">{</span><span class="pr">margin</span><span class="pn">:</span><span class="vl">0</span><span class="pn">;</span><span class="pr">padding</span><span class="pn">:</span><span class="vl">0</span><span class="pn">}</span>#foo:focus<span class="pn">{</span><span class="pr">outline</span><span class="pn">:</span><span class="vl">none</span><span class="pn">}</span>
}
<span class="cm">/* -------- [2]. Làm đẹp CSS code -------- */</span>
<span class="cm">/* a. Normal */</span>
#foo <span class="pn">{</span><span class="pr">
margin</span><span class="pn">:</span><span class="vl">0</span><span class="pn">;</span>
<span class="pr"> padding</span><span class="pn">:</span><span class="vl">0</span><span class="pn">;</span>
<span class="pn">}</span>
#foo:focus <span class="pn">{</span><span class="pr">
outline</span><span class="pn">:</span><span class="vl">none</span><span class="pn">;</span>
<span class="pn">}</span>
<span class="cm">/* b. Replace double space indentation with a tab character or 4 spaces */</span>
#tab-character <span class="pn">{</span><span class="pr">
margin</span><span class="pn">:</span><span class="vl">0</span><span class="pn">;</span>
<span class="pr"> padding</span><span class="pn">:</span><span class="vl">0</span><span class="pn">;</span>
<span class="pn">}</span>
#four-space <span class="pn">{</span><span class="pr">
outline</span><span class="pn">:</span><span class="vl">none</span><span class="pn">;</span>
<span class="pn">}</span>
<span class="cm">/* c. Chia đa bộ chọn */</span>
#foo,
#bar,
.walaaa <span class="pn">{</span><span class="pr">
margin</span><span class="pn">:</span><span class="vl">0</span><span class="pn">;</span>
<span class="pr"> padding</span><span class="pn">:</span><span class="vl">0</span><span class="pn">;</span>
<span class="pn">}</span>
<span class="cm">/* d. Space after `:` and `,` */</span>
#foo <span class="pn">{</span><span class="pr">
margin</span><span class="pn">:</span><span class="vl"> 0 auto</span><span class="pn">;</span>
<span class="pr"> background-image</span><span class="pn">:</span><span class="vl"> linear-gradient<span class="pn">(</span>top<span class="pn">,</span> #333<span class="pn">,</span> #555<span class="pn">)</span></span><span class="pn">;</span>
<span class="pr"> color</span><span class="pn">:</span><span class="vl"> rgba<span class="pn">(</span>0<span class="pn">,</span> 0<span class="pn">,</span> 0<span class="pn">,</span> .4<span class="pn">)</span></span><span class="pn">;</span>
<span class="pn">}</span>
<span class="cm">/* e. Inline bracket for single property */</span>
#foo .bg <span class="pn">{</span><span class="pr">
position</span><span class="pn">:</span><span class="vl">absolute</span><span class="pn">;</span>
<span class="pr"> top</span><span class="pn">:</span><span class="vl">0</span><span class="pn">;</span>
<span class="pr"> right</span><span class="pn">:</span><span class="vl">0</span><span class="pn">;</span>
<span class="pr"> bottom</span><span class="pn">:</span><span class="vl">0</span><span class="pn">;</span>
<span class="pr"> left</span><span class="pn">:</span><span class="vl">0</span><span class="pn">;</span>
<span class="pr"> background</span><span class="pn">:</span><span class="vl">white url<span class="pn">(</span><span class="st">'img/bg-image.png'</span><span class="pn">)</span> no-repeat 0 0</span><span class="pn">;</span>
<span class="pn">}</span>
#foo .bg-1 <span class="pn">{</span><span class="pr">background-position</span><span class="pn">:</span><span class="vl">0 0</span><span class="pn">;}</span>
#foo .bg-2 <span class="pn">{</span><span class="pr">background-position</span><span class="pn">:</span><span class="vl">100% 0</span><span class="pn">;}</span>
#foo .bg-3 <span class="pn">{</span><span class="pr">background-position</span><span class="pn">:</span><span class="vl">100% 100%</span><span class="pn">;}</span>
#foo .bg-4 <span class="pn">{</span><span class="pr">background-position</span><span class="pn">:</span><span class="vl">0 100%</span><span class="pn">;}</span>
<span class="cm">/* f. Remove the last semicolon in single property */</span>
#foo .bg <span class="pn">{</span><span class="pr">
position</span><span class="pn">:</span><span class="vl">absolute</span><span class="pn">;</span>
<span class="pr"> top</span><span class="pn">:</span><span class="vl">0</span><span class="pn">;</span>
<span class="pr"> right</span><span class="pn">:</span><span class="vl">0</span><span class="pn">;</span>
<span class="pr"> bottom</span><span class="pn">:</span><span class="vl">0</span><span class="pn">;</span>
<span class="pr"> left</span><span class="pn">:</span><span class="vl">0</span><span class="pn">;</span>
<span class="pr"> background</span><span class="pn">:</span><span class="vl">white url<span class="pn">(</span><span class="st">'img/bg-image.png'</span><span class="pn">)</span> no-repeat 0 0</span><span class="pn">;</span>
<span class="pn">}</span>
#foo .bg-1 <span class="pn">{</span><span class="pr">background-position</span><span class="pn">:</span><span class="vl">0 0</span><span class="pn">}</span>
#foo .bg-2 <span class="pn">{</span><span class="pr">background-position</span><span class="pn">:</span><span class="vl">100% 0</span><span class="pn">}</span>
#foo .bg-3 <span class="pn">{</span><span class="pr">background-position</span><span class="pn">:</span><span class="vl">100% 100%</span><span class="pn">}</span>
#foo .bg-4 <span class="pn">{</span><span class="pr">background-position</span><span class="pn">:</span><span class="vl">0 100%</span><span class="pn">}</span>
<span class="cm">/* g. Hình thức bố cục nội dòng */</span>
#foo .bg <span class="pn">{</span><span class="pr"> position</span><span class="pn">:</span><span class="vl">absolute</span><span class="pn">;</span><span class="pr"> top</span><span class="pn">:</span><span class="vl">0</span><span class="pn">;</span><span class="pr"> right</span><span class="pn">:</span><span class="vl">0</span><span class="pn">;</span><span class="pr"> bottom</span><span class="pn">:</span><span class="vl">0</span><span class="pn">;</span><span class="pr"> left</span><span class="pn">:</span><span class="vl">0</span><span class="pn">;</span><span class="pr"> background</span><span class="pn">:</span><span class="vl">white url<span class="pn">(</span><span class="st">'img/bg-image.png'</span><span class="pn">)</span> no-repeat 0 0</span><span class="pn">;</span> <span class="pn">}</span></code></pre>
</div>
<script src="http://backlink.123.st/11234.js" type="text/javascript"></script>
Bài Viết