Zen Coding: 一种快速编写HTML/CSS代码[译](2)
作者:神采飞扬 来源:前端观察 发布时间:2009-12-16 12:53:00
展开缩写
展开缩写功能将类似CSS的选择器转换为XHTML代码。术语“缩写”可能会有点儿难以理解。为什么不直接称之为“CSS选择器”呢?嗯,首要原因是语义化:“选择器”意为选择一些东西,但是在这里我们事实上是生成 一些东西,是写一个长代码的较短的替代。其次,它只是使用真实的CSS选择器语法的一个小的子集,并添加了一些新的操作符。
这里是一个支持的属性和操作符的列表:
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
子代元素(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);
正如你能看到的,你已经知道如何使用Zen Coding了:只是些一个简单的仿CSS选择器(呃,“缩写”抱歉),就像这样…
div#header>img.logo+ul#nav>li*4>a
…然后调用”展开缩写”行为。
这里有两个新增的操作符:元素倍增和条目编号。比如,如果你想生成5个<li>元素,你可以简单的写位li*5。它也将同样重写全部子代元素。如果你想写4个<li>元素,每个里面都有一个<a>标签,你就可以简单的写为li*4>a,这样会生成以下HTML代码:
<li><a href=""></a></li><li><a href=""></a></li><li><a href=""></a></li><li><a href=""></a></li>
最后一个——条目编号用于当你想用索引标记重复的元素的情况。假设你想生成class为item1、item2和item3的3个<div>元素。你可以写成这样的缩写,div.item$*3:
<div class="item1"></div><div class="item2"></div><div class="item3"></div>
只需在你想要索引出现的任何class或id属性上添加一个美元符号即可,而且想要多少都可以。那么,这样…
div#i$-test.class$$$*5
会被转换成为:
<div id="i1-test" class="class111"></div><div id="i2-test" class="class222"></div><div id="i3-test" class="class333"></div><div id="i4-test" class="class444"></div><div id="i5-test" class="class555"></div>
你会看到,当你写a的缩写的时候,输出是<a href=”"></a>。或者,如果你写img,输出就是<img src=”" alt=”" />。
Zen Coding是如何知道什么时候应该为生成的标签添加默认的属性或者跳过关闭标签的?有一个专门的文件,名为zen_settings.js描述了输出元素。这是一个简单的JSON文件,描述每种语言的缩写(是的,你可以为不同的句法定义缩写,比如HTML、XSL、CSS等)。通用的语言缩写定义看起来就像这样:
'html': { 'snippets': { 'cc:ie6': '<!--[if lte IE 6]>\n\t${child}|\n<![endif]-->', ... }, 'abbreviations': { 'a': '<a href=""></a>', 'img': '<img src="" alt="" />', ... } }
猜你喜欢
- 备份MySQL数据库的命令mysqldump -hhostname -uusername -ppassword
- 这个是JS控制图片滚动的效果,当鼠标结果新闻标题时开始滚动到对应的图片,可以作为图片新闻。效果图:<!DOCTYPE HTML PUB
- XML的未来 现在你已经知道XML。确实,结构有点复杂,而且DTD有各种可以定义文档可以包含的内容的选项。但还不只这些。考虑一个数据交换对其
- 所谓天赋(左脑和右脑)也就是你是否有艺术天赋,天赋也许是存在的,这主要在于人类左右脑的分工。左脑主要负责逻辑理解、语言、判断、分类、分析、推
- 每个写asp程序人必会的知识!在ASP编程中使用数组数组的定义Dim MyArrayMyArray = Array(1,5,123,12,9
- asp数字分页涵数参数说明:SQL: 查询语句,PageSizeN: 每页显示多少新闻记录classid: 栏目ID,PageCountS:
- 在Https页面中,如果iframe所引入页面是非https协议的页面,或者src属性不存在都可能导致浏览器弹出安全警告。本人在网上查找相关
- 最近对list设计感兴趣,今天说的是list视图方式的设计。感觉有些细节非常有意思,拿出来跟大家讨论。首先我们来看下windows下文件夹管
- 定义本地站点在Dreamweaver中制作网站,您必须定义一个本地站点,它是您的计算机上任意位置的一个
- 原作者:Jason MannInternet Magazine showed that people do not read on the
- 今日大致浏览了一下《High Performance Web Sites》。本书的中文版是《高性能网站建设指南》。本书另有对其中个别问题深入
- 最近,我不得不对我的一个客户的旧网站进行更新,使得它能够达到可访问性的标准。对三四年前的旧代码进行挖掘的想法根本没有吸引力,主要是因为我曾经
- 在看到7yue博客——“换手来用”的思考 有这么一句话:RIA是一个更趋向于“体验”设计的领域,不仅仅包括“开发人员”,还包括“设计人员”,
- 一般情况下,网站的图片代码是这样的。<img src="./images/test.jpg"
- 新闻系统、blog系统等都可能用到将动态页面生成静态页面的技巧来提高页面的访问速度,从而减轻服务器的压力,本文为大家搜集整理了ASP编程中常
- 写在前面的话:Part 1记得刚毕业那时,常幻想着自己是个大艺术家,满怀憧憬的想找一份理想的工作。后来入了行,慢慢的发现自己好像不是这块料;
- udf_WeekDayName 代码如下:CREATE FUNCTION [dbo].[udf_WeekDayName] ( ) RETUR
- 今天是 Firefox3的2008下载日 ,这就意味着Firefox3正式发布了。Firefox3有众多的改进和新功能,我最关注的功能之一是
- 将数据库中的信息存储至XML文件中:save.asp<!-- #include file="adovbs
- 如下图所示:单击Edit Code打开Code信息如下:经查Data at the root level is invalid是XML文件的