当前位置:Gxlcms > html代码 > 让ZenCoding提升编码速度_html/css_WEB-ITnose

让ZenCoding提升编码速度_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:18人阅读

日前写了一篇关于VS神级插件Web Essentials的系列博客,其中在HTML&CSS操作技巧一节简单提到了ZenCoding,今天来详细说一下这个东西。

摘要

Zen Coding是一种使用CSS样式选择器语法更快速地编写HTML的方式。如果你使用的是VS,那么你可以安装了VS的插件Web Essentials之后,就可以使用Zen Coding编码方式了,关于Web Essentials的下载,请转到这里。如果你是用的其他编辑器,请到这里下载安装(需要FanQiang)。Zen Coding是2009年提出来的,已经更新了多次,正在变成更加有效地编写无聊的HTML受人欢迎的方式。

快速指南

下面是一些常用的Zen Coding功能,目前VS2013的Web Essentials插件已经支持。

  • '#' 创建一个id特性
  • '.' 创建一个类特性
  • '[]' 创建一个自定义特性
  • '>' 创建一个子元素
  • '+' 创建一个兄弟元素
  • '^' 提升元素层次
  • '*' 相当于乘号,会创建n次相同的东西。
  • '$' 代替一个自增的数字。
  • '$$' 用于有填充位的数字,比如00,01。
  • '{}' 创建元素的文本。
  • 可以做些啥呢?看下面这个复杂的例子:
    div#olDiv>ol>li.item*6>span{ZenCoding$$}.red
    按下Tab键后,它会生成下面的代码:

    1. ZenCoding01
    2. ZenCoding02
    3. ZenCoding03
    4. ZenCoding04
    5. ZenCoding05
    6. ZenCoding06

    ID和Class特性:#和.

    使用CSS样式语法可以创建一个元素,并给它赋予id或class特性。
    div#container.layout会生成下面的代码:

    自定义特性:[]

    可以使用中括号[]创建任何特性。
    div[title]会生成下面的代码:

    也可以创建多个特性并给特性赋值:
    input[placeholder="请输入姓名" type="text"]会生成下面的代码:

    子元素:>

    先要创建一个元素,然后才能创建它的子元素。
    比如,form#loginForm.login>input[type="text"]会生成下面的代码:

        

    兄弟元素:+

    使用Zen Coding可以很轻松地创建兄弟元素。
    footer>div>a+input可以生成下面的代码:

    提升元素层次:^

    >符号会降低元素的层次,然而^符号的作用相反,它是用来提升元素的层次的,而且还可以提升多个级别。比如,1^可以提升一个级别,4^可以提升4个级别。该功能不常用。

    如footer>div>a+input^^p,p标签要在input级别的基础上提升2个层次,这样p标签就和最外层的footer标签处于同一级别,所以,生成的代码如下:

    乘积:*

    创建n个同样的元素。
    如ul>li*6会生成下面的代码:

    元素序号:$

    当使用乘积*创建n个同样的元素时,可以使用$给它们添加一个自增的数字。注意:使用多个$操作符(如$$)会创建使用多个0填充的数字。
    如ul>li#id$$$*4会生成下面的代码:

    元素中的文本:{}

    要给元素输入文本时,可以使用{}符号。
    如ul>li*10>span{Windows $}会生成以下代码:

    • Windows 1
    • Windows 2
    • Windows 3
    • Windows 4
    • Windows 5
    • Windows 6
    • Windows 7
    • Windows 8
    • Windows 9
    • Windows 10

    联合所有的符号

    联合多个功能可以更快地编写一些相当酷的HTML,甚至可以为模板创建一些Knockout.js的绑定,然后只需要改变属性名就行了。

    例如section[data-bind="foreach:customers"]>div*4>input[type="text" data-bind="text:$$"]会生成下面的代码:

    组合:()

    组合式Zen Coding中强大的功能,它可以创建复杂的表达式。
    例如 div>(header>div)+section>(ul>li*2>a)+footer>(div>span)可以生成下面的代码:

        

    补充

    如果你还想了解更多的快捷语法,请下载这个表单文件(需要FanQiang)。

    人气教程排行