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

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

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

    /*   以下是演示代码                         */

    /*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. windows下安装nginx，并添加至系统服务

    安装:解压修改配置文件运行即可 添加服务 需要借助"Windows Service Wrapper"小工具下载地址:winsw GitHub 下载后放在nginx目录下,并修改名字 ...

  2. Lost connection to MySQL server during query，MySQL设置session,global变量及网络IO与索引

    Navicat导出百万级数据时,报错:2013 - Lost connection to MySQL server during query 网上一番搜索,修改mysql如下几处配置文件即可: sel ...

  3. Spark Submitting Applications浅析

    Submitting Applications提交应用程序 在spark的bin目录下spark-submit脚本被用于在集群中启动应用程序.它可以通过一个统一的接口来使用Spark支持的所有集群管理 ...

  4. Uncaught TypeError: $(…).orgcharts is not a function

    调整js顺序没有解决,最后增加NoConflict解决,注意红色部分 function initorgcharts() { var $jq = jQuery.noConflict(true); org ...

  5. 分享12款 JavaScript 表格控件（DataGrid）

    JavaScript 表格控件可以操作大数据集的 HTML 表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以 ...

  6. bean的装配方式（注入方式，构造注入，setter属性注入）

    bean的装配方式有两种,构造注入和setter属性注入. public class User { private String username; private String password; ...

  7. linux 截图工具 shutter

    ubuntu 安装shutter sudo apt install shutter libgoo-canvas-perl libgoo-canvas-perl是提供对截图编辑功能,例如,添加画框,文字 ...

  8. Flume配置Load balancing Sink Processor

    1 官网内容 2 找一个图来理解一目了然 3 详细配置 配置文件load_source_case.conf 配置数据入口 source到channel 配置了两个sink用来做负载均衡 #配置文件: ...

  9. git修改历史记录

     1.git stash2.git rebase 45c2d5c --interactive 3.git stash pop4.git add5.git commit --amend      确认编 ...

  10. Vue.js 技术揭秘（学习） 深入响应式原理 nextTick外传

    microTask  mutationObserve. promise.then macroTask setImmediate. messageChannnel.setTimeout.postMess ...