<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>CSS格式化 css代码在线压缩-CSS代码格式化，css在线压缩工具可减少CSS文件体积，让CSS文件更规范</title>

<style>

body,textarea,input{font:11pt "微软雅黑",Tahoma;}

</style>

<meta http-equiv="x-ua-compatible" content="ie=7" />

 <script language=JavaScript>

<!--

function $() {

  var elements = new Array();

  for (var i = 0; i < arguments.length; i++) {

  var element = arguments[i];

  if (typeof element == 'string')

    element = document.getElementById(element);

  if (arguments.length == 1)

    return element;

  elements.push(element);

  }

  return elements;

}

function CSSencode(code)

{

 code = code.replace(/\n/ig,'');

 code = code.replace(/(\s){2,}/ig,'$1');

 code = code.replace(/\t/ig,'');

 code = code.replace(/\n\}/ig,'\}');

 code = code.replace(/\n\{\s*/ig,'\{');

 code = code.replace(/(\S)\s*\}/ig,'$1\}');

 code = code.replace(/(\S)\s*\{/ig,'$1\{');

 code = code.replace(/\{\s*(\S)/ig,'\{$1');

 return code;

}

function CSSdecode(code)

{

 code = code.replace(/(\s){2,}/ig,'$1');

 code = code.replace(/(\S)\s*\{/ig,'$1 {');

 code = code.replace(/\*\/(.[^\}\{]*)}/ig,'\*\/\n$1}');

 code = code.replace(/\/\*/ig,'\n\/\*');

 code = code.replace(/;\s*(\S)/ig,';\n\t$1');

 code = code.replace(/\}\s*(\S)/ig,'\}\n$1');

 code = code.replace(/\n\s*\}/ig,'\n\}');

 code = code.replace(/\{\s*(\S)/ig,'\{\n\t$1');

 code = code.replace(/(\S)\s*\*\//ig,'$1\*\/');

 code = code.replace(/\*\/\s*([^\}\{]\S)/ig,'\*\/\n\t$1');

 code = code.replace(/(\S)\}/ig,'$1\n\}');

 code = code.replace(/(\n){2,}/ig,'\n');

 code = code.replace(/:/ig,': ');

 code = code.replace(/  /ig,' ');

 return code;

}

//-->

</script>

</head>

<body>

<table width="80%" border="0" cellspacing="3" cellpadding="0" align="center">

    <tr>

      <td>CSS代码在线压缩工具，CSS格式化，让CSS代码更规范，体积更小，有利于阅读代码和网页加载速度。而且本页提供的CSS代码格式化功能不需要使用YUI Compressor 或者 CSSTidy等离线工具，直接在线操作。</td>

    </tr>

    <tr>

      <td><textarea id=code title="请把CSS代码粘贴在这里" style="WIDTH: 100%; HEIGHT: 300px"></textarea></td>

    </tr>

    <tr>

      <td><input onClick="$('code').value = CSSdecode($('code').value);" type=button value=格式化>  <input onClick="$('code').value = CSSencode($('code').value);" type=button value=压缩化>  <input onClick="window.clipboardData.setData('Text',$('code').value);" type=button value=复制>  <input onClick="$('code').value = window.clipboardData.getData('Text');" type=button value=粘贴>  <input onClick="$('code').value = ''" type=button value=清空> </td>

    </tr>

  </table>

</body>

</html>

CSS格式化 CSS代码压缩工具的更多相关文章

  1. sublime格式化css代码插件：css format

    有时会从网上下载一些css压缩文件,打开后所有代码都在一行,不利于阅读,通过css format插件,能快速展开代码,方便阅读. 参考:Sublime Text 上最好用的 CSS 格式化插件 —— ...

  2. Bootstrap CSS 栅格、代码和表格

    一.bootstrap栅格 Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. Bootstrap 网格系统(G ...

  3. css初始化样式代码

    为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...

  4. jdk、apache-ant结合yuicompressor配置的CSS与JS合并压缩工具

    前序:网上很多css与js合并打包工具,其中最流行的就是ant结合yui-compressor,鉴于学习与工作需要今天就学习了一下这种方式,供大家学习交流. 步骤:1.安装jdk,并配置其变量环境:有 ...

  5. 一些实用的CSS Media Query代码片段，个人采集

    CSS3的出现让响应式Web设计变得简单,CSS3提供了强大的media queries,允许你针对不同的条件设置不同的样式,可以在不修改页面内容的情况下,为不同设备提供不同的样式效果. 以下是一些C ...

  6. JavaScript动态加载资源【js|css】示例代码

    在开发过程中会用到各种第三方的插件,或者自己写在单独文件中的js方法库或者css样式,在html头部总是需要写一大堆的script和link标签,如果想要自己实现动态的引入资源文件,可以使用开源的re ...

  7. CSS初始化示例代码

    CSS初始化示例代码 /* css reset www.admin10000.com */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code, ...

  8. 前端html、CSS快速编写代码插件-Emmet使用方法技巧详解

    前端html.CSS快速编写代码插件-Emmet使用方法技巧详解   Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来 ...

  9. js css样式操作代码（批量操作）

    js css样式操作代码(批量操作) 作者: 字体:[增加 减小] 类型:转载 时间:2009-10-09   用js控制css样式,能让网页达到良好的的用户体验甚至是动画的效果.并且考虑到效率.   ...

随机推荐

  1. XtraTreeList直接显示Access数据库表中的数据

    方法1:点击在拖入的显示控件(TreeList)右上方的箭头,在Treelist任务中选择数据源,添加项目数据源,依次选择数据库.数据集,新建连接,浏览选择数据库(*.mdb),依次点击 下一步,选择 ...

  2. HDU 5402(Travelling Salesman Problem-构造矩阵对角最长不相交路径)

    Travelling Salesman Problem Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 65536/65536 K (J ...

  3. ubuntu的apt-get提示资源被锁定

    一.错误提示 E: Could not : Resource temporarily unavailable) E: Unable to lock the administration directo ...

  4. 关于使用REST API

    设计REST API的请求处理部分 REST API功能 通常, 我们希望借助REST API完成以下操作 - 创建一个新记录 - 读取一个list的记录 - 读取指定的记录 - 更新指定记录 - 删 ...

  5. java连接mysql数据库实例

    做游戏客户端多一年多了,在大学学的java的SSH,基本上都忘完了,今天看了一下发现基本的连接数据库的都忘了...太可怕了这遗忘的速度. 所以写了个连接的例子吧..安装好mysql数据库之后新建了两张 ...

  6. Oracle中查询表字段基本信息、主键、外键（整理）

    背景 因为项目某些模块的数据结构设计没有严格按照某规范设计,所以只能从数据库中查询数据结构,需要查询的信息如下:字段名称.数据类型.是否为空.默认值.主键.外键等等. 在网上搜索了查询上述信息的方法, ...

  7. 使struct对象拥有可变大小的数组——（C++深度探索）

    首先摘录<Inside The C++ Object Model>中的一段话: 把单一元素的数组放在一个struct的尾端,于是每个 struct objects 可以拥有可变大小的数组: ...

  8. VS中批量删除注释

    批量删除: 按ctrl+H 选上正则表达式 Find what: //.* Replace with: (空) 点replace all就行了

  9. 【Android】5.7 图片库（Galery）

    分类:C#.Android.VS2015: 创建日期:2016-02-07 一.简介 图库(也叫画廊)是一个布局小部件,用于在可水平滚动的列表中显示每一副图片,当前所选的图片将置于视图的中心. 注意: ...

  10. 在windows下codeblocks中配置pthread库

    转自:http://blog.csdn.net/u013172314/article/details/50846198 如果添加方法不正确,可能会出现pthread_create’未定义的引用,所以下 ...