前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >emmet(Zen coding)前端写代码神器

emmet(Zen coding)前端写代码神器

作者头像
deepcc
发布2018-05-16 14:39:55
2.1K0
发布2018-05-16 14:39:55
举报
文章被收录于专栏:deepcc

emmet前身zen coding。支持sublime Text。

基本上,大多数文本编辑器有允许你存储和再利用常用的代码块,称为“片段”。而片段是提高生产率的一个好方法,所有的实现都是常见的陷阱:你需要定义段第一,你不能在运行时扩展。

埃米特以片段的想法到一个新的水平:你可以像CSS表达式类型可以动态解析,并产生输出取决于你输入的缩写。埃米特是开发和优化Web开发者的工作依赖于HTML / XML和CSS,但可以用编程语言太。

官网:http://docs.emmet.io/

api:http://docs.emmet.io/cheat-sheet/

嵌套操作符

嵌套运算符用于在生成树中的位置的缩写元素:是否应该放置在内部或附近的上下文元素。

Child: >

使用 > 相互嵌套元素:

代码语言:javascript
复制
div>ul>li

...将产生的

代码语言:javascript
复制
<div>
    <ul>
        <li></li>
    </ul>
</div>

Sibling: +

使用+运算符将元素放置在同一个级别上:

代码语言:javascript
复制
div+p+bq

...将产生的

代码语言:javascript
复制
<div></div>
<p></p>
<blockquote></blockquote>

Climb-up: ^

随着 > 你要降下的所有同级元素的生成树和位置将解决对最最深的元素:

代码语言:javascript
复制
div+div>p>span+em

...将扩展到

代码语言:javascript
复制
<div></div>
<div>
    <p><span></span><em></em></p>
</div>

随着 ^ 操作符,你可以爬上一个层次的树和变化的背景下,下面的元素应该出现:

代码语言:javascript
复制
div+div>p>span+em^bq

...输出

代码语言:javascript
复制
<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

您可以使用许多 ^ 运算符如你喜欢,每个运营商将移动一级:

代码语言:javascript
复制
div+div>p>span+em^^^bq

...将输出

代码语言:javascript
复制
<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

Multiplication: *

随着 * 预算符可以定义元素应该输出多少次:

代码语言:javascript
复制
ul>li*5

...输出

代码语言:javascript
复制
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Grouping: ()

括号的使用Emmet在复杂的缩写子树分组用户:

代码语言:javascript
复制
div>(header>ul>li*2>a)+footer>p

...扩展到

代码语言:javascript
复制
<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

如果你使用浏览器的DOM,你可能觉得组文档片段:每个组包含缩写子树和所有以下元素插入在同一水平作为集团的第一个元素。

你们可以互相嵌套,并将它们与乘法运算的算子结合起来:

代码语言:javascript
复制
(div>dl>(dt+dd)*3)+footer>p

...生成

代码语言:javascript
复制
<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

与组,您可以从字面上写满页标记了一个单一的缩写,但请不要这样做。

属性算子

属性运算符用于修改输出元素的属性。例如,在HTML和XML可以快速添加类属性来生成元。

ID and CLASS

在CSS,你使用元素# ID和elem.class符号达到元素指定id或class属性。在蚂蚁,你可以使用同样的语法来添加这些属性来指定元素:

代码语言:javascript
复制
div#header+div.page+div#footer.class1.class2.class3

...输出

代码语言:javascript
复制
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

自定义属性

您可以使用[属性]符号(如CSS)添加自定义属性到你的元素:

代码语言:javascript
复制
td[title="Hello world!" colspan=3]

...输出

代码语言:javascript
复制
<td title="Hello world!" colspan="3"></td>
  • 你可以将尽可能多的属性,如你喜欢里面方括号。
  • 你不要有指定属性值:TD ColSpan [标题]会产生< TD ColSpan =“”标题=”>定位停驻点在每个空的属性(如果你的编辑器支持它们)。
  • 可以使用单引号或双引号来引用属性值。

Item numbering: $

与乘法*运算符您可以重复元素,但与$您可以数他们。将$操作符输入元素的名称、属性的名称或属性的值,以输出当前数的重复元素:

代码语言:javascript
复制
ul>li.item$*5

...输出

代码语言:javascript
复制
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

你可以使用多个$在连续零数字键盘:

代码语言:javascript
复制
ul>li.item$$$*5

...

代码语言:javascript
复制
<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

更改编号基础和方向

与@修改器,您可以更改编号方向(上升或下降)和基(例如开始值)。

例如,改变方向,增加@ -在$:

代码语言:javascript
复制
ul>li.item$@-*5

...

代码语言:javascript
复制
<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

要改变计数器基准值,添加“@”改为$:

代码语言:javascript
复制
ul>li.item$@3*5

...

代码语言:javascript
复制
<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

你们可以一起使用这些修饰词:

代码语言:javascript
复制
ul>li.item$@-3*5

...

代码语言:javascript
复制
<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>

Text: {}

可以使用花括号添加文本到元素:

代码语言:javascript
复制
a{Click me}

...

代码语言:javascript
复制
<a href="">Click me</a>

请注意{text}使用作为一个单独的元素解析(like, divp 等)但在元素后写的特殊意义。例如 a{click} 和 a>{click}将产生相同的输出,但a{click}+b{here} and a>{click}+b{here}不会:

代码语言:javascript
复制
<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>

<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>

In second example the <b> element is placed inside <a> element. And that’s the difference: when {text} is written right after element, it doesn’t change parent context. Here’s more complex example showing why it is important:

在第二个例子中,元素被放置在<元素>元素。这是不同的:当{文本}是在元素后写的,它不改变父上下文。这里的更复杂的例子说明为什么它是重要的:

代码语言:javascript
复制
p>{Click }+a{here}+{ to continue}

...

代码语言:javascript
复制
<p>Click <a href="">here</a> to continue</p>

In this example, to write Click here to continue inside <p> element we have explicitly move down the tree with > operator after p, but in case of a element we don’t have to, since we need <a> element with here word only, without changing parent context.

For comparison, here’s the same abbreviation written without child > operator:

在这个例子中,对写点击这里继续<p>元素内我们有明确下移树>算子P后,但在一个元素的情况下我们不必,因为我们需要< >元素只有在词,不改变父上下文。

为了比较,这里的缩写写的是没有儿童>操作符:

代码语言:javascript
复制
p{Click }+a{here}+{ to continue}

...

代码语言:javascript
复制
<p>Click </p>
<a href="">here</a> to continue

Notes on abbreviation formatting

关于缩写格式的说明

When you get familiar with Emmet’s abbreviations syntax, you may want to use some formatting to make your abbreviations more readable. For example, use spaces between elements and operators, like this:

当你熟悉埃梅特缩写语法,你可以用一些格式使你更可读的缩写。例如,元素和运营商之间使用空格,这样:

代码语言:javascript
复制
(header > ul.nav > li*5) + footer

...

But it won’t work, because space is a stop symbol where Emmet stops abbreviation parsing.

Many users mistakenly think that each abbreviation should be written in a new line, but they are wrong: you can type and expand abbreviation anywhere in the text:

但它不会工作,因为空间是一个停止标志,埃米特停止缩写解析。

许多用户误认为每一个缩写都应该写在一个新的直线上,但它们是错误的:你可以在文本的任何地方输入和扩展缩写:

This is why Emmet needs some indicators (like spaces) where it should stop parsing to not expand anything that you don’t need. If you’re still thinking that such formatting is required for complex abbreviations to make them more readable:

  • Abbreviations are not a template language, they don’t have to be “readable”, they have to be “quickly expandable and removable”.
  • You don’t really need to write complex abbreviations. Stop thinking that “typing” is the slowest process in web-development. You’ll quickly find out that constructing a single complex abbreviation is much slower and error-prone than constructing and typing a few short ones.

这就是为什么蚂蚁需要一些指标(如空格),应停止解析不扩大你不需要的东西。如果你还认为这样的格式是需要复杂的缩写,使他们更可读:

  • 缩写不是一种模板语言,它们不必是“可读性”,它们必须是“快速可扩展和可移动”。
  • 你真的不需要写复杂的缩写。不要以为“打字”是网络发展最慢的过程。你会很快发现,构建一个单一的复杂的缩写是慢得多,容易出错,比建设和键入一些短的。

以上翻译自:http://docs.emmet.io/abbreviations/syntax/

Zen CSS properties

Based on CSS 3 draft specification

代码语言:javascript
复制
Property                                    Alias

Special Rules

代码语言:javascript
复制
@import url();                              @i
代码语言:javascript
复制
@mediaprint{                              @m
    
    }
代码语言:javascript
复制
@font-face {                                @f
    font-family:;
    src:url();
    }
代码语言:javascript
复制
!important                                  !
代码语言:javascript
复制
expression()                                exp

Properties Groups

Sorting Methods

  • Positioning
  • Box behavior and properties
  • Sizing
  • Color appearance
  • Special content types
  • Text
  • Visual properties
  • Print

Positioning

代码语言:javascript
复制
position:;                                  pos
position:static;                            pos:s
position:absolute;                          pos:a
position:relative;                          pos:r
position:fixed;                             pos:f
代码语言:javascript
复制
top:;                                       t
top:auto;                                   t:a
代码语言:javascript
复制
right:;                                     r
right:auto;                                 r:a
代码语言:javascript
复制
bottom:;                                    b
bottom:auto;                                b:a
代码语言:javascript
复制
left:;                                      l
left:auto;                                  l:a
代码语言:javascript
复制
z-index:;                                   z
z-index:auto;                               z:a

Box behavior and properties

代码语言:javascript
复制
float:;                                     fl
float:none;                                 fl:n
float:left;                                 fl:l
float:right;                                fl:r
代码语言:javascript
复制
clear:;                                     cl
clear:none;                                 cl:n
clear:left;                                 cl:l
clear:right;                                cl:r
clear:both;                                 cl:b
代码语言:javascript
复制
display:;                                   d
display:none;                               d:n
display:block;                              d:b
display:inline;                             d:i
display:inline-block;                       d:ib
display:-moz-inline-box;                   d:mib
display:-moz-inline-stack;                 d:mis
display:list-item;                          d:li
display:run-in;                             d:ri
display:compact;                            d:cp
display:table;                              d:tb
display:inline-table;                       d:itb
display:table-caption;                      d:tbcp
display:table-column;                       d:tbcl
display:table-column-group;                 d:tbclg
display:table-header-group;                 d:tbhg
display:table-footer-group;                 d:tbfg
display:table-row;                          d:tbr
display:table-row-group;                    d:tbrg
display:table-cell;                         d:tbc
代码语言:javascript
复制
visibility:;                                v
visibility:visible;                         v:v
visibility:hidden;                          v:h
visibility:collapse;                        v:c
代码语言:javascript
复制
overflow:;                                  ov
overflow:visible;                           ov:v
overflow:hidden;                            ov:h
overflow:scroll;                            ov:s
overflow:auto;                              ov:a
代码语言:javascript
复制
overflow-x:;                                ovx
overflow-x:visible;                         ovx:v
overflow-x:hidden;                          ovx:h
overflow-x:scroll;                          ovx:s
overflow-x:auto;                            ovx:a
代码语言:javascript
复制
overflow-y:;                                ovy
overflow-y:visible;                         ovy:v
overflow-y:hidden;                          ovy:h
overflow-y:scroll;                          ovy:s
overflow-y:auto;                            ovy:a
代码语言:javascript
复制
overflow-style:;                            ovs
overflow-style:auto;                        ovs:a
overflow-style:scrollbar;                   ovs:s
overflow-style:panner;                      ovs:p
overflow-style:move;                        ovs:m
overflow-style:marquee;                     ovs:mq
代码语言:javascript
复制
zoom:1;                                     zoo
代码语言:javascript
复制
clip:;                                      cp
clip:auto;                                  cp:a
clip:rect(0000);                         cp:r
代码语言:javascript
复制
box-sizing:;                                bxz
box-sizing:content-box;                     bxz:cb
box-sizing:border-box;                      bxz:bb
代码语言:javascript
复制
box-shadow:;                                bxsh
box-shadow:none;                            bxsh:n
box-shadow:000#000;                      bxsh+
-webkit-box-shadow:;                        bxsh:w
-webkit-box-shadow:000#000;              bxsh:w+
-moz-box-shadow:;                           bxsh:m
-moz-box-shadow:0000#000;               bxsh:m+

Sizing

代码语言:javascript
复制
margin:;                                    m
margin:auto;                                m:a
margin:0;                                   m:0
margin:00;                                 m:2
margin:000;                               m:3
margin:0000;                             m:4
代码语言:javascript
复制
margin-top:;                                mt
margin-top:auto;                            mt:a
代码语言:javascript
复制
margin-right:;                              mr
margin-right:auto;                          mr:a
代码语言:javascript
复制
margin-bottom:;                             mb
margin-bottom:auto;                         mb:a
代码语言:javascript
复制
margin-left:;                               ml
margin-left:auto;                           ml:a
代码语言:javascript
复制
padding:;                                   p
padding:0;                                  p:0
padding:00;                                p:2
padding:000;                              p:3
padding:0000;                            p:4
代码语言:javascript
复制
padding-top:;                               pt
padding-right:;                             pr
padding-bottom:;                            pb
padding-left:;                              pl
代码语言:javascript
复制
width:;                                     w
width:auto;                                 w:a
代码语言:javascript
复制
height:;                                    h
height:auto;                                h:a
代码语言:javascript
复制
max-width:;                                 maw
max-width:none;                             maw:n
代码语言:javascript
复制
max-height:;                                mah
max-height:none;                            mah:n
代码语言:javascript
复制
min-width:;                                 miw
min-height:;                                mih

Color appearance

代码语言:javascript
复制
outline:;                                   o
outline:none;                               o:n
outline:1px solid #000;                     o+
代码语言:javascript
复制
outline-offset:;                            oo
outline-width:;                             ow
outline-style:;                             os
代码语言:javascript
复制
outline-color:#000;                         oc
outline-color:invert;                       oc:i
代码语言:javascript
复制
border:;                                    bd
border:none;                                bd:n
border:1px solid #000;                      bd+
代码语言:javascript
复制
border-break:;                              bdbk
border-break:close;                         bdbk:c
代码语言:javascript
复制
border-collapse:;                           bdcl
border-collapse:collapse;                   bdcl:c
border-collapse:separate;                   bdcl:s
代码语言:javascript
复制
border-color:#000;                          bdc
代码语言:javascript
复制
border-image:;                                          bdi
border-image:none;                                      bdi:n
border-image:url()0 repeat;                            bdi:+
-webkit-border-image:;                                  bdi:w
-webkit-border-image:url()0 repeat;                    bdi:w+
-moz-border-image:;                                     bdi:m
-moz-border-image:url()0 repeat;                       bdi:m+
代码语言:javascript
复制
border-top-image:;                          bdti
border-top-image:none;                      bdti:n
代码语言:javascript
复制
border-right-image:;                        bdri
border-right-image:none;                    bdri:n
代码语言:javascript
复制
border-bottom-image:;                       bdbi
border-bottom-image:none;                   bdbi:n
代码语言:javascript
复制
border-left-image:;                         bdli
border-left-image:none;                     bdli:n
代码语言:javascript
复制
border-corner-image:;                       bdci
border-corner-image:none;                   bdci:n
border-corner-image:continue;               bdci:c
代码语言:javascript
复制
border-top-left-image:;                     bdtli
border-top-left-image:none;                 bdtli:n
border-top-left-image:continue;             bdtli:c
代码语言:javascript
复制
border-top-right-image:;                    bdtri
border-top-right-image:none;                bdtri:n
border-top-right-image:continue;            bdtri:c
代码语言:javascript
复制
border-bottom-right-image:;                 bdbri
border-bottom-right-image:none;             bdbri:n
border-bottom-right-image:continue;         bdbri:c
代码语言:javascript
复制
border-bottom-left-image:;                  bdbli
border-bottom-left-image:none;              bdbli:n
border-bottom-left-image:continue;          bdbli:c
代码语言:javascript
复制
border-fit:;                                bdf
border-fit:clip;                            bdf:c
border-fit:repeat;                          bdf:r
border-fit:scale;                           bdf:sc
border-fit:stretch;                         bdf:st
border-fit:overwrite;                       bdf:ow
border-fit:overflow;                        bdf:of
border-fit:space;                           bdf:sp
代码语言:javascript
复制
border-length:;                             bdlt
border-length:auto;                         bdlt:a
代码语言:javascript
复制
border-spacing:;                            bdsp
代码语言:javascript
复制
border-style:;                              bds
border-style:none;                          bds:n
border-style:hidden;                        bds:h
border-style:dotted;                        bds:dt
border-style:dashed;                        bds:ds
border-style:solid;                         bds:s
border-style:double;                        bds:db
border-style:dot-dash;                      bds:dtds
border-style:dot-dot-dash;                  bds:dtdtds
border-style:wave;                          bds:w
border-style:groove;                        bds:g
border-style:ridge;                         bds:r
border-style:inset;                         bds:i
border-style:outset;                        bds:o
代码语言:javascript
复制
border-width:;                              bdw
代码语言:javascript
复制
border-top:;                                bdt
border-top:none;                            bdt:n
border-top:1px solid #000;                  bdt+
代码语言:javascript
复制
border-top-width:;                          bdtw
代码语言:javascript
复制
border-top-style:;                          bdts
border-top-style:none;                      bdts:n
代码语言:javascript
复制
border-top-color:#000;                      bdtc
代码语言:javascript
复制
border-right:;                              bdr
border-right:none;                          bdr:n
border-right:1px solid #000;                bdr+
代码语言:javascript
复制
border-right-width:;                        bdrw
代码语言:javascript
复制
border-right-style:;                        bdrs
border-right-style:none;                    bdrs:n
代码语言:javascript
复制
border-right-color:#000;                    bdrc
代码语言:javascript
复制
border-bottom:;                             bdb
border-bottom:none;                         bdb:n
border-bottom:1px solid #000;               bdb+
代码语言:javascript
复制
border-bottom-width:;                       bdbw
代码语言:javascript
复制
border-bottom-style:;                       bdbs
border-bottom-style:none;                   bdbs:n
代码语言:javascript
复制
border-bottom-color:#000;                   bdbc
代码语言:javascript
复制
border-left:;                               bdl
border-left:none;                           bdl:n
border-left:1px solid #000;                 bdl+
代码语言:javascript
复制
border-left-width:;                         bdlw
代码语言:javascript
复制
border-left-style:;                         bdls
border-left-style:none;                     bdls:n
代码语言:javascript
复制
border-left-color:#000;                     bdlc
代码语言:javascript
复制
border-radius:;                             bdrs
-webkit-border-radius:;                     bdrs:w
-moz-border-radius:;                        bdrs:m
border-top-right-radius:;                   bdtrrs
border-top-left-radius:;                    bdtlrs
border-bottom-right-radius:;                bdbrrs
border-bottom-left-radius:;                 bdblrs
代码语言:javascript
复制
background:;                                                                               bg
background:none;                                                                           bg:n
background:#FFF url() 0 0 no-repeat;                                                       bg+
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='',sizingMethod='crop');     bg:ie
代码语言:javascript
复制
background-color:#FFF;                      bgc
background-color:transparent;               bgc:t
代码语言:javascript
复制
background-image:url();                     bgi
background-image:none;                      bgi:n
代码语言:javascript
复制
background-repeat:;                         bgr
background-repeat:repeat;                   bgr:r
background-repeat:repeat-x;                 bgr:x
background-repeat:repeat-y;                 bgr:y
background-repeat:no-repeat;                bgr:n
代码语言:javascript
复制
background-attachment:;                     bga
background-attachment:fixed;                bga:f
background-attachment:scroll;               bga:s
代码语言:javascript
复制
background-position:00;                    bgp
background-position-x:;                     bgpx
background-position-y:;                     bgpy
代码语言:javascript
复制
background-break:;                          bgbk
background-break:bounding-box;              bgbk:bb
background-break:each-box;                  bgbk:eb
background-break:continuous;                bgbk:c
代码语言:javascript
复制
background-clip:;                           bgcp
background-clip:border-box;                 bgcp:bb
background-clip:padding-box;                bgcp:pb
background-clip:content-box;                bgcp:cb
background-clip:no-clip;                    bgcp:nc
代码语言:javascript
复制
background-origin:;                         bgo
background-origin:padding-box;              bgo:pb
background-origin:border-box;               bgo:bb
background-origin:content-box;              bgo:cb
代码语言:javascript
复制
background-size:;                           bgz
background-size:auto;                       bgz:a
background-size:contain;                    bgz:ct
background-size:cover;                      bgz:cv
代码语言:javascript
复制
color:#000;                                 c

Special content types

代码语言:javascript
复制
table-layout:;                              tbl
table-layout:auto;                          tbl:a
table-layout:fixed;                         tbl:f
代码语言:javascript
复制
caption-side:;                              cps
caption-side:top;                           cps:t
caption-side:bottom;                        cps:b
代码语言:javascript
复制
empty-cells:;                               ec
empty-cells:show;                           ec:s
empty-cells:hide;                           ec:h
代码语言:javascript
复制
list-style:;                                lis
list-style:none;                            lis:n
代码语言:javascript
复制
list-style-position:;                       lisp
list-style-position:inside;                 lisp:i
list-style-position:outside;                lisp:o
代码语言:javascript
复制
list-style-type:;                           list
list-style-type:none;                       list:n
list-style-type:disc;                       list:d
list-style-type:circle;                     list:c
list-style-type:square;                     list:s
list-style-type:decimal;                    list:dc
list-style-type:decimal-leading-zero;       list:dclz
list-style-type:lower-roman;                list:lr
list-style-type:upper-roman;                list:ur
代码语言:javascript
复制
list-style-image:;                          lisi
list-style-image:none;                      lisi:n
代码语言:javascript
复制
quotes:;                                    q
quotes:none;                                q:n
quotes:'\00AB''\00BB''\201E''\201C';     q:ru
quotes:'\201C''\201D''\2018''\2019';     q:en
代码语言:javascript
复制
content:;                                   ct
content:normal;                             ct:n
content:open-quote;                         ct:oq
content:no-open-quote;                      ct:noq
content:close-quote;                        ct:cq
content:no-close-quote;                     ct:ncq
content:attr();                             ct:a
content:counter();                          ct:c
content:counters();                         ct:cs
代码语言:javascript
复制
counter-increment:;                         coi
counter-reset:;                             cor

Text

代码语言:javascript
复制
vertical-align:;                            va
vertical-align:super;                       va:sup
vertical-align:top;                         va:t
vertical-align:text-top;                    va:tt
vertical-align:middle;                      va:m
vertical-align:baseline;                    va:bl
vertical-align:bottom;                      va:b
vertical-align:text-bottom;                 va:tb
vertical-align:sub;                         va:sub
代码语言:javascript
复制
text-align:;                                ta
text-align:left;                            ta:l
text-align:center;                          ta:c
text-align:right;                           ta:r
text-align:justify;                         ta:j
代码语言:javascript
复制
text-align-last:;                           tal
text-align-last:auto;                       tal:a
text-align-last:left;                       tal:l
text-align-last:center;                     tal:c
text-align-last:right;                      tal:r
代码语言:javascript
复制
text-decoration:;                           td
text-decoration:none;                       td:n
text-decoration:overline;                   td:o
text-decoration:line-through;               td:l
text-decoration:underline;                  td:u
代码语言:javascript
复制
text-emphasis:;                             te
text-emphasis:none;                         te:n
text-emphasis:accent;                       te:ac
text-emphasis:dot;                          te:dt
text-emphasis:circle;                       te:c
text-emphasis:disc;                         te:ds
text-emphasis:before;                       te:b
text-emphasis:after;                        te:a
代码语言:javascript
复制
text-height:;                               th
text-height:auto;                           th:a
text-height:font-size;                      th:f
text-height:text-size;                      th:t
text-height:max-size;                       th:m
代码语言:javascript
复制
text-indent:;                               ti
text-indent:-9999px;                        ti:-
代码语言:javascript
复制
text-justify:;                              tj
text-justify:auto;                          tj:a
text-justify:inter-word;                    tj:iw
text-justify:inter-ideograph;               tj:ii
text-justify:inter-cluster;                 tj:ic
text-justify:distribute;                    tj:d
text-justify:kashida;                       tj:k
text-justify:tibetan;                       tj:t
代码语言:javascript
复制
text-outline:;                              to
text-outline:none;                          to:n
text-outline:00#000;                      to+
代码语言:javascript
复制
text-replace:;                              tr
text-replace:none;                          tr:n
代码语言:javascript
复制
text-transform:;                            tt
text-transform:none;                        tt:n
text-transform:uppercase;                   tt:u
text-transform:capitalize;                  tt:c
text-transform:lowercase;                   tt:l
代码语言:javascript
复制
text-wrap:;                                 tw
text-wrap:normal;                           tw:n
text-wrap:none;                             tw:no
text-wrap:unrestricted;                     tw:u
text-wrap:suppress;                         tw:s
代码语言:javascript
复制
text-shadow:;                               tsh
text-shadow:none;                           tsh:n
text-shadow:000#000;                     tsh+
代码语言:javascript
复制
line-height:;                               lh
代码语言:javascript
复制
white-space:;                               whs
white-space:normal;                         whs:n
white-space:pre;                            whs:p
white-space:nowrap;                         whs:nw
white-space:pre-wrap;                       whs:pw
white-space:pre-line;                       whs:pl
代码语言:javascript
复制
white-space-collapse:;                      whsc
white-space-collapse:normal;                whsc:n
white-space-collapse:keep-all;              whsc:k
white-space-collapse:loose;                 whsc:l
white-space-collapse:break-strict;          whsc:bs
white-space-collapse:break-all;             whsc:ba
代码语言:javascript
复制
word-break:;                                wob
word-break:normal;                          wob:n
word-break:keep-all;                        wob:k
word-break:loose;                           wob:l
word-break:break-strict;                    wob:bs
word-break:break-all;                       wob:ba
代码语言:javascript
复制
word-spacing:;                              wos
代码语言:javascript
复制
word-wrap:;                                 wow
word-wrap:normal;                           wow:n
word-wrap:none;                             wow:no
word-wrap:unrestricted;                     wow:u
word-wrap:suppress;                         wow:s
代码语言:javascript
复制
letter-spacing:;                            lts
代码语言:javascript
复制
font:;                                      f
font:1emArial,sans-serif;                  f+
代码语言:javascript
复制
font-weight:;                               fw
font-weight:normal;                         fw:n
font-weight:bold;                           fw:b
font-weight:bolder;                         fw:br
font-weight:lighter;                        fw:lr
代码语言:javascript
复制
font-style:;                                fs
font-style:normal;                          fs:n
font-style:italic;                          fs:i
font-style:oblique;                         fs:o
代码语言:javascript
复制
font-variant:;                              fv
font-variant:normal;                        fv:n
font-variant:small-caps;                    fv:sc
代码语言:javascript
复制
font-size:;                                 fz
代码语言:javascript
复制
font-size-adjust:;                          fza
font-size-adjust:none;                      fza:n
代码语言:javascript
复制
font-family:;                                               ff
font-family:Georgia,'Times New Roman',serif;              ff:s
font-family:Helvetica,Arial,sans-serif;                     ff:ss
font-family:'Monotype Corsiva','Comic Sans MS',cursive;     ff:c
font-family:Capitals,Impact,fantasy;                        ff:f
font-family:Monaco,'Courier New',monospace;                 ff:m
代码语言:javascript
复制
font-effect:;                               fef
font-effect:none;                           fef:n
font-effect:engrave;                        fef:eg
font-effect:emboss;                         fef:eb
font-effect:outline;                        fef:o
代码语言:javascript
复制
font-emphasize:;                            fem
代码语言:javascript
复制
font-emphasize-position:;                   femp
font-emphasize-position:before;             femp:b
font-emphasize-position:after;              femp:a
代码语言:javascript
复制
font-emphasize-style:;                      fems
font-emphasize-style:none;                  fems:n
font-emphasize-style:accent;                fems:ac
font-emphasize-style:dot;                   fems:dt
font-emphasize-style:circle;                fems:c
font-emphasize-style:disc;                  fems:ds
代码语言:javascript
复制
font-smooth:;                               fsm
font-smooth:auto;                           fsm:a
font-smooth:never;                          fsm:n
font-smooth:always;                         fsm:aw
代码语言:javascript
复制
font-stretch:;                              fst
font-stretch:normal;                        fst:n
font-stretch:ultra-condensed;               fst:uc
font-stretch:extra-condensed;               fst:ec
font-stretch:condensed;                     fst:c
font-stretch:semi-condensed;                fst:sc
font-stretch:semi-expanded;                 fst:se
font-stretch:expanded;                      fst:e
font-stretch:extra-expanded;                fst:ee
font-stretch:ultra-expanded;                fst:ue

Visual properties

代码语言:javascript
复制
opacity:;                                                               op
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);            op:ie
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';      op:ms
代码语言:javascript
复制
resize:;                                    rz
resize:none;                                rz:n
resize:both;                                rz:b
resize:horizontal;                          rz:h
resize:vertical;                            rz:v
代码语言:javascript
复制
cursor:;                                    cur
cursor:auto;                                cur:a
cursor:default;                             cur:d
cursor:crosshair;                           cur:c
cursor:hand;                                cur:ha
cursor:help;                                cur:he
cursor:move;                                cur:m
cursor:pointer;                             cur:p
cursor:text;                                cur:t

Print

代码语言:javascript
复制
page-break-before:;                         pgbb
page-break-before:auto;                     pgbb:a
page-break-before:always;                   pgbb:aw
page-break-before:left;                     pgbb:l
page-break-before:right;                    pgbb:r
代码语言:javascript
复制
page-break-inside:;                         pgbi
page-break-inside:auto;                     pgbi:a
page-break-inside:avoid;                    pgbi:av
代码语言:javascript
复制
page-break-after:;                          pgba
page-break-after:auto;                      pgba:a
page-break-after:always;                    pgba:aw
page-break-after:left;                      pgba:l
page-break-after:right;                     pgba:r
代码语言:javascript
复制
orphans:;                                   orp
widows:;                                    wid

原链接:https://code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2013-03-13 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Child: >
  • Sibling: +
  • Climb-up: ^
  • Multiplication: *
  • Grouping: ()
  • 属性算子
    • ID and CLASS
      • 自定义属性
        • Item numbering: $
          • 更改编号基础和方向
          • Text: {}
          • Notes on abbreviation formatting
          • Special Rules
          • Properties Groups
            • Sorting Methods
              • Positioning
                • Box behavior and properties
                  • Sizing
                    • Color appearance
                      • Special content types
                        • Text
                          • Visual properties
                            • Print
                            领券
                            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档