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

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

ID:8962494

大小:33.47 KB

页数:8页

时间:2018-04-13

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

《zencoding一种快速编写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编码的工具。最初由V

3、adimMakeev在2009年4月提出(文章为俄语),由鄙人(也就是我)开发了数月并最终达到比较成熟的状态。ZenCoding由两个核心组件组成:一个缩写扩展器(缩写为像CSS一样的选择器)和上下文无关的HTML标签对匹配器。看一下这个演示视频来看一下它们能为你做些什么。 查看视频:http://v.youku.com/v_show/id_XMTM4NDQwNzgw.html 注意:该视频原版位于Vimeo,但是要看的话需要翻[和谐]墙先,地址在这里:http://vimeo.com/7405114,上面的视频是我费

4、尽周折从Vimeo上下载下来上传到优酷的,上传后质量竟被大打折扣了,囧。youtube上也有一份视频,是基于Aptana的演示,一样很精彩:http://www.youtube.com/watch?v=ug84Ypwqfzk。PS:貌似youtube要比Vimeo翻[和谐]墙容易些,不过如何翻[和谐]墙不在本站讨论范围。如果你想跳转到详细介绍和使用指南,请看一下演示页面并立刻下载你适用的插件:Demo·Demo(使用Ctrl+,展开缩写,需要JavaScript支持)·中文版演示下载(完全支持)·Aptana(跨平台)

5、;·Coda,viaTEAforCoda(Mac);·Espresso,viaTEAforEspresso(Mac);下载(部分支持,只支持“展开缩写”)·TextMate(只能用于Mac机,Windows可以使用E-text编辑器替代);·TopStyle;·SublimeText;·GEdit;·DreamweaverCS4·editArea在线编辑器;·ZenCoding在线编辑器中文版现在让我们看一下这些工具是如何工作的吧。展开缩写展开缩写功能将类似CSS的选择器转换为XHTML代码。术语“缩写”可能会有点儿难

6、以理解。为什么不直接称之为“CSS选择器”呢?嗯,首要原因是语义化:“选择器”意为选择一些东西,但是在这里我们事实上是生成一些东西,是写一个长代码的较短的替代。其次,它只是使用真实的CSS选择器语法的一个小的子集,并添加了一些新的操作符。这里是一个支持的属性和操作符的列表:·E元素名称(div,p);·E#id使用id的元素(div#content,p#intro,span#error);·E.class使用类的元素(div.header,p.error.critial).你也可以联合使用class和idID:div#

7、content.column.width;·E>N子代元素(div>p,div#footer>p>span);·E+N兄弟元素(h1+p,div#header+div#content+div#footer);·E*N元素倍增(ul#nav>li*5>a);·E$*N条目编号(ul#nav>li.item-$*5);正如你能看到的,你已经知道如何使用ZenCoding了:只是些一个简单的仿CSS选择器(呃,“缩写”抱歉),就像这样…div#header>img.logo+ul#nav>li*4>a…然后调用”展开缩写”行

8、为。这里有两个新增的操作符:元素倍增和条目编号。比如,如果你想生成5个

  • 元素,你可以简单的写位li*5。它也将同样重写全部子代元素。如果你想写4个
  • 元素,每个里面都有一个标签,你就可以简单的写为li*4>a,这样会生成以下HTML代码:1234
  • 当前文档最多预览五页,下载文档查看全文

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

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