在做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个编辑器介绍给大家。

我个人是对Firefox上的插件FireBug for Firefox更感冒，因为把这个小插件安装到你的Firefox浏览器上后，就可以很轻松地查看你浏览页面的Xhtml和CSS甚至DOM、JS等脚本了，对于喜欢扣取别的网站特效的人来说，自然是个不可缺少的插件。好了，接着上篇介绍后面的5个在线CSS编辑器。

6，CSSMate

网址：http://cssmate.com/csseditor.htm

瞧这软件名字起的多亲切，CSS伙伴，又一个CSS代码生成器。跟Sky CSS Tool功能类似，很基础也很强大。这个软件界面有4个部分组成，即为：Attributes、Selection Values、Preview和Code。

在Attributes面板中选择所需的CSS标签，然后在Selection Values面板中选择对于标签的属性，这样在Preview中就会立刻显示出这些标签属性生成的页面效果了，另外，在Code框中会生成符合规范的CSS代码。

另外，如果你并不是一个熟练的Coder的话，你可以在使用CSSMate前，先通过CSSMate的Quickstart，稍微了解下CSSMate的具体操作和实现方法。

7，The Workshop

网址：http://www.iconico.com/workshop/onlineCSSEditor/

The Workshop提供的在线编辑功能也是非常的简单实用。它允许你复制整个的CSS文件，然后在编辑框中进行修改编辑，其特色之一就是在编辑框中，鼠标指定行的标签效果会在预览框中立刻显示出来，非常有利于对细节的修改。

8，QrONE CSS Designer

网址：http://www.qrone.org/cssdesigner.html

同样是非常基础的一个在线编辑器，基本涵盖了所以的CSS功能属性。程序是一个日本工程师写的，开源，你可以在QrONE CSS Designer这里下载到这个源码包。

9，Simple preview of a CSS editor

网址：http://www.pixy.cz/apps/webedit/

从程序的命名Simple preview of a CSS editor

来看，就知道这个编辑器的特色了：简单，支持预览的在线CSS编辑器，在作者网站没找到在线应用的页面，不过同样提供源代码包的下载，你可以根据网站上的使用说明使用这个在线编辑器。

10，MySpace Profile Layout Editor

网址：http://www.realeditor.com/editor/

我并不是SNS的忠实用户，也不太上MySpace之类的社交网络。但如果你是MySpace的用户的话，那么使用这个编辑器编辑你的Profile，可能是再好不过的了。它可以帮助你将MySpace上的Profile任意部分，编辑成你想要的样式效果。你可以编辑Background, Boxes, Text, Links, Images等标签属性。适合普通的MySpace用户。

好了，至此这10个在线CSS编辑器就介绍完了，虽然是各有特色，但你只要能专心掌握好一个自己容易上手的就足以独当一面了，毕竟我们还有很多不错的本地CSS编辑器供我们使用，只是，本地软件和浏览器在线编辑器也是各有各的优点吧。

原文地址：Top 10 Free Online CSS Editors