这学期我选修了一门 web 开发课程，寒假作业是写一个购物商城主页。在做作业的过程中我也发现了一些好用的 HTML、CSS 开发工具，在此分享给大家，希望对你能有些许帮助。

1 Reset 工具

很多写 CSS 的同学喜欢用一段代码来对页面进行 reset。网上流行的 reset.css 非常多。譬如YUI的，Eric Meyer的, 或者是HTML5 Doctor的，还有参考众多 reset.css 后弄出来的HTML5 Reset。

这些工具无一例外都是大杀器，一定程度上可以帮助开发者节省不少时间。当然，他们各有特点啦，除了大小不同，效率上也有不少差别。对于 css reset 应该是大有学问的，不过作为一名业余选手，我对此没法发表看法。要特别说明的是，CSS Reset 也有诸多弊病，所以仁者见仁智者见智吧。

2 在线 CSS 生成工具

CSS 3 相对 CSS 2 加入了很多特性。诸如圆角，阴影，渐变等。想要做出满意的页面，反复地调试是必须的。对于我这种写东西还得按照参考手册来的新手，仅仅用Firebug调试似乎很吃力。此外考虑到多浏览器的支持，一些现成的实现就显得非常有用。

  • CSS3 Generator非常傻瓜的可视化 CSS 生成器，又一个大杀器。这个工具杀伤力在于它够傻，即使你对 CSS3 了解很少也可以写出比较漂亮的效果。实在是新手居家旅行必备良品。
  • Ultimate CSS Gradient Generator可视化的渐变生成器，可以选择浏览器哦~此外，它预设的一些渐变样式也非常赞，基本集合了网络上常见的渐变条。水果应用里那种高光条？随便一找便是。
  • CSS3 Gradient Generator同样也是渐变生成器。
  • CSS3, please!又是大杀器一枚。集合了大多数常用的 CSS3 效果，而且你可以给一个元素赋予多个 CSS3 样式哦。是不是满足了你的混合欲望呢？
  • border radius和前面的相比只能算超小型武器了，直接用 Firebug 吧。

3 一些 Firefox 拓展

  • 前面提到的 Firebug，大大杀器。
  • ColorZilla取色器拓展。
  • Web Developer(https://addons.mozilla.org/en-US/firefox/addon/web-developer/) 非常强大的 web 开发拓展，功能繁多，可惜我不太会用，最后被我禁用了。
  • 各种 Validator: CSS, HTML。自行搜索吧。

4 编辑器

好吧，编辑器已经是老生常谈的东西了。大家比较认同的观点是：适合自己的才是最好的。废话！ 我知道推荐编辑器必然会引起口水（当然 Vim，和 emacs 党们是不屑一顾的）。但我还是想分享一下Sublime Text 2。 在此不过多介绍,大家可以看看这篇。总之用起来确实非常赞，各种功能强大，谁用谁知道。导致我在写 HTML、CSS 的时候差点就放弃了 Vim。

就分享这写吧，以后看到好的我会做一些更新。如果你有什么好用的资源，欢迎留言分享哈。