当前位置:首页 > 建筑/环境 > 工程监理 > 软件工程师-快速编写HTML和CSS的工具集合
星期八职场经验网()【现成经验助你快速完成工作】在这篇文章中,我们关注的是不同寻常的编码方式——CSS编译器以及HTML缩写编码技术。借助这些优秀的工具和技术,能够大大的减少开发时间,加快开发进度。AD:你曾经考虑过想要加快HTML和CSS编码速度吗?不管你是否想过,都来看看这篇文章吧,你会从中学到很多东西。我们要讨论的不是CSS网格框架,也不是CSSReset。在这篇文章中,我们关注的是不同寻常的编码方式——CSS编译器以及HTML缩写编码技术。借助这些优秀的工具和技术,能够大大的减少开发时间,加快开发进度。HTML加快HTML编码的方法有很多,这里我们要介绍的是HTML缩写技术。取代传统的编写完整HTML标签,我们只需要编码缩写代码就能扩展到完整的HTML标记,一个简单的例子:#container将被转换成divid=container/div。实现HTML缩写技术,有两种著名的解决方案——ZenCoding和HAML。ZenCodingZenCoding是一个用于快速编写HTML,CSS,XML,XSL或者其他结构化格式语言编码的插件,包括ZenHTML和ZenCSS两部分。这个插件核心是一个强大的缩写引擎,允许你扩展表达式,类似于从CSS选择器到HTML代码。支持Aptana/Eclipse、TextMate、Coda、Notepad++、Espresso、Dreamweaver、UltraEdit、VisualStudio、NetBeans、EmEditor、Vim等所有常见的编码工具。强烈推荐给编写HTML和CSS代码的朋友,让你代码飞起来!Haml星期八职场经验网()【现成经验助你快速完成工作】Haml的作者HamptonCatlin是这样介绍Haml的:Haml是对传统XHTML生成方式的一种反叛,它既不是纯粹的代码,也不是一种文本处理语言,它是与众不同的,是一种在我看来最为自然的XHTML构造方式。Haml是Rails下的一种可选模板语言方案,使用CSS风格的语法来描述DIV的ID和Class,以更加优雅简洁的方式编写HTML代码。这是我从Haml网站拿过来的一个示例,你将看到编写HTML代码是多么的迅速。1.#profile2..left.column3.#date=print_date4.#address=current_user.address5..right.column6.#email=current_user.email7.#bio=current_user.bioHaml模板引擎能够把上面的代码生成如下的标准HTML代码:1.divid=profile2.divclass=leftcolumn3.divid=date%=print_date%/div4.divid=address%=current_user.address%/div5./div6.divclass=rightcolumn星期八职场经验网()【现成经验助你快速完成工作】7.divid=email%=current_user.email%/div8.divid=bio%=current_user.bio%/div9./div10./divCSS和HTML一样,快速编写CSS代码的方法也有很多,这里向大家介绍一项非常酷的东西——CSS编译器,我个人觉得这是提供CSS编码速度最有效的方法。只是,你需要花一点点时间学习新的语法,新语法非常简单,你很快就能学会。所有的CSS编译器都有如下共同点:◆新的语法,通常很容易就能学会◆允许嵌套规则,定义变量,混合类型,继承◆生成格式化良好的CSS文件Sass星期八职场经验网()【现成经验助你快速完成工作】Sass让CSS代码变得更加有趣,Sass扩展了CSS3,增加了规则嵌套、变量定义、混合类型、选择器、继承等等特性,能够生成良好格式化的CSS代码,易于组织和维护。它能将类似CSS但是书写更简洁的Sass语言最终转换为CSS代码。Sass提供了基于Ruby语言开发的工具能够很容易的将Sass代码转换为CSS代码。下面是演示Sass的重要特性——CSS嵌套的示例代码:1.table.hl{2.margin:2em0;3.td.ln{4.text-align:right;5.}6.}7.8.li{9.font:{10.family:serif;11.weight:bold;12.size:1.2em;13.}14.}借助Sass工具能够生成如下的标准CSS代码:1.table.hl{2.margin:2em0;3.}4.table.hltd.ln{5.text-align:right;6.}7.8.li{9.font-family:serif;10.font-weight:bold;11.font-size:1.2em;12.}星期八职场经验网()【现成经验助你快速完成工作】Less()Less最早是一个Ruby的gem,让CSS具有动态语言的特性,这些特性包括变量,操作符,嵌套规则。其实Less真正的作用是将使用高级特性的CSS转换成标准的CSS。这些都是在Web客户端发起请求时通过HttpHandler来完成的。也可以是编辑时就完成的。此外,Less可以配置成自动最小化所生成的CSS文件,不仅节省了带宽,并且使最终用户体验更上一层。另外有.Net版本的Less,做.Net开发的朋友可以关注一下。CleverCSSCleverCSS是受Python启发而为CSS开发的一个小型标记语言,用于生成干净的结构化的样式表。它比CSS2更加强大和干净,和CSS最大的区别是语法:CleverCSS基于缩进而不单调,而这是和Python规则相悖的,但也不失为组织样式表的一个好方法。星期八职场经验网()【现成经验助你快速完成工作】HSSHSS是一个用于扩展CSS语法的一个工具,具有变量和嵌套等众多强大特性。xCSSxCSS基于标准的CSS,同时赋予了在编写复杂的样式表的时候的强大的面向对象工作流程,使用xCSS能够大幅减少你的开发时间。xCSS提供了整体的CSS结构的直观概述,使用变量以及通过重用现有的样式和其它很多方便的功能来加速CSS代码编写。xCSS是一个轻量级的工具,而且能够让你的代码保持语义。最后但不是最不重要最后向大家推荐一款非常棒的在线小工具——MarkupGenerator,它能够帮助你快速的生成HTML代码并能够根据从代码中提取所有的选择器,然后自动生成CSS框架代码。例如编写如下简写代码:1.#root2.#top3.#logo4.a[href=/]=MarkupGenerator5.form#search6.fieldset7.label[for=query]=Enterkeyword:星期八职场经验网()【现成经验助你快速完成工作】8.input[type=textname=term]#query9.button[type=submit]=Find10.#header11.h1=MarkupGenerator12.h2=NiftytoolforXHTML/CSScoders13.#content14.#primary15.#about16.#secondary17.#contact.box18.#notify.box19.#bookmarks.box20.#footer21.p=Copyright(c)2011jizhula.com使用MarkupGenerator能够生成如下标准的HTML代码:1.divid=root2.divid=top3.divid=logo4.ahref=/MarkupGenerator/a5./div6.formid=searchmethod=postaction=./7.fieldset8.labelfor=queryEnterkeyword:/label9.inputid=querytype=textname=term/10.buttontype=submitFind/button11./fieldset12./form13./div14.divid=header15.h1MarkupGenerator/h116.h2NiftytoolforXHTML/CSScoders/h217./div18.divid=content19.divid=primary20.divid=about/div星期八职场经验网()【现成经验助你快速完成工作】21./div22.divid=secondary23.divid=contactclass=box/div24.divid=notifyclass=box/div25.divid=bookmarksclass=box/div26./div27./div28.divid=footer29.pCopyright(c)2011jizhula.com/p30./div31./div同时还能够生成如下的CSS框架代码:1.#root{}2.#top{}3.#logo{}4.#logoa{}5.#search{}6.#searchfieldset{}7.#searchfieldsetlabel{}8.#query{}9.#searchfieldsetbutton{}10.#header{}11.#headerh1{}12.#headerh2{}13.#content{}14.#primary{}15.#about{}16.#secondary{}17.#contact{}18.#notify{}19.#bookmarks{}20.#footer{}21.#footerp{}非常好的一款工具,大家可以在线试用一下。星期八职场经验网()【现成经验助你快速完成工作】以上就是全部内容了,这些实用的工具和技术能够让Web开发人员摆脱编写HTML和CSS过程中的枯燥与乏味,能够大幅的节省编码时间,加快开发进度。
本文标题:软件工程师-快速编写HTML和CSS的工具集合
链接地址:https://www.777doc.com/doc-213179 .html