菠菜博

在做Web Coder的人都应该很清楚一个容易上手CSS编辑器会给你带来多大的好处，尤其是那些第三方开发的在线CSS编辑器，不但体积小巧，功能强大，而且simple and easy to use，随时随地可以使用，还无需在本地安装。有人说掌握Dreamweaver就足够了，而且它的级联提示做的也很好，省去了Coder很多拼写字母的时间。但是，它只是放在作坊里的大型机器，如果你要外出生产作业的话，你就必须要随身携带工具箱才行。这些在线编辑器就是你外出必备的工具箱了。

这里为Web设计师推荐10个免费的在线CSS编辑器，供你随时随地使用，非常方便。

1，FireBug for Firefox

如果你是一个Web设计师，如果你安装了Firefox，那么你一定不能不安装这个叫做FireBug for Firefox的插件。 在一开始，我很快就熟悉了这个插件的使用方法，通过它，你可以查看任何网站或博客页面中的元素及其属性，而不需要打开任何CSS代码编辑器。它会帮你把页面中的HTML、CSS、JS脚本、DOM等等分析的一清二楚。

此外，你还可以使用一个叫做Firefox X-Ray的Firefox插件和FireBug for Firefox一起协同工作，这个插件可以帮你查看页面中的<h>标签、divs、HTML, images等等，最近. X-Ray for Firefox已经升级到了支持Firefox 3的版本。

2，HTML Playground

网址：http://www.htmlplayground.com

HTMLPlayground是我优先推荐的CSS和HTML编辑器，HTMLPlayground提供70多种HTML/CSS tags选择，而且为你选中的每一个标签都提供一个详细的描述。如果你在学习CSS的话，强烈建议你去使用这个编辑器，它会让你的学习过程更轻松愉快。

3，CSSFly

网址：http://www.cssfly.net/

CSSFly是什么呢？CSSFly是一个web 2.0在线工具，它可以帮助你在浏览器中立刻直接编辑网站样式，包括(X)HTML和外部包含的CSS样式文件，你写的代码什么样，它就显示成什么样，使用它，你可以进行Web开发、在线测试或是查看你喜欢的网站的代码编辑内容。所有这些的前提就是，在文本框中输入你要查看的网站网址，然后点击Edit按钮就可以了，不过对中文的支持不好。

4，Sky CSS Tool

网址：http://skycsstool.sourceforge.net

Sky CSS是一个不错的CSS代码生成工具。可以帮助你生成所需的CSS类，从而省却手写代码的烦躁。包括Font, Text, Color/B.G, List, Padding, Border, Margins, Tables, Display等标签属性。不过个人认为不太容易上手，操作界面看的很累。

5，CSS Portal

网址：http://www.cssportal.com/online-css-editor/

该在线编辑器可以立刻帮助你编辑这个完整的CSS代码，而且有一个动态改变的 Preview预览效果，精确指示出你现在正在编辑的代码行。它会在你的输入过程中自动更新（刷新），代码编辑完成后，还可以帮你验证CSS代码的准确性。

这是10个在线CSS编辑器的第一部分，之所以分2部分写，是因为整理这些资料真的是个很费时的事情，希望明天可以把剩下的另外5个编辑器介绍给大家。