First step: Need to master the abbreviation of CSS skills
refer to the following article to
CSS abbreviations optimize the size of CSS files
CSS common attribute abbreviations [recommended]
Step two: Format and compress tools with CSS
Step three: Test, Look at the compressed CSS file, will not cause page distortion, and so on, under normal circumstances will not, do not exclude special circumstances. Don't forget to back up the style file.
The following is a general code for CSS compression, typically, a friend who likes to read a script. The specific application of the top two can be.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" > <ptml> <pead> <title>css Code formatting and encryption < /title> <meta name= "generator" content= "EditPlus" > <meta name= "Author" content= "" > <meta name= "Keywo RDS "Content=" "> <meta name=" Description "content=" "> </pead> <body> <script language=" Javascr IPT "> <!--function $ () {var elements = new Array (); for (var i = 0; i < arguments.length i++) {var element = Arguments[i]; if (typeof element = = ' String ') element = document.getElementById (element); if (arguments.length = = 1) return element; Elements.push (Element); return elements; function Cssencode (code) {code = code.replace (/\n/ig, '); Code = Code.replace (/(\s) {2,}/ig, ' $ '); Code = code.replace (/\t/ig, ""); Code = code.replace (/\n\}/ig, '} '); Code = code.replace (/\n\{\s*/ig, ' \{'); Code = Code.replace (/(\s) \s*\}/ig, ' $1\} '); Code = Code.replace (/(\s) \s*\{/ig, ' $1\{'); Code = Code.rePlace (/\{\s* (\s)/ig, ' \{$1 '); return code; function Cssdecode (code) {code = Code.replace (/(\s) {2,}/ig, ' $ '); Code = Code.replace (/(\s) \s*\{/ig, ' $1\n{'); Code = Code.replace (/\*\/(. [ ^\}\{]*)}/ig, ' \*\/\n$1} '); Code = code.replace (/\/\*/ig, ' \n\/\* '); Code = code.replace (/;\s* (\s)/ig, '; \n\t$1 '); Code = code.replace (/\}\s* (\s)/ig, ' \}\n$1 '); Code = code.replace (/\n\s*\}/ig, ' \n\} '); Code = code.replace (/\{\s* (\s)/ig, ' \{\n\t$1 '); Code = Code.replace (/(\s) \s*\*\//ig, ' $1\*\/'); Code = code.replace (/\*\/\s* ([^\}\{]\s)/ig, ' \*\/\n\t$1 '); Code = Code.replace (/(\s) \}/ig, ' $1\n\} '); Code = code.replace (/(\ n) {2,}/ig, ' \ n '); return code; //--> </script> CSS Code formatting and encryption <pr> <textarea name= "rows=" "cols=" "id=" code ">/* Please copy the CSS code here , here is an example * * input,button{height:20px;background-color: #ffffff;/*border:1px solid #333333; * * Textarea{background-colo R: #ffffff; border: #3872b4 1px solid;} select{height:20px;font-size:12px;background-color: #ffffff; border:1PX Solid #333333; a{/*color: #794820; color: #000000; */color: #004f8a; text-decoration:none;text-transform:capitalize; } a:link {text-decoration:none; } a:visited {text-decoration:none; }. Input{border: #3872b4 1px solid;height:20px;line-height:20px;font-size:12px;} #result_dao {border-right: #b3cad6 1px solid; padding-right:0px;border-top: #b3cad6 1px solid; padding-left:2px;font-si ze:12px; Float:left; padding-bottom:0px; MARGIN:2PX 0px; Border-left: #b3cad6 1px solid; padding-top:0px; Border-bottom: #b3cad6 1px solid; Background-color: #e6eff4; Width:100%;text-align:left;text-indent:20px;color: #333333;} #content {white-space:pre; /***rss***/. rss_b{/*border:1px solid #99ccff; * * Padding:1px;line-height:18px;font-size:12px;width:95px;height : 18px;text-align:center}. rss_l{border:1px solid #99ccff; background: #99ccff; margin:0px;margin-right:3px; Padding-left:2px;padding-right:2px;color: #ffffff;} . rss_a{border:1px solid #99ccff; background: #e8f3fd; margin:0px;p adding-left:1px;padding-right:1px;color: #ffffff;} . Rss_a:link{color: #99ccff;} . Rss_a:visited{color: #99ccff;} . Rss_a:hover{background-color: #e8f3fd; Text-decoration:none;color: #008ed2; border:1px solid #99ccff;} /********rank*********/. mo_{background-color: #ffffff; width:48px!important;width:50px;border:1px solid #99ccff; Cursor:pointer; text-align:center;font-size:12px;float:left;border-top:1px solid #99ccff; border-bottom:1px solid #99ccff; Text-decoration:underline;color: #cccccc;} . mu_{Background-color: #e8f3fd; width:48px!important;width:50px;cursor:pointer; text-align:center;font-size:12px; FLOAT:LEFT;BORDER:1PX solid #99ccff border-top:1px solid #ff9966 border-bottom:1px solid #99ccff text-decoration: underline;} . ms_{Background-color: #ffffff; border:1px solid #99ccff; border-top:1px solid #99ccff; border-bottom:1px solid #ffffff; width:48px!important;width:50px;height:25px!important;height:27px;cursor:default; Text-align:center;font-size:14px;line-height:25px;flOat:left;} . mx_{float:left;height:260px!important;height:250px; #Hot_Div span{float:left;height:26px!important;height:27px;border-bottom:1px solid #99ccff; width:2px; }. Top{background-image:url (bg2.gif); background-position:center-145px background-repeat:repeat-x;padding-left : 5px;margin-top:5px;width:730px;float:left;margin-left:8px;/*border:1px solid #e8f3fd; */border-top:1px Solid # 99ccff;/*background-color: #e8f3fd; */padding-bottom:5px;} . Top h1{Font-family:arial, Helvetica, sans-serif;font-size:15px;text-indent:5px;} . Top Li{float:left;width:48%;/*background-color: #e8f3fd height:20px;*/} belong_topic{margin-left:15px; text-align:center;font-size:14px; } #article {Margin-left:10px;width:700px;margin-top:20px;word-break:break-all;overflow:scroll!important;overflow :d Efault;float:left;background-color: #FAFAFA; } #copyright {width:700px;margin-left:20px;background-color: #F7F7F7; color: #8B8B8B;p adding:10px;} #bd_more {display:none;} #page_p_div {width:100%;p adDing:auto;text-align:center;} #page {margin:0 Auto;} /* #i_1 {background-color: #fdf7ff;} #i_1 li{background-color: #fdf7ff;} #i_1 li{color: #333;} #i_1 Li A{color: #333;} * * #i_1. list2{border-top:1px solid #cc00ff; Background-color: #ccccff;} #i_1. List2 h1{color: #333;} #i_1 h3 A{color: #333;} </textarea> <input type= "Submit" onclick= "$ (' code '). Value = Cssdecode ($ (' code '). Value);" value= "Format > | <input type= "Submit" onclick= "$ (' code '). Value = Cssencode ($ (' code '). Value);" value= "Encryption"/> </body> </ Html>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
