10个在线CSS编辑器

在做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

最后编辑于:2010/4/13作者: 游子

热爱一切美好的新事物,搞网站也被网站搞,剁手折腾。关注与学习Web相关技术与UI\UE\UED\UCD\Server相关知识,服务器运维、前端、后端、非专业程序猿、非高级前端后端攻城师!

暂无评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

arrow grin ! ? cool roll eek evil razz mrgreen smile oops lol mad twisted wink idea cry shock neutral sad ???