码迷,mamicode.com
首页 > Web开发 > 详细

CSS代码格式化

时间:2015-10-04 13:32:07      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:

将所有代码复制到系统记事本里,另存为html格式的网页文件,之后用浏览器打开即可

技术分享

工具代码:

<style>textarea{width:100%;height:80%;}</style>
<div class="toolcode">
<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; 
} 
function CSSencode(code) 
{ 
 code = code.replace(/\r\n/ig,‘‘); 
 code = code.replace(/(\s){2,}/ig,$1); 
 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,$1); 
 code = code.replace(/(\S)\s*\{/ig,$1 {); 
 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); 
 code = code.replace(/:/ig,:); 
 code = code.replace(/  /ig,‘ ‘); 
 return code; 
} 
//--> 
</script>
        <h3>CSS代码格式化</h3>
        <textarea class="toolarea" id=code name="textarea">
#input.button {
    height: 20px;
    line-height: 18px;
    padding: 0px 5px 0px;
    background-color: white;
    border: 1px solid #ccc;
    cursor: pointer;
}
#input.button-submit {
    height: 20px;
    line-height: 18px;
    padding: 0px 5px 0px;
    background-color: white;
    border: 1px solid #ccc;
    cursor: pointer;
    color: red;
}
/****** Info Box Styles ******/
    .infoBox {
    border:1px solid #ccc;
    padding:5px;
    margin:0px;
    background-color: #ffffe1;
    color: #333;
}
/* a style which makes div touch the bottom of content*/
    .clear {
    border-top:1px solid transparent !important;
    margin-top:-1px !important;
    border-top:0;
    margin-top:0;
    clear:both;
    visibility:hidden;
}
</textarea>
        <hr><input class="bt-green" onclick="$(‘code‘).value = CSSencode($(‘code‘).value);" value=横排格式化 type=button> <input class="bt-blue" onclick="$(‘code‘).value = CSSdecode($(‘code‘).value);" value=竖排格式化 type=button>
</div>

 

CSS代码格式化

标签:

原文地址:http://www.cnblogs.com/buzhaoshi/p/4854436.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!