zen coding 一种快速编写htmlcss代码的方法

zen coding 一种快速编写htmlcss代码的方法

ID:16718641

大小:28.87 KB

页数:8页

时间:2018-08-24

zen coding 一种快速编写htmlcss代码的方法_第1页
zen coding 一种快速编写htmlcss代码的方法_第2页
zen coding 一种快速编写htmlcss代码的方法_第3页
zen coding 一种快速编写htmlcss代码的方法_第4页
zen coding 一种快速编写htmlcss代码的方法_第5页
资源描述:

《zen coding 一种快速编写htmlcss代码的方法》由会员上传分享,免费在线阅读,更多相关内容在工程资料-天天文库

1、ZenCoding一种快速编写HTMLCSS代码的方法译自:SmashingMagazine中文:ZenCoding:一种快速编写HTML/CSS代码的方法 在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。它由SergeyChikuyonok开发。你在写HTML代码(包括所有标签、属性、引用、大括号等)上花费多少时间?如果你的编辑器有代码提示功能,你编写的时候就会容易些,但即便如此你还是要手动敲入很多代码。 在JavaScript方面,当我们想要在一个页面上获取某个特定的元素

2、时,我们就会遇到同样的问题,我们必须写很多代码,这就变得难于维护和重用。JavaScript框架应运而生,它们同时引入了CSS选择器引擎。现在,你可以使用简单的CSS表达式来获取DOM元素,这相当酷。但是,如果你不仅仅可以用CSS的选择器布局和定位元素,还能生成代码会怎么样?比如,如果你这样写:div#content>h1+p…然后就可以看到这样的输出:

有些迷惑吧?今天,我将向你介绍ZenCoding,一组用于快速HTML和CSS编码

3、的工具。最初由VadimMakeev在2009年4月提出(文章为俄语),由鄙人(也就是我)开发了数月并最终达到比较成熟的状态。ZenCoding由两个核心组件组成:一个缩写扩展器(缩写为像CSS一样的选择器)和上下文无关的HTML标签对匹配器。看一下这个演示视频来看一下它们能为你做些什么。 查看视频:http://v.youku.com/v_show/id_XMTM4NDQwNzgw.html locatedintheTomb,DongShenJiabang,deferthenextdayfocusedonth

4、eassassination.Linping,Zhejiang,1ofwhichliquorwinemasters(WuzhensaidinformationisCarpenter),whogotAfewbayonets,duetomissedfatal,whennightcame注意:该视频原版位于Vimeo,但是要看的话需要翻[和谐]墙先,地址在这里:http://vimeo.com/7405114,上面的视频是我费尽周折从Vimeo上下载下来上传到优酷的,上传后质量竟被大打折扣了,囧。youtube上也有

5、一份视频,是基于Aptana的演示,一样很精彩:http://www.youtube.com/watch?v=ug84Ypwqfzk。PS:貌似youtube要比Vimeo翻[和谐]墙容易些,不过如何翻[和谐]墙不在本站讨论范围。如果你想跳转到详细介绍和使用指南,请看一下演示页面并立刻下载你适用的插件:Demo·Demo(使用Ctrl+,展开缩写,需要JavaScript支持)·中文版演示下载(完全支持)·Aptana(跨平台);·Coda,viaTEAforCoda(Mac);·Espresso,viaTEA

6、forEspresso(Mac);下载(部分支持,只支持“展开缩写”)·TextMate(只能用于Mac机,Windows可以使用E-text编辑器替代);·TopStyle;·SublimeText;·GEdit;·DreamweaverCS4·editArea在线编辑器;·ZenCoding在线编辑器中文版现在让我们看一下这些工具是如何工作的吧。展开缩写展开缩写功能将类似CSS的选择器转换为XHTML代码。术语“缩写”可能会有点儿难以理解。为什么不直接称之为“CSS选择器”呢?嗯,首要原因是语义化:“选择器

7、”意为选择一些东西,但是在这里我们事实上是生成一些东西,是写一个长代码的较短的替代。其次,它只是使用真实的CSS选择器语法的一个小的子集,并添加了一些新的操作符。这里是一个支持的属性和操作符的列表:locatedintheTomb,DongShenJiabang,deferthenextdayfocusedontheassassination.Linping,Zhejiang,1ofwhichliquorwinemasters(WuzhensaidinformationisCarpenter),whogotAf

8、ewbayonets,duetomissedfatal,whennightcame·E元素名称(div,p);·E#id使用id的元素(div#content,p#intro,span#error);·E.class使用类的元素(div.header,p.error.critial).你也可以联合使用class和idID:div#content.column.width;·E>N子代元

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。