|
如果你想跳轉(zhuǎn)到詳細(xì)介紹和使用指南，請看一下演示頁面并立刻下載你適用的插件：
Demo
下載(完全支持)
下載(部分支持，只支持“展開縮寫”)
現(xiàn)在讓我們看一下這些工具是如何工作的吧。
展開縮寫
展開縮寫功能將類似CSS的選擇器轉(zhuǎn)換為XHTML代碼。術(shù)語“縮寫”可能會有點(diǎn)兒難以理解。為什么不直接稱之為“CSS選擇器”呢？嗯，首要原因是語義化：“選擇器”意為選擇一些東西，但是在這里我們事實(shí)上是生成 一些東西，是寫一個(gè)長代碼的較短的替代。其次，它只是使用真實(shí)的CSS選擇器語法的一個(gè)小的子集，并添加了一些新的操作符。
這里是一個(gè)支持的屬性和操作符的列表：
- E
元素名稱(div, p);
- E#id
使用id的元素(div#content, p#intro, span#error);
- E.class
使用類的元素(div.header, p.error.critial). 你也可以聯(lián)合使用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);
正如你能看到的，你已經(jīng)知道如何使用Zen Coding了：只是些一個(gè)簡單的仿CSS選擇器(呃，“縮寫”抱歉)，就像這樣…
div#header>img.logo+ul#nav>li*4>a
…然后調(diào)用”展開縮寫”行為。
這里有兩個(gè)新增的操作符：元素倍增和條目編號。比如，如果你想生成5個(gè)<li>元素，你可以簡單的寫位li*5。它也將同樣重寫全部子代元素。如果你想寫4個(gè)<li>元素，每個(gè)里面都有一個(gè)<a>標(biāo)簽，你就可以簡單的寫為li*4>a，這樣會生成以下HTML代碼：
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
最后一個(gè)——條目編號用于當(dāng)你想用索引標(biāo)記重復(fù)的元素的情況。假設(shè)你想生成class為item1、item2和item3的3個(gè)<div>元素。你可以寫成這樣的縮寫，div.item$*3:
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
只需在你想要索引出現(xiàn)的任何class或id屬性上添加一個(gè)美元符號即可，而且想要多少都可以。那么，這樣…
div#i$-test.class$$$*5
會被轉(zhuǎn)換成為:
<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>
你會看到，當(dāng)你寫a的縮寫的時(shí)候，輸出是<a href=”"></a>�；蛘撸绻銓慽mg，輸出就是<img src=”" alt=”" />。
Zen Coding是如何知道什么時(shí)候應(yīng)該為生成的標(biāo)簽添加默認(rèn)的屬性或者跳過關(guān)閉標(biāo)簽的？有一個(gè)專門的文件，名為zen_settings.js描述了輸出元素。這是一個(gè)簡單的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="" />',
...
}
}
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁 Zen Coding:快速編寫HTML/CSS代碼 [1] 下一頁 Zen Coding:快速編寫HTML/CSS代碼 [3]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 Zen Coding:快速編寫HTML/CSS代碼 [2]
