Web程序员必备的CSS工具

时间:2022-09-05 22:39:29

对于web开发来说,CSS是最有效的美化页面、设置页面布局的技术。但问题是,CSS是一种标记性语言,语法结构非常的松散、不严谨。WEB程序员会经常发现自己的或别人的CSS文件里有大量的冗余代码或错误或能够大量优化的地方。如果你经常使用静态编程语言(比如,Java,C语言)等,你会发现实用的IDE工具会给编程带来巨大的效率,像Eclipse这样的能够实时自动分析代码问题的集成开发环境就是一个典型的例子。那么,CSS程序员有没有这样的帮助工具呢?

下面将要介绍的10款工具都是一些在线的应用,你不需要将它们安装到自己的电脑上,只要能联网,你就可以使用它们。大部分的这些工具使用起来都非常的简单,但也有需要技巧的地方。(部分需*才可使用)

CSS问题检查工具:CSS Lint

CSS Lint是一个开源的校验CSS文件质量的工具,最初是由 Nicholas C. Zakas和 Nicole Sullivan编写的,最初版本在Velocity会议上于2011年6月发布。CSS Lint的检测规则包括错误的和警告,当选择器或属性书写不正确、漏掉了大括号、多写了分号等时,会提示解析错误,解析错误优先提示。

Web程序员必备的CSS工具

CSS代码分析统计工具:CSS Stats

Css Stats是一款在线CSS代码分析工具,输入网站CSS网址即可进行CSS代码分析。Css Stats是前端网页设计师分析网站CSS代码的利器,可以统计CSS代码里的规则、字体大小、宽度高度、颜色数等等。

Web程序员必备的CSS工具

对于网页设计师而言分享网页CSS代码是必须要做的事情,统计网站设计里使用了多少种字体、多少种字体大小、多少种颜色、背景颜色有多少种,只有对CSS代码有一个详细的统计数字才能分析出来整个网站设计出来以后的效果。Css Stats还提供热门网站的CSS分析数据,例如谷歌、雅虎、Twitter、FaceBook、Tumblr等网站。

CSS代码优化压缩工具:CSS Shrinks

CSS Shrinks 能够非常明显的压缩你的CSS体积大小。很多Web程序员编写的CSS代码里有大量的冗余语法,空白空间等,这款工具能在不影响你的CSS的正确性的情况下,优化CSS的语法,去除无用的空格和空行,显著的压缩CSS的提交,大量的减少带宽的浪费。

Web程序员必备的CSS工具

CSS代码整理工具:ProCSSor

ProCSSor 除了提供基本优化CSS代码功能,还提供了大量的自定义选项。比如,让你设定CSS规则,CSS属性,CSS语法的优化选项。它还提供了对新型CSS3属性、规则中各种浏览器里的不兼容替代方案。

Web程序员必备的CSS工具

Codrops CSS 语法参考

Codrops CSS 参考内容丰富而全面,并且界面清爽直接,你可以使用这个工具掌握CSS里最重要而全面的知识。它的CSS知识库分成了数个类别,包括伪类,属性,函数,数据类型,概念,规则等。

Web程序员必备的CSS工具

CSS3浏览器兼容支持情况查询工具:Can I Use

"Can I Use"在这里你能找到所有web新特性在各个品牌浏览器以及各品牌浏览器不同版本的兼容性,当你知道你针对的用户都在使用什么浏览器时,这写table将对你建设网站有很大帮助。打开caniuse.com,该网站首页将所有HTML5、CSS3等web新特性罗列出来,如果你想查看某个特性在不同浏览器种的兼容情况,点击一下就可以。比如,看一下@font-face Web fonts在各个浏览器中的兼容性,点击CSS区域中的第一项,会看到一个表格,列出所有浏览器的版本,用不同颜色代表每个浏览器对@font face Web fonts的支持,被标识为红色的代表不支持,浅绿色代表部分支持。图中列出的浏览器还包括一些手机平板设备浏览器,例如Android系统浏览器。如此全面,设计网站时,可以根据网站针对的用户有选择的使用CSS和Javascript的高级特性,提高用户体验。

Web程序员必备的CSS工具

检查你的代码是否符合CSS标准:W3C CSS Validation Service

这个工具是用来检查你的CSS语法是否正确,是否符合W3C CSS标准。我们知道从最早的IE开始,各种浏览器都实现了一些自己的方言,这些方言中在各种浏览器里互不相通。但我们开发网页时,必须最大限度的考虑各种浏览器的兼容性,最好的方法是遵守W3C的CSS标准规范。W3C CSS Validation Service就是用来校验你的css中的问题,它会提醒你那些语法,哪些属性,那些规则是有问题的。

Web程序员必备的CSS工具

CodePad

Codepad.org是一个很有意思的网站,它的主页很简单,左边是可以编译并执行的程序语言,右边则是让你输入程序的输入框,输入框的下面是一个"Run Code"的复选钮和一个"Submit"的提交按钮。

Web程序员必备的CSS工具

其操作起来也非常简单,先选中你要编译并运行的程序语言,然后在输入框中粘贴或输入程序的原代码,然后,点击提交,你就可以看么你程序编译出错的提示,或是执行的结果。

也许,你会觉得很无聊天,但我觉得这在某些时候会非常有用,尤其是你找不到编译器而又想验证一段代码的时候,这种时候还是比较多的。特别是我们很难有一台可以运行所有语言的电脑,如果有的话,那一定是你自己的个人电脑,当你不使用你自己的电脑时,你就会着急了。而且,我觉得这项服务非常地有意思,因为,这样一来,你甚至可以在你的手机上写任何语言的程序了。

目前这个网站支持下面这样语言——C,C++,D,Haskell,Lua,OCaml,PHP,Perl,Plain Text,Python,Ruby,Scheme,Tcl。

CSS动画生成工具:Gradient Animator

这是一款使用CSS Gradient和CSS Animation技术实现的动态背景生成工具。工具非常易用,轻松地点击几下鼠标,一个现代感十足的渐变动态背景代码就生成了。它可以让CSS渐变背景平滑地移动,我们可以设置移动的角度,移动的速度,渐变的角度。支持所有现代浏览器以及 ie 10+。非常适合做网页开屏背景。

Web程序员必备的CSS工具

Web颜色工具:CSS Colours

故名思议,这个工具是用来方便Web设计者查找颜色的,它提供了各种颜色的视觉效果,对于的颜色的英文名称,RGB值,16进制值,使用起来非常的方便。

Web程序员必备的CSS工具

来源:http://www.webhek.com/10-css-tools

Web程序员必备的CSS工具的更多相关文章

  1. 【转】15款Java程序员必备的开发工具

    如果你是一名Web开发人员,那么用膝盖想也知道你的职业生涯大部分将使用Java而度过.这是一款商业级的编程语言,我们没有办法不接触它. 对于Java,有两种截然不同的观点:一种认为Java是最简单功能 ...

  2. 15款Java程序员必备的开发工具(转)

    如果你是一名Web开发人员,那么用膝盖想也知道你的职业生涯大部分将使用Java而度过.这是一款商业级的编程语言,我们没有办法不接触它 对于Java,有两种截然不同的观点: 一种认为Java是最简单功能 ...

  3. 15款Java程序员必备的开发工具

    如果你是一名Web开发人员,那么用膝盖想也知道你的职业生涯大部分将使用Java而度过.这是一款商业级的编程语言,我们没有办法不接触它. 对于Java,有两种截然不同的观点:一种认为Java是最简单功能 ...

  4. Java程序员必备的 15框开发工具

    15款Java程序员必备的开发工具 如果你是一名Web开发人员,那么用膝盖想也知道你的职业生涯大部分将使用Java而度过.这是一款商业级的编程语言,我们没有办法不接触它. 对于Java,有两种截然不同 ...

  5. 十大PHP程序员必备工具

    十大PHP程序员必备工具 1.Notepad++ 总结来说就是小而精,7.4版本的软件包只有2.9M,比一般的IDE小数十倍,但是Notepad++的功能确是很全面的,代码高亮,语法折叠,宏功能,内置 ...

  6. 代码自动生成工具MyGeneration之一(程序员必备工具)

    代码自动生成工具MyGeneration之一(程序员必备工具) 转 分类: C#2008-08-06 18:12 16064人阅读 评论(12) 收藏 举报 工具数据库相关数据库stringbrows ...

  7. Sublime Text 2 - 性感无比的代码编辑器!程序员必备神器!

    Sublime Text 2 - 性感无比的代码编辑器!程序员必备神器! http://www.iplaysoft.com/sublimetext.html 代码编辑器或者文本编辑器,对于程序员来说, ...

  8. 「编程羽录」上线,程序员必备的这些技能你能get到嘛?

    大家好,我是小羽. 好久不见,给大家带来个好消息,小羽的全新专题「编程羽录」系列正式上新,主要是介绍一些关于面试题和经验总结的文章. 会为大家提供一些技术栈之外,程序员还需要的其他方面硬核知识,做到全 ...

  9. .NET WEB程序员需要掌握的技能

    本来这个是我给我们公司入职的新人做一个参考,由于 @张善友 老师在他的微信号转了我的这篇文章<<.Net WEB 程序员需要掌握的技能>>,很多人觉得比较有用,说是看了后知道一 ...

随机推荐

  1. mysql共享表空间转独立表空间

    使用innodb_export_import.py脚本: https://github.com/thecpaneladmin/innodb-tools 安装MySQL-python模块: shell ...

  2. JAVA中求解对象所占字节大小

    该类为cache4j缓存框架中的工具类方法,该方法实现了两个接口 接口1:计算对象在内存中所占字节数 接口2:复制对象,实现深度克隆效果,实现原理为先序列化对象,然后在反序列化对象:返回一个新的对象, ...

  3. 学习php 韩顺平 数据类型 三元运算,字符串运算类型运算

    数据类型 整型:int 4个字节长度 1个字节8个bit 所以最大的整型数值是2的31次方 第一位是的0,1 表示正负,0表示正数,1表示负数 小数(float)分 精度计算  从左边开始算第一个不为 ...

  4. &lbrack;Swift&rsqb;LeetCode38&period; 报数 &vert; Count and Say

    The count-and-say sequence is the sequence of integers with the first five terms as following: 1. 1 ...

  5. 黑群晖DS3617xs-DSM6&period;1&period;7up3&sol;up2 开启ROOT用户,同时SATA改eSATA,挂载NTFS硬盘设置(二)

    这两天闲来没事在某宝上搞了个黑群晖主机就j1900/4G小主机系统是DCM 6.1.7up3 15284版 网上修改的教程很多,走了好多弯路终于搞定我的黑群NAS,现分享给各位道友,有不足的地方请给位 ...

  6. &lbrack;剑指Offer&rsqb;38-字符串的全排列

    链接 https://www.nowcoder.com/practice/fe6b651b66ae47d7acce78ffdd9a96c7?tpId=13&tqId=11180&tPa ...

  7. 【转】Java学习---HashMap和HashSet的内部工作机制

    [原文]https://www.toutiao.com/i6593863882484220430/ HashMap和HashSet的内部工作机制 HashMap 和 HashSet 内部是如何工作的? ...

  8. zabbix的搭建与入门

    一,Zabbix架构 zabbix 是一个基于 WEB 界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案.zabbix 能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制 ...

  9. No&period;101&lowbar;第二次团队会议

    时间的敲定 在这一次的会议中,明确了任务目标,将任务进行合理分配,并且规划了整个任务的时间节点,这对团队来说非常重要. 一.最终项目 在上一节课的时候,我们最终没有拿到学霸开发项目,最后爬虫也被选走了 ...

  10. JavaWeb Session

    1. Session概述 1.1. 什么是Session Session一般译为会话,是解决Http协议的无状态问题的方案,可以将一次会话中的数据存储在服务器端的内存中,保证在下一次的会话中可以使用. ...