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

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

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

    /*   以下是演示代码                         */

    /*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. springboot(二十三)Springboot2.X响应式编程

    序言 Spring WebFlux是Spring Framework 5.0中引入的新的反应式Web框架与Spring MVC不同,它不需要Servlet API,完全异步和非阻塞,并 通过React ...

  2. CSS3 transform-origin 属性

    <!DOCTYPE html> <html> <head> <style> #div1 { position: relative; height: 20 ...

  3. Sql显示16进制

    select cast(id as varbinary(4)) from tableTest

  4. excel数据 入库mysql 和 mysql数据 导入excel文件

    1.excel数据入库mysql 首先准备excel文件, 标红的地方需要留意,一个是字段名所在行,一个表名对应页: 然后私用mysql工具 navicat, 选择数据库,然后导入文件, 选中相应ex ...

  5. Java中使用到的锁

    同一进程 重入锁 使用ReentrantLock获取锁的时候回判断当前线程是否为获取锁的线程,如果是则将同步的状态+1,释放锁的时候则将状态-1,只有将同步状态的次数置为0的时候才会是最终释放锁. 读 ...

  6. JavaWeb(一)Servlet

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

  7. IDEA-使用技巧

    IDEA--个性化配置 - 心飞扬的博客 - CSDN博客--里面很好,http://blog.csdn.net/afzaici/article/details/71524643 IntelliJ I ...

  8. Content-disposition中Attachment和inline的区别

    1.Content-disposition中Attachment和inline的区别java web中下载文件时,我们一般设置Content-Disposition告诉浏览器下载文件的名称,是否在浏览 ...

  9. 20165237 2017-2018-2 《Java程序设计》第6周学习总结

    20165237 2017-2018-2 <Java程序设计>第6周学习总结 教材学习内容总结 1.String类的常用方法: public int length() public boo ...

  10. 20165237 2017-2018-2 《Java程序设计》第1周学习总结

    20165237 2017-2018-2 <Java程序设计>第1周学习总结 教材学习内容总结 1.平台=OS(操作系统)+CPU 2.Java具有简单.面向对象.平台无关和动态性. 3. ...