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

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

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

    /*   以下是演示代码                         */

    /*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. DBUtils数据库连接池

    DBUtils pip install DBUtils 模式一: 为每个线程创建一个连接.(内部是通过threading.local实现的) 模式二: 创建一定个数的连接,所有线程都来连接池中获取.( ...

  2. STC等单片机一开机就停电模式烧写程序办法

    为了测试一个低功耗程序,程序一开机就进入停机模式,结果刷不回来了,经过两个小时的试验,必须4个线同时插拔vcc,rxd,txd,gnd.如果只断开vcc是不行的.

  3. floyd求最小环

    ;i<=n;i++) ;j<=n;j++) g[i][j]=g[j][i]=dis[i][j]=dis[j][i]=inf; ;i<=m;i++){ int u,v,w;scanf( ...

  4. ubuntu终端命令启动matlab方法

    让所有用户都有权限使用matlab,在终端输入 sudo gedit /etc/profile 在后行写 export MATLABPATH=/home/ubuntu/MATLAB/R2016b:$M ...

  5. DNN网络（三）python下用Tensorflow实现DNN网络以及Adagrad优化器

    摘自: https://www.kaggle.com/zoupet/neural-network-model-for-house-prices-tensorflow 一.实现功能简介: 本文摘自Kag ...

  6. remove() 方法

    jQuery的 remove() 方法,去掉选中元素. 例如: $("button").click(function(){ $("p").remove(); } ...

  7. 第27月第18天 epoll lt et

    1. While the usage of epoll when employed as a level-triggered interface does have the same semantic ...

  8. 第25月第15天 udacity cs253

    1.cs253 https://classroom.udacity.com/courses/cs253 webapp2 Install WebOb, Paste and webapp2¶ We nee ...

  9. python后端将svc文件数据读入数据库具体实现

    如何用python将svc文件的数据读入到MySQL数据库里,在此直接上代码了,感兴趣的朋友可以贴代码测试: import pandas as pd import os from sqlalchemy ...

  10. Python之List列表的增删改查

    序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推. Python有6个序列的内置类型,但最常见的是列表和元组. 序列 ...