CSS格式化 CSS代码压缩工具

<!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>
时间: 2024-07-31 14:25:59

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

sublime格式化css代码插件:css format

有时会从网上下载一些css压缩文件,打开后所有代码都在一行,不利于阅读,通过css format插件,能快速展开代码,方便阅读. 参考:Sublime Text 上最好用的 CSS 格式化插件 —— CSS Format css format 下载:https://github.com/mutian/Sublime-CSS-Format, 下载后解压到sublime Packages目录下,菜单栏preference-->Brower Packages 安装css format插件后,选择代码,

css清除浮动代码实例演示

css清除浮动代码实例演示:在页面中如果采用了浮动,那么清除浮动则是必须要进行的操作,否则可能引起一些意想不到的后果.本章节不会对浮动或者清除浮动的原理做介绍,只是分享一下清除浮动的几段代码,因为有些朋友可能需要的就是一个代码实例,关于浮动或者清除清除浮动的相关内容可以参阅相关阅读.一.使用overflow清除浮动: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <met

前端CSS和JS代码风格规范

1:不要轻易改动全站级CSS和通用CSS库.改动后,要经过全面测试. 2:css的id,class 名称 语义化,   以 - 相连,   命名少用缩写(除一些所有人一看便知的缩写); 3: Javascript命名规则 3.1:私有变量名用下划线开头; eg: _this = $(this); 3.2:变量名--驼峰命名法; eg: regEmail; 3.3:格式化对象参数;   eg: $.ajax({ type : 'post', url : '/auth/sendCode', data

js css样式操作代码(批量操作)

js css样式操作代码(批量操作) 作者: 字体:[增加 减小] 类型:转载 时间:2009-10-09 用js控制css样式,能让网页达到良好的的用户体验甚至是动画的效果.并且考虑到效率. 我们用js书写css样式通常会用下面的两种方式: 一般情况下我们用js设置元素对象的样式会使用这样的形式: 复制代码 代码如下: var element= document.getElementById(”id”); element.style.width=”20px”; element.style.he

Bootstrap CSS 栅格、代码和表格

一.bootstrap栅格 下图总结了 Bootstrap 网格系统如何跨多个设备工作: 例如: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Bootstrap 模板</title> <meta name="viewport" content="width=device-width, initial-s

div+css通用兼容性代码整理

一.Div+css通用兼容性代码 你可以在css开头加入 *html{padding:0px} 复制代码 代码如下: <style> *html{padding:0px} /* Clear Fix */ .clearfix:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */

去掉CSS赘余代码,CSS可以更简洁

本篇文章适合css新手学习,对于已经掌握了css的朋友们也可以通过本片文章来复习知识. 作者通过实践,认为在有些情况下css的代码是可以更加简洁的,多数情况下是因为新手对于一些具有多属性的元素代码不能精简来写造成的. 精简的代码对于网页是有莫大的好处的,对于浏览者访问速度会有一定的提升,另外对于搜索引擎也更加可以抓取网页关键内容.废话不说了,下面就看看笔者总结的可以精简的代码: 1.Margin & Padding 例1: .div { margin-top:10px; margin-right

用JavaScript修改CSS属性的代码

用JavaScript修改CSS属性的代码 作者: 字体:[增加 减小] 类型:转载 时间:2013-05-06我要评论 这篇文章主要介绍用原生的javascript修改CSS属性的方法,需要的朋友可以参考下 用JavaScript修改CSS属性 只有写原生的javascript了. 1.用JS修改标签的 class 属性值: class 属性是在标签上引用样式表的方法之一,它的值是一个样式表的选择符,如果改变了 class 属性的值,标签所引用的样式表也就更换了,所以这属于第一种修改方法. 更

css格式化的基本运用

1.css格式化 <style type="text/css"> .one{ text-indent: 3em; } .two{ text-align: center; } .three{ text-transform: lowercase; text-transform: capitalize; } .four{ text-shadow:10px 10px 10px red ; } .five{ word-spacing: 2em; letter-spacing: 1em