当前位置: 代码迷 >> HTML/CSS >> html/xml/css开发凶器-Zen Coding
  详细解决方案

html/xml/css开发凶器-Zen Coding

热度:628   发布时间:2012-08-24 10:00:20.0
html/xml/css开发利器------Zen Coding

Zen Coding是一个开源项目,支持各种文本编辑器,能迅速提高你的html/xml/css开发效率。

http://code.google.com/p/zen-coding/downloads/list


将zen Coding拷贝到你的文本编辑器目录下,重启就能在菜单栏中插件下找到Zen Coding选项。自己可以先熟悉一下快捷键。

当然,最重要的快捷键是:ctrl+E运行书写的语法。

在zen coding文件目录下, 有个zen coding.js文件。 里面记录了内容的转换,不必要完全记住这些快捷语法,关键掌握规律,it is easy。

Zen Coding语法解析:

?        输入文档:

?        文档标签:(这些都可以在那个js源代码里面去看,抓规律)

?        html:4t      html4过度

?        html:4s    4严格

?        html:xt      xhtml1.0 过度

?        html:xs    严格

?        html:xxs   xhtml1.1 过度

?        html:5   html5


?        一些标签记录:

?        输入html,再按chtl+e,便会将他自动转换成标签。其他的标签都是类似的。

?        输入a:link, a:mail 能自动加上属性。

?        input:b   就是button。

?        from:get  

?        from:post

?        style

?        script:src

?        a:mail[aa="a"]

转换成<a href="mailto:" aa="aaa"></a>

?        link:css

 <link rel="stylesheet"  type="text/css"  href="style.css" media="all" />

?        link:print 

<linkrel="stylesheet"  type="text/css" href="print.css" media="print" />

?        'ol+':简写的 'ol>li'。这种简写在符合标签里面用到。

<ol>
    <li></li>
</ol>

?        ul+

<ul>
    <li></li>
</ul>

?        ul#aa        #表示id名

?        ul.aa.bb       .表示应用的class

?        ul>a         >表示子元素

?        ul*5        *表示5个ul标签

?        ul$*5   $表示数字自增。这句就是创建ul1--ul5 五个标签。

?        a>b+b  +表示兄弟

<a href="">
<b></b>
<b></b>
</a>


?        实例解析:

?        div#header+div.name.app+div#content>div#foot  综合实例。


?        CSS标签:

?        也能像算术运算那样加上括号。可以自己将复杂的命令保存备用。

?        要在出现CSS的地方,如style标签内(要在head里面)。

?        @i      @import url(|)          

?        @m    @media print {\n\t|\n}

?        !      !important


?        CSS属性

?        fl     float

?        fl:l      float:left

?        pos

?        pl

其他的内容,自己看看那个zen coding.js代码。


其他学习资源:

http://www.cnblogs.com/jikey/archive/2009/12/19/1628002.html

http://baike.baidu.com/view/3371595.htm



  相关解决方案