主要功能如下：
    /*   美化：格式化代码，使之容易阅读            */

    /*   净化：将代码单行化，并去除注释            */

    /*   压缩：将代码最小化，加快加载速度          */

    /*   以下是演示代码                         */

    /*reset begin*/

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title>CSS压缩、美化和净化工具</title>

<style>

textarea{width:900px;height: 420px;font: 12px/1.6em 'Lucida Console', 'monospace', 'Consolas';letter-spacing: 1px}

textarea::-webkit-scrollbar{width:10px;height:10px;}

textarea::-webkit-scrollbar-button:vertical:increment{background-color:transparent;}

textarea::-webkit-scrollbar-track:enabled{background-color:rgba(113,112,107,0.1);-webkit-border-radius:5px;}

textarea::-webkit-scrollbar-thumb:vertical{height:50px;background-color:rgba(0,0,0,.2);-webkit-border-radius:5px;}

textarea::-webkit-scrollbar-thumb:horizontal{width:50px;background-color:rgba(0,0,0,.2);-webkit-border-radius:5px;}

</style>

</head>

<body>

<center>

    <p>CSS压缩工具</p>

    <textarea id='code'  spellcheck="false">

body, h1, h2, h3, h4, h5, h6, hr, p,dl, dt, dd, ul, ol, li,form, fieldset, legend, button,th, td,img{border:medium none;margin: 0;padding: 0;}

body,button{font:12px/1.5 Helvetica,\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,Arial;}

input, label, img, th {vertical-align: middle;}

body{background:#F1F2F6;}

img{border:0}

ol,li{list-style:none;}

a{text-decoration: none;}

a:active{background: none}

a{outline: none;}

    </textarea>

    <br>

    <input type="button" name="" value="压缩" id='encode'>

    <input type="button" name="" value="美化" id='decode'>

    <input type="button" name="" value="净化" id='purify'>

    <input type="button" name="" value="清空" id='empty'>

</center>

<script>

var oEncodeBtn = document.getElementById('encode');

var oDecodeBtn = document.getElementById('decode');

var oPurify = document.getElementById('purify');

var oCode = document.getElementById('code');

var oEmpty = document.getElementById('empty');

oEmpty.onclick = function() {

    oCode.value = ''

};

oEncodeBtn.onclick = function() {//压缩代码

    var val = oCode.value;

    val = val.replace(/\/\*(.|\n)*?\*\//g,'');                //去除注释

    val = val.replace(/^\s+|\s+$/g,'');                        //清除首尾空格

    val = val.replace(/(:)\s+/g,'$1');                         //去除 冒号后多个空格              如 width:  100px  => width:100px

    val = val.replace(/\s{2,}/g,' ');                          //去除 多余空格2个以上             如 margin: 10px   20px  30px  => margin:10px 20px 30px

    val = val.replace(/,\s+|\s+,/g,',');                    //去除 多个样式共享时的多余空格    如 h1,  h2  , h3  =>h1,h2,h3

    val = val.replace(/;{2,}|;\s+/g,';');                   //去除 多个分号或分号后面多余空格  如 width:200px;;  height:100px  => width:200px;height:100px

    val = val.replace(/\s*\{\s*/g,'{');                        //去除 选择符后面多余空格          如 div { height:100px}   => div{height:100px}

    val = val.replace(/\s*}\s*/g,'}');                        //去除 选择器前面多余空格          如 div{height:100px}  a{}   => div{height:100px}a{}

    val = val.replace(/[\n\t\f\r]/g,'');                    //去除换行,制表符,分页符,回车

    val = val.replace(/;}/g,'}');                              //去除 元素样式的最后分号          如 div{height:100px;} => div{height:100px}

    oCode.value = val;

};

oPurify.onclick = function() { //净化工具;

    oEncodeBtn.click();

    var val = oCode.value;

    val = val.replace(/\}/g,'}\n');

    oCode.value = val;

};

oDecodeBtn.onclick = function() { //格式化代码

    var val = oCode.value;

    val = val.replace(/(\*\/)\s+(\w)/g,'$1\n$2'); //格式化注释后的多余空格

    val = val.replace(/(:)\s+/g,'$1');      //格式化冒号间多余空格

    val = val.replace(/,\s+|\s+,/g,',');    //格式化逗号间多余空格

    val = val.replace(/;{2,}|;\s+/g,';');   //格式化分号后多余字符

    val = val.replace(/;}/g,'}');             //去除最后一个分号

    val = val.replace(/\s*\{\s*/g,' {\n\t');//格式化左{

    val = val.replace(/\s*}\s*/g,'\n}\n');  //格式化左}

    val = val.replace(/\s*;\s*/g, ';\n\t'); //格式化属性

    oCode.value = val;

};

</script>

<div style="text-align:center;">

</div>

</body>

</html>

Css样式压缩、美化、净化工具 源代码的更多相关文章

  1. CSS, JavaScript 压缩, 美化, 加密, 解密

    CSS, JavaScript 压缩, 美化, 加密, 解密 JS压缩, CSS压缩, javascript compress, js在线压缩,javascript在线压缩,css在线压缩,YUI C ...

  2. 清理无用的CSS样式的几个工具（转）

    欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...

  3. React组件(组件属性this.state和this.props,css样式修饰组件)

    目录: 1.创建组件的第一种方式 function2.将组件抽离为单独的jsx文件3.省略.jsx后缀, 配置webpack设置根目录4.创建组件的第二种方式--使用class关键字创建组件5.组件私 ...

  4. Chrome开发工具Elements面板(编辑DOM和CSS样式)详解

    Element 译为“元素”,Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表,并且立即生效,避免了频繁切换浏览器和编辑器的麻烦. 我们可以使用Element面板来查看源代码,它不 ...

  5. 【Web前端】把图片嵌入到css样式表中（附小工具）

    适用场景: 本地通过stylish等插件自定义网站样式时 开通css自定义的空间但暂无图片上传途径时 ……   举例:     把视频页的缩略图边框改为下面这种        .main_list u ...

  6. 使用css counter来美化代码片段的样式

    博客园默认的代码片段样式不太美观,特别是复制代码时会把前面的行号也复制下来,操作起来比较麻烦.最近看到一种使用CSS计数器来美化代码片段的方法,于是研究了一下计数器的使用,在此做个笔记. 这是官网的例 ...

  7. 脚本工具（获取某个文件夹下的所有图片属性批量生成css样式）

    问题描述: 由于有一次工作原因,就是将某个文件夹下的所有图片,通过CSS描述他们的属性,用的时候就可以直接引用.但是我觉得那个文件夹下的图片太多,而且CSS文件的格式又有一定的规律,所有想通过脚本来生 ...

  8. 表格CSS样式美化

    1. 单像素边框CSS表格 这是一个很常用的表格样式. <!-- CSS goes in the document HEAD or added to your external styleshe ...

  9. css样式表。作用是美化HTML网页.

    样式表分为:(1)内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余多. 如:<p style="font-size:10px">内联样式表</p&g ...

随机推荐

  1. jQuery使用（四）：DOM操作之查找兄弟元素和父级元素

    查找兄弟元素 向下查找兄弟元素 next() nextAll() nextUntil() 向上查找兄弟元素 prev() prevAll() prevUntil() 查找所有兄弟元素 siblings ...

  2. html中src与href的区别

    概述 src和href之间存在区别,能混淆使用.src用于替换当前元素,href用于在当前文档和引用资源之间确立联系. src src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档 ...

  3. maven打包可执行jar文件运行报错

    起因 项目中同时依赖了Spring和MyBatis,并使用mybatis-spring集成MyBatis和Spring. 使用maven打包为可执行jar文件运行,打包插件为:maven-shade- ...

  4. C#窗口编程时TextBox中的换行

    注意Windows下的换行符是\r\n.只使用\n是无法完成换行的

  5. Silverlight用户无法注册之MySql.Data.dll不一致

    本篇博文记录本人解决一个"用户无法注册"的问题的过程 1 问题描述: 用户可以删除:但不能注册,也不能修改权限: 图 1用户注册失败 图 2修改用户权限出错 2 解决过程 1)粗暴 ...

  6. Log4j2 快速开始

    1.配置 默认 Log4j2可以将自己配置为记录错误及更高级别日志,并将消息记录到控制台中. [显示配置]1.检测log4j.configurationFile系统属性,如果属性存在,就从指定文件加载 ...

  7. springboot使用jpa+mongodb时，xxxRepository不能Autowired的问题

    springboot启动类: @SpringBootApplication public class MainApp { public static void main(String[] args) ...

  8. 利用PHP连接数据库操作用户注册、审核与登录页面

    注册页面 <body ><h1>注册页面</h1><form action="zhucechuli.php" method="p ...

  9. nginx 相关命令

    验证配置是否正确: nginx -t 查看Nginx的版本号:nginx -V 启动Nginx:start nginx 快速停止或关闭Nginx:nginx -s stop 正常停止或关闭Nginx: ...

  10. Hadoop之MapReduce思维导图