一直想自己写个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. 解题报告:poj 3264 最基本的线段树

    2017-10-07 17:54:55 writer:pprp /* @theme: 最基本的线段树 @writer:pprp @end:17:38 @attention:记录的数组应该从1开始,不能 ...

  2. Asp.Net Core 2.0 WebUploader FastDfs 文件上传 分段上传

    功能点: 1. 使用.net core 2.0 实现文件上传 2. 使用webuploader实现单文件,多文件上传 3. 使用webuploader实现大文件的分段上传. 4. 使用webuploa ...

  3. spring MVC 及 AOP 原理

    SpringMVC工作原理https://www.cnblogs.com/xiaoxi/p/6164383.htmlspring MVC 原理https://blog.csdn.net/y199108 ...

  4. nginx的坑-org.apache.http.TruncatedChunkException: Truncated chunk( expected size: 7752; actual size: 4077)

    org.apache.http.TruncatedChunkException: Truncated chunk 项目中使用请求远程接口报错 ,项目是Spring-boot的,两个项目(A和B) , ...

  5. 调试bug的几种方法

    1.php中的dump,echo,exit 2.浏览器的f12 3.安装xdebug扩展(debugger调试器,profiler探查器,trace代码跟踪) profile日志能记录函数的执行耗时和 ...

  6. IE 中的 button type默认值问题

    今天遇到一个问题. 将项目页面的渲染模式从 IE7 改为 IE10 后(<meta http-equiv="X-UA-Compatible" content="IE ...

  7. Spring Boot技术栈博客笔记(1)

    要实现的核心功能 用户管理 安全设置 博客管理 评论管理 点赞管理 分类管理 标签管理 首页搜索 核心技术 数据存储 随着spring3发布以来,spring团队减少使用xml配置的使用,采用大量约定 ...

  8. 双击jar包运行方法

    方案一 在jar包同级,写个bat文件,如下 java -jar Xxx.jar pause 方案二 右击jar文件 ->打开方式->选择安装的jre/bin/javaw.exe. 双击依 ...

  9. Java中unicode增补字符(辅助平面)相关用法简介

    转载自 http://blog.csdn.net/gjb724332682/article/details/51324036 前言 Java从1.5版本开始,加入了unicode辅助平面的支持.相关的 ...

  10. VS的 X64下的汇编编译

    参考博客 VS编译64位汇编时报错:error C4235: 使用了非标准扩展: 不支持在此结构上使用“_asm”关键字 在用VS2013编译内联汇编时,报如下错误: 错误    5    error ...