www.22138com「太阳集团游戏」太阳2007娱乐官方网址

欢迎更多朋友与我们www.22138com合作,太阳集团游戏是由安全软件管理软件整合而成的最新安全卫士,其实这是因为目前已经推出了太阳2007娱乐官方网址的新网址,带您体验至尊级享受!。

Zen Coding: 一种快速编写HTML/CSS代码的方法

2019-11-30 17:41 来源:未知

Zen Coding: 风流倜傥种高效编写HTML/CSS代码的章程

2012/05/17 · CSS · 2 评论 · CSS

Република Србија语原作:Smashing Magazine,翻译:前面一个观望

在本文中大家将突显风华正茂种新的采用仿CSS选择器的语法来快速支付HTML和CSS的秘诀。它由Sergey Chikuyonok开发。

你在写HTML代码(包罗全体标签、属性、引用、大括号等卡塔尔上开支稍稍时间?要是您的编辑器有代码提示意义,你编写的时候就能够轻便些,但就算如此你要么要手动敲入相当多代码。

在JavaScript方面,当大家想要在三个页面上得到有个别特定的因素时,大家就能够碰着相似的标题,大家不得不写过多代码,那就变得难于维护和重 用。JavaScript框架应时而生,它们同期引进了CSS选用器引擎。以后,你能够行使简便的CSS表明式来获取DOM成分,这相当帅。

然而,假若你不唯有能够用CSS的选取器布局和稳定成分,还是可以够扭转代码会怎样?举个例子,即便你如此写:

CSS

 div#content>h1 p

1
 div#content>h1 p

…然后就足以看来那般的出口:

XHTML

<div id="content"> <h1></h1> <p></p> </div>

1
2
3
4
<div id="content">
<h1></h1>
<p></p>
</div>

多少吸引吧?几目前,笔者将向您介绍Zen Coding,一组用于火速HTML和CSS编码的工具。最早由Vadim Makeev在2009年4月提出(文章为菲律宾语卡塔尔(英语:State of Qatar),由鄙人(也正是本身卡塔尔开垦了数月并最终达到比较早熟的气象。Zen Coding由多个着力组件组成:五个缩写扩大器(缩写为像CSS同样的接收器卡塔尔国和上下文非亲非故的HTML标签对相称器。看一下这几个演示摄像来看一下它们能为您做些什么。

[youku id=”XMTM4NDQwNzgw”]

注意:该录像原版坐落于Vimeo,可是要看的话要求翻[和谐]墙先,地址在那间:,上边的摄疑似本人繁重从Vimeo上下载下来上传到优酷的,上传后品质竟被大优惠扣了,囧。youtube上也许有大器晚成份录像,是基于Aptana的演示,同样很优质:。PS:貌似youtube要比Vimeo翻[和谐]墙轻便些,可是怎么样翻[和谐]墙不在本站商量范围。

黄金时代经您想跳转到详细介绍和使用指南,请看一下示范页面并任何时候下载你适用的插件:

Demo

●Demo (使用 Ctrl , 打开缩写,供给JavaScript援助卡塔尔(قطر‎

●中文版演示

下载(完全扶持卡塔尔(英语:State of Qatar)

●Aptana (跨平台);

●Coda, via TEA for Coda (Mac);

●Espresso, via TEA for Espresso (Mac);

下载(部分援助,只扶植“打开缩写”卡塔尔国

TextMate(只可以用于Mac机,Windows可以利用E-text编辑器代替卡塔尔(قطر‎;

●TopStyle;

●Sublime Text;

●GEdit;

●Dreamweaver CS4

●editArea在线编辑器;

●Zen Coding在线编辑器汉语版

当今让大家看一下那些工具是何等做事的吧。

展开缩写

进展缩写功效将周边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);

太阳2007娱乐官方网址,正如您能收看的,你早已知道怎么运用Zen Coding了:只是些三个简易的仿CSS选拔器(呃,“缩写”抱歉卡塔尔,就好像那样…

…然后调用”张开缩写”行为。

这里有四个新扩充的操作符:成分倍增和条文编号。举个例子,假如你想生成5个<li>成分,你能够大约的写位li*5。它也将相近重写全部子 代成分。如若您想写4个<li>成分,每种里面都有二个<a>标签,你就足以省略的写为li*4>a,那样会变动以下 HTML代码:

XHTML

<li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li>

1
2
3
4
<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:

XHTML

<div></div> <div></div> <div></div>

1
2
3
<div></div>
<div></div>
<div></div>

只需在你想要索引现身的任何class或id属性上增多四个英镑符号就能够,况且想要多少都足以。那么,那样…

XHTML

div#i$-test.class$$$*5

1
div#i$-test.class$$$*5

会被转移成为:

XHTML

<div id="i1-test"></div> <div id="i2-test"></div> <div id="i3-test"></div> <div id="i4-test"></div> <div id="i5-test"></div>

1
2
3
4
5
<div id="i1-test"></div>
<div id="i2-test"></div>
<div id="i3-test"></div>
<div id="i4-test"></div>
<div id="i5-test"></div>

你会见到,当您写a的缩写的时候,输出是<a href=””></a>。或许,假使您写img,输出正是<img src=”” alt=”” />。

Zen Coding是怎样知道怎样时候应为浮动的价签增多私下认可的属性恐怕跳过关闭标签的?有三个专程的文件,名字为zen_settings.js汇报了出口成分。那是二个简单易行的JSON文件,描述每一种语言的缩写(是的,你可以为分化的句法定义缩写,举个例子HTML、XSL、CSS等卡塔尔(قطر‎。通用的语言缩写定义看起来就好像这么:

JavaScript

'html': { 'snippets': { 'cc:ie6': '<!--[if lte IE 6]>nt${child}|n<![endif]-->',             ...             },               'abbreviations': { 'a': '<a href=""></a>', 'img': '<img src="" alt="" />',             ...             }             }

1
2
3
4
5
6
7
'html': { 'snippets': { 'cc:ie6': '<!--[if lte IE 6]>nt${child}|n<![endif]-->',
            ...
            },
              'abbreviations': { 'a': '<a href=""></a>', 'img': '<img src="" alt="" />',
            ...
            }
            }

要素类型

Zen Coding有多少个至关心敬服要的成分类型:“片段(snippets)” 和 “缩写(abbreviations)”。片 段正是随意的代码碎片,而缩写是标签订义。通过一些,你能够写出你想要的别的代码,它也会照你写的格式输出;不过你必须手动的格式化它(使用n 和t实现换行和缩进卡塔尔(英语:State of Qatar)并将${child}变量放到你想要输出子成分的地点,犹如那样:cc:ie6>style。尽管您不接纳${child}变量,子成分将会输出于 代码片段的后面

有了缩写,您必需编写制定标识定义,并且语法是优良首要的。经常,你必需写三个粗略的蕴藏全部暗许的性质的竹签,譬如: <a href=””></a>。当Zen Coding被加载后,它会深入分析三个标签署义到二个描述该标签的名字、属性(包含它们的次第卡塔尔(英语:State of Qatar)以致该标签是还是不是为空的特定的指标中。所以,假使你写<img src=”” alt=”” />,你会告诉Zen Coding那几个标签必得是空的,然后“扩展缩写”行为就能够在出口从前为它选取一定的规行矩步。

对于一些和缩写,你能够增进一个管道符号,它告诉Zen Coding当缩写被进行的时候光标会被定位到什么地方。私下认可的,Zen Coding 将光标放在空属性的引号中间以致早前和停业标签的中档。

例子

那么,这里解释一下当您写了叁个缩写并呼吁“张开缩写”行动时发生的事情。首先,它将叁个安然无事的缩写分开为单身的因素:这样div>a 会被分成div 和a 成分,当然也会维持他们的关联。然后,每一种成分,分析器先在代码片段内而后在缩写中检索定义。假如它找不到,将会使用要素的名字作为新的价签,并为其丰硕缩写中定义的id和class。举例,假设你写mytag#example,剖析器在部分或缩写中找不到mytag定义,它就能够输出<mytag id=”example”><mytag>。

大家制作了成都百货上千默认的CSS和HTML缩写和一些。你会发觉学习使用Zen Coding能够追加你的临盆力。

HTML 标签对匹配器

对于HTML编码者的另多少个拾壹分广阔的任务是索求一个成分的标签对。譬如你想接受一切<div id=”content”>标签并将其运动到任哪个地点方或然去除它。恐怕有望你在检索三个平息标签并想领悟它归于极度初阶标签。

噩运的是,比相当多现代开垦工具在该作用方面具有欠缺。那么笔者就调整写三个本人要好的竹签对相配器作为Zen Coding的生龙活虎部分。但是它依然在beta阶段并尚存一些主题材料,但它能够干活的很科学并相当的慢。不是浏览整个文书档案(像常常的这种HTML标签对相配器的做 法卡塔尔国,它从光标的最近岗位上马物色有关的价签。这使得它足够快而且上下文非亲非故:它竟然足以用来这段JavaScript代码片段

JavaScript

var table = '<table>'; for (var i = 0; i < 3; i ) {     table = '<tr>'; for (var j = 0; j < 5; j ) {         table = '<td>' j '</td>';     }     table = '</tr>'; } table = '</table>';

1
2
3
4
5
6
7
var table = '<table>'; for (var i = 0; i < 3; i ) {
    table = '<tr>'; for (var j = 0; j < 5; j ) {
        table = '<td>' j '</td>';
    }
    table = '</tr>';
}
table = '</table>';

应用缩写包裹

那诚然是贰个非常的帅的特征,它将缩写和标签对匹配器的成效归并到二头了。你有些许才开掘你供给增进叁个打包成分以改善四个浏览器bug?可能你需求增添一个装饰,比方三个背景图片只怕边框到二个块级内容?你必须写起来标签,有的时候打断您的代码,找到有关的点然后关闭标签。那正是“使用缩写包裹”能扶植您的地点。

该意义非常轻松:它须求你输入缩写,然后实践适当的“张开缩写”行动并将您期望的文本放到你缩写的终极一个成分里面。固然您未有接纳此外文件,它就能够运行标签对匹配器并选择结果。它生龙活虎律能搞精通你的光标的职位:标签的内容之中可能是初阶和关闭标签中间。依赖于它的岗位,它会卷入标签的内容或标签自身。

缩写包裹为包装个别行引进了三个特定的缩写句法。轻易跳转到倍增操作符前边的数字,举个例子:ul#nav>li*>a。当Zen Coding 发掘多个施用未定义的倍增数的时候,它会将它作为一个双重成分:你的章节中有稍许行,它就能够输出多少次,并将每行的内容放到重复成分的末段三个子成分里面。

借令你在这里段文本外面包裹这段缩写div#header>ul#navigation>li.item$*>a>span:

XHTML

About Us Products News Blog Contact Up

1
2
3
4
5
About Us
Products
News
Blog
Contact Up

你将会得到以下结果:

XHTML

<div id="header">     <ul id="navigation">         <li><a href=""><span>About Us</span></a></li>         <li><a href=""><span>Products</span></a></li>         <li><a href=""><span>News</span></a></li>         <li><a href=""><span>Blog</span></a></li>         <li><a href=""><span>Contact Up</span></a></li>     </ul> </div>

1
2
3
4
5
6
7
8
9
<div id="header">
    <ul id="navigation">
        <li><a href=""><span>About Us</span></a></li>
        <li><a href=""><span>Products</span></a></li>
        <li><a href=""><span>News</span></a></li>
        <li><a href=""><span>Blog</span></a></li>
        <li><a href=""><span>Contact Up</span></a></li>
    </ul>
</div>

您能够见到,Zen Coding是三个强硬的文本管理工具。

快捷键

●Ctrl ,

进展缩写

●Ctrl M

匹配对

●Ctrl H

使用缩写包蕴

●Shift Ctrl M

合并行

●Ctrl Shift ?

上贰个编辑点

●Ctrl Shift ?

下三个编辑点

●Ctrl Shift ?

一定匹配对

那一个火速键是足以自定义的。

在线演示

您早就学到相当多关于Zen Coding怎样行事以至它是怎么着使您的编码更便于了。现在缘何不协调尝试一下吗?因为Zen Coding是用纯JavaScript开采并搬迁到Python,它竟然可以用于浏览器内部,那令它形成引入到CMS的首要推荐。

●Demo (使用 Ctrl , 张开缩写,必要JavaScript协理卡塔尔(قطر‎

●中文版演示

支撑的编辑器

Zen Coding并不依附于某些特定的编辑器。它是多少个只管理公事的优良的构件:它获得文本、做一些甩卖并放回新的公文(或索引,用于标签相称卡塔尔(قطر‎。Zen Coding由JavaScript和Python编写,所以它其实能够运作于此外平台。在Windows,你能够运维JavaScript版本,而 Mac和Linux 分支能够采用Python版。

假诺让您的编辑器扶持Zen Coding,你须求写二个特定的能够在您的编辑器和Zen Coding之间转移数据的插件。难点是三个编辑器可能不会完好的支撑Zen Coding因为它自个儿的插件系统。比方,TextMate通过使用脚本输出替换当前进很容的就扶植了“打开缩写”作用,不过它不可能管理标签对天造地设因为从没正经八百的办法央浼TextMate来摘取内容。

全盘辅助

●Aptana (跨平台);

●Coda, via TEA for Coda (Mac);

●Espresso, via TEA for Espresso (Mac);

部分帮助(只帮忙“张开缩写”卡塔尔

●TextMate (只可以用于Mac机,Windows能够行使E-text编辑器代替卡塔尔(قطر‎;

●TopStyle;

●Sublime Text;

●GEdit;

●Dreamweaver CS4

●editArea在线编辑器;

●Zen Coding在线编辑器普通话版

Aptana是自己重要的费用条件,它应用二个JavaScript版本的Zen Coding。它也隐含众多任何的本身用来平常专门的职业的工具,所以任何叁个新的Zen Coding版本都将会率先对Aptana可用,然后陈设到Python并协作此外的编辑器。

Coda和Espresso 插件被卓越的Text Editor Actions (TEA卡塔尔国 平台扶助,由Ian Beck付出。原始的源代码在GitHub上,但自个儿只怕制作了本人自个儿的分段以整合Zen Coding的特性。

总结

多多品尝过Zen Coding的人都在说它改造了她们写页面包车型地铁形式。当然还恐怕有不菲政工要做,还会有为数不菲的编辑器必要被帮衬以至部分文书档案要写。请浏览前些天的文书档案 以及源代码以搜寻你的难题的答案。希望你中意Zen Coding!

附:Zen coding的切实用法

不满的是, 本文原来的文章者并不曾认证zen coding的切切实实用法,神飞以为有供给做以下轻便的辨证。这里就以Aptana/Eclipse和Dreamweaver为例,此外编辑器平台暂不描述,如有疑问能够在评价中与后边叁个观望的网民沟通。

Aptana/Eclipse

鉴于Aptana本人就是基于Eclipse的,所以,Zen Coding也是扶助Eclipse的,只是供给二个EclipseMonkey插件的支撑,Aptana已经封装了那么些插件,所以借令你选择Aptana,上面包车型客车第一步能够跳过。

1、通过修改网站设置EclipseMonkey (要是您使用Aptana,可跳过这一步卡塔尔(英语:State of Qatar)

2、在您的当前职业去创立二个顶尖的门类,给它取名,举例,就叫zencoding<

3、在新创造的档案的次序中创制scripts文件夹

4、解压缩下载的ZIP插件包到该文件夹。项目布局看起来就疑似这么:

太阳集团游戏 1

5、安装之后,Aptana的菜单栏中的“脚本(Script卡塔尔”菜单中校会冒出Zen coding相关子菜单

注意事项:

●Aptana版的合法插件是依附MAC机的,若是您用的是Windows,须求手动改善急迅键(在各类文件底部的申明片段中更正卡塔尔国

●官方的文本编码有一些儿乱,改进财方js的时候,请小心编码难点,更正不当会形成有关职能的错失;

DreamWeaver

好音信是,今后早就有了Zen coding for DreamWeaver插件,坏音信是,该插件援救的功力少之甚少,只扶助开展缩写功效。何况暗中认可的火速键是无用的。只可以在“命令”菜单中式茶食击操作。别的,没有测验该插件是否只帮衬CS4版本。可是相比好的是,小编将本插件的源码也放出了,你可以自定义叁个Dreamweaver的插件。

PS:官方的DW插件已经更新,推荐到官方去下载。新的插件增添了越来越多的功用支撑。UPDATE @ 12-23-二〇一〇

非常推荐:Haoqing同学将缩写给试行了意气风发番,计算出了非常多很棒的用例,推荐我们前去学习。

最先的著作者介绍:

SergeyChikuyonok是壹个人俄罗丝的前端开辟工程师和作者,他在优化方面有超级大的体贴入妙:从图纸、JavaScript效果到办事流程和节省时间的编码。访问他的主页和他的Twitter。

 

赞 2 收藏 2 评论

太阳集团游戏 2

TAG标签: www.22138com CSS
版权声明:本文由太阳集团发布于太阳2007娱乐官方网址,转载请注明出处:Zen Coding: 一种快速编写HTML/CSS代码的方法