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

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

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

    /*   以下是演示代码                         */

    /*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. 【leetcode-75】 颜色分类

    (1过,解法不好,看參考荷兰国旗问题解法) 给定一个包含红色.白色和蓝色,一共 n 个元素的数组,原地对它们进行排序,使得相同颜色的元素相邻,并按照红色.白色.蓝色顺序排列. 此题中,我们使用整数 0 ...

  2. [Android] Android RecycleView和ListView 自定义Adapter封装类

    在网上查看了很多对应 Android RecycleView和ListView 自定义Adapter封装类 的文章,主要存在几个问题: 一).网上代码一大抄,复制来复制去,大部分都运行不起来,或者 格 ...

  3. impala系列: 时间函数

    --=======================时间函数--======================= --当前时间戳now()current_timestamp() --当前时间戳相对于 li ...

  4. DingDing的CorpSecretID和SSOSecret不是一个东西

    今天客户更新系统后,提供了一对corpid和secret,结果同步钉钉考勤机数据时,一直提示corpid和secret不正确,最后询问钉钉官方人员发现,客户提供的是SSOSecret,应该使用Copr ...

  5. Keil5创建GPIO

    软件仿真如下图 Main.c内容 #include "stm32f10x.h" int main(void) { GPIO_InitTypeDef GPIO_InitStructu ...

  6. labelImg 工具

    安装anaconda, 在anaconda prompt 下 执行 pyrcc4 -o resources.py resources.qrc python labelImg.py

  7. [C++]2-2 韩信点兵

    /* 韩信点兵 相传韩信才智过人,从不直接清点自己军队的人数,只要让士兵先后以三人一排.五人一排.七人一排地变换队 形,而他每次只掠一眼队伍的排尾就知道总人数了.输入多组数据,每组数据包含3个非负整数 ...

  8. luogu P3175 [HAOI2015]按位或

    传送门 如果每个位置上的数字的意义是这个位置被加进集合的最早时间,那么我们要求的就是集合中最大数的期望,使用Min-Max容斥,\(E(max(S))=\sum_{T\subset S}(-1)^{| ...

  9. eslint 关于CRLF或者LF报错

    在拉取项目代码时,如果有eslint代码校验,但是本地打开会有于CRLF或者LF报错报错,那么怎么处理呢? git有个自动转换换行符功能,在文件commit时会自动转换换行符格式: 不想使用,也可以通 ...

  10. JavaWeb(一)Servlet

    一.Servlet简介 Servlet 是J2EE的一个规范,为Java提供统一的web应用规范. 广义的Servlet 是指实现了servlet的类 二.Servlet工作原理 1.原理: 一个ht ...