一直想自己写个css格式化工具,因为原先的《CSS代码格式化和压缩化》工具,压缩or格式化的都不是我的编码习惯。我的格式化工具也许代码方面细节方面都没他的好,但是符合自身需要的东西才是好东西

从去年刚学CSS到上个月初,应该正好一年时间。这一年时间,我的CSS编码习惯一直是这样的:

body,div,h1,h2,h3,h4,h5,h6,p,td,tr,form,ul,ol,li,dl,dt,dd,input,button,textarea{
margin:0;
padding:0;
}
table{
border-collapse:collapse;
border-spacing:0;
margin:0;
padding:0;
line-height:17px;
}
h1,h2,h3,h4,h5,h6{
font-size:100%;
font-weight:normal;
}
fieldset,img{
border:none;
}
ul,ol,li{
list-style:none;
vertical-align:bottom;
}
a,a:link,a:visited,a:hover,a:active{
text-decoration:none;
}

直到上月的中旬开始,我才开始转变自己的编码习惯,因为这种编码格式,占的CSS行数太多,不利于查看,尤其是在做大项目的时候。所以我开始采用了下面的CSS编码习惯:

body,div,h1,h2,h3,h4,h5,h6,p,td,tr,form,ul,ol,li,dl,dt,dd,input,button,textarea{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0;margin:0;padding:0;line-height:17px}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
fieldset,img{border:none}
ul,ol,li{list-style:none;vertical-align:bottom}
a,a:link,a:visited,a:hover,a:active{text-decoration:none}
.clear{clear:both}
.clearfix:after{display:block;content:"";clear:both;height:0}
.clearfix{*zoom:1}

这种方式,明显看起来更清爽一些。但是这种又不利于阅读,既然以前收藏的《CSS代码格式化和压缩化》工具满足不了我的需求,那就自己写个好了。于是今天一大早起来看《javascript权威指南》、到公司闲着没事搜索相关文章(《精通 JS正则表达式》),晚上成功写出了半成品。为什么说是半成品呢,因为只限于我自己的编码习惯来操作,别人的CSS未必能很好的格式化出来= =(今天又修改了一下,现在应该是完结版了-2013.07.04)

好吧,晒下地址,欢迎批评指正~

CSS格式化工具:
http://sandbox.runjs.cn/show/gvnlsgu7

CSS格式化工具的更多相关文章

  1. css 10 款非常棒的CSS代码格式化工具推荐

    http://www.iteye.com/news/23692/  10 款非常棒的CSS代码格式化工具推荐 2011-12-14 09:31 by 副主编 wangguo 评论(0) 有9111人浏 ...

  2. 10 款非常棒的CSS代码格式化工具推荐

    如果你刚开始学习CSS,这意味着你的很多代码或结构可能需要优化,比如你可能过多使用了类.添加了多余的间隔或空行等等,这将导致代码臃肿.混乱,可读性和执行效率将大大降低. 本文为你整理了几款CSS工具, ...

  3. 新一代的代码编辑神器Sublime Text 3(使用指南)

    首先附上官网下载链接:http://www.sublimetext.com/3 接下来是安装sublime最强大的插件功能:Package Control 一.简单的安装方法 使用Ctrl+`快捷键或 ...

  4. Sublime Text 2

    常用功能: 安装Package Control:https://sublime.wbond.net/ 多行选择.多行编辑鼠标选中多行,按下 Ctrl+Shift+L (Command+Shift+L) ...

  5. 微信小程序开发-rem转换rpx小工具

    实现原理: 对样式进行格式化,然后根据 “rem” 进行拆分,这样就会拆分成一个数组 [str1,str2,str3...,str6], 除了最后一个元素,前边的元素都会以 “rem” 样式的数值结尾 ...

  6. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  7. CSS代码格式化工具

    CSS代码格式化工具 http://tool.lanrentuku.com/cssformat/ 可实现CSS代码格式化和CSS在线压缩 请将CSS代码复制到下面表单中:    

  8. 非常好用的css代码格式化工具

    http://tool.lanrentuku.com/cssformat/ 可以横向排列和竖向排列,感谢互联网,让我找到你了.

  9. Dreamweaver CS5 CS6 代码格式化、美化插件(可同一时候格式化HTML、JavaScript、CSS )眼下最好用的代码格式化扩展

    Dreamweaver CS5 CS6 代码格式化.美化插件(可同一时候格式化HTML.JavaScript.CSS )眼下最好用的代码格式化扩展. 众所周知,Dreamweaver CS5 CS6 ...

随机推荐

  1. harbor 管理Helm Chart包

    官方网站:https://github.com/goharbor/harbor官方用户手册:https://github.com/goharbor/harbor/blob/master/docs/us ...

  2. VS2012 QT5.2.0 无法解析的外部符号

    背景:在新建QT工程时,可能没有选择一些库,虽然在头文件中引用了,但是程序依然无法识别 现象:一般出现"LNK2019"错误. 解决:以网络为例,在VS2012中加入网络库,分为两 ...

  3. Codeforces Round #241 (Div. 2) B. Art Union 基础dp

    B. Art Union time limit per test 1 second memory limit per test 256 megabytes input standard input o ...

  4. SpringBoot学习(2)

    三.日志 1.日志框架 springboot:底层是spring框架,spring框架默认使用JCL; springboot选用SLF4j和logback; 2.SLF4j使用 1.如何在系统中使用S ...

  5. python脚本6_打印菱形

    #输入菱形最宽的行所在的行数,打印菱形 m = int(input(">>>")) for n in range(m): print(" "* ...

  6. 自学数据库建模工具--powerdesigner

    网上找了个英文的,版本感觉有点旧12的,但还好英语还行,摸索了一下功能,大概截了几张图,感觉优点:1总共有物理模型pdm,概念模型cdm,业务模型bdm 可以互转,逻辑清晰   2表与表之前的联系,建 ...

  7. Java BigInteger 与C# BigInteger之间的问题

    最近接到一个Java代码转C#代码的项目.本来就两个函数看起来很简单的,后来折腾了一天,终于完美收官. 碰到的第一个问题是:java的BigInteger构造函数里面BigInteger(string ...

  8. Day10 - Python异步IO、Pymysql、paramiko、

    IO多路复用: 参考博客:http://www.cnblogs.com/wupeiqi/p/6536518.html   socket客户端(爬虫): http://www.cnblogs.com/w ...

  9. python使用tkinter做界面之颜色

    python使用tkinter做界面之颜色       from tkinter import *colors = '''#FFB6C1 LightPink 浅粉红#FFC0CB Pink 粉红#DC ...

  10. Ansible 小手册系列 六(Patterns 匹配模式)

    Patterns 是定义Ansible要管理的主机.但是在playbook中它指的是对应主机应用特定的配置或IT流程. 命令格式 命令行 ansible <host-pattern> [o ...