[原创]CSS代码格式化和加密化小工具

 

有时候为了节省带宽需要将CSS代码加密化，而有时候又需要将繁杂的CSS代码格式化以便于修改，于是我写了两个function来解决这个问题,可将下面文本框内代码复制另存为HTML文件即可.

 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< html >
< head >
< title > CSS代码格式化和加密化 -- by YoYo|yangmingsheng.cn  </ title >
< meta  name ="Generator"  content ="EditPlus" >
< meta  name ="Author"  content ="" >
< meta  name ="Keywords"  content ="" >
< meta  name ="Description"  content ="" >
</ head >
< body >
< script  language ="JavaScript" >
<!--
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;
}
// CSS代码格式化和加密化 -- by YoYo|yangmingsheng.cn
function  CSSencode(code)
{
code  =  code.replace( / / ig, '' );
code  =  code.replace( / (s){ 2 ,} / ig, ' $1 ' );
code  =  code.replace( / / ig, '' );
code  =  code.replace( / } / ig, ' } ' );
code  =  code.replace( / {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, ' $1 ' );
code  =  code.replace( / (S)s * { / ig, ' $1 { ' );
code  =  code.replace( / * / (.[ ^ }{] * )} / ig, ' */ $1} ' );
code  =  code.replace( / / */ ig, ' /* ' );
code  =  code.replace( / ;s * (S) / ig, ' ; $1 ' );
code  =  code.replace( / }s * (S) / ig, ' } $1 ' );
code  =  code.replace( / s * } / ig, ' } ' );
code  =  code.replace( / {s * (S) / ig, ' { $1 ' );
code  =  code.replace( / (S)s * * // ig,'$1*/');
code  =  code.replace( / * / s * ([ ^ }{]S) / ig, ' */ $1 ' );
code  =  code.replace( / (S)} / ig, ' $1 } ' );
code  =  code.replace( / ( ){ 2 ,} / ig, ' ' );
return  code;
}
// -->
</ script >
CSS代码格式化和加密化 -- by YoYo|yangmingsheng.cn
< hr >
< textarea  name =""  rows =""  cols =""  style ="width:600px;height:300px;"  id ="code" >
/*请将CSS代码复制到这里，下面是示例*/
input,button{
height:20px;background-color: #ffffff;/*border:1px solid #333333;*/
}
textarea{background-color: #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-size: 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;padding-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:default;float:left;background-color: #FAFAFA;
}
#copyright{width:700px;margin-left:20px;background-color: #F7F7F7;color:#8B8B8B;padding:10px;}
#bd_more{display:none;}
#page_p_div{width:100%;padding: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 >< br >
< input  type ="submit"  onclick ="$('code').value = CSSdecode($('code').value);"  value ="格式化" >  |  < input  type ="submit"  onclick ="$('code').value = CSSencode($('code').value);"  value ="加密化"   />
</ body >
</ html >