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: `>`

使用 > 相互嵌套元素：

div>ul>li

...将产生的

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

Sibling: `+`

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

div+p+bq

...将产生的

<div></div>
<p></p>
<blockquote></blockquote>

Climb-up: `^`

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

div+div>p>span+em

...将扩展到

<div></div>
<div>
    <p><span></span><em></em></p>
</div>

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

div+div>p>span+em^bq

...输出

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

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

div+div>p>span+em^^^bq

...将输出

<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

Multiplication: `*`

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

ul>li*5

...输出

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

Grouping: `()`

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

div>(header>ul>li*2>a)+footer>p

...扩展到

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

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

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

(div>dl>(dt+dd)*3)+footer>p

...生成

<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属性。在蚂蚁，你可以使用同样的语法来添加这些属性来指定元素：

div#header+div.page+div#footer.class1.class2.class3

...输出

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

自定义属性

您可以使用[属性]符号（如CSS）添加自定义属性到你的元素：

td[title="Hello world!" colspan=3]

...输出

<td title="Hello world!" colspan="3"></td>

你可以将尽可能多的属性，如你喜欢里面方括号。
你不要有指定属性值：TD ColSpan [标题]会产生< TD ColSpan =“”标题=”>定位停驻点在每个空的属性（如果你的编辑器支持它们）。
可以使用单引号或双引号来引用属性值。

Item numbering: `$`

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

ul>li.item$*5

...输出

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

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

ul>li.item$$$*5

...

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

更改编号基础和方向

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

例如，改变方向，增加@ -在$：

ul>li.item$@-*5

...

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

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

ul>li.item$@3*5

...

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

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

ul>li.item$@-3*5

...

<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>

Text: `{}`

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

a{Click me}

...

<a href="">Click me</a>

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

<!-- 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:

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

p>{Click }+a{here}+{ to continue}

...

<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后，但在一个元素的情况下我们不必，因为我们需要< >元素只有在词，不改变父上下文。

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

p{Click }+a{here}+{ to continue}

...

<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:

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

(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

Property                                    Alias

Special Rules

@import url();                              @i

@mediaprint{                              @m
    
    }

@font-face {                                @f
    font-family:;
    src:url();
    }

!important                                  !

expression()                                exp

Properties Groups

Sorting Methods

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

Positioning

position:;                                  pos
position:static;                            pos:s
position:absolute;                          pos:a
position:relative;                          pos:r
position:fixed;                             pos:f

top:;                                       t
top:auto;                                   t:a

right:;                                     r
right:auto;                                 r:a

bottom:;                                    b
bottom:auto;                                b:a

left:;                                      l
left:auto;                                  l:a

z-index:;                                   z
z-index:auto;                               z:a

Box behavior and properties

float:;                                     fl
float:none;                                 fl:n
float:left;                                 fl:l
float:right;                                fl:r

clear:;                                     cl
clear:none;                                 cl:n
clear:left;                                 cl:l
clear:right;                                cl:r
clear:both;                                 cl:b

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

visibility:;                                v
visibility:visible;                         v:v
visibility:hidden;                          v:h
visibility:collapse;                        v:c

overflow:;                                  ov
overflow:visible;                           ov:v
overflow:hidden;                            ov:h
overflow:scroll;                            ov:s
overflow:auto;                              ov:a

overflow-x:;                                ovx
overflow-x:visible;                         ovx:v
overflow-x:hidden;                          ovx:h
overflow-x:scroll;                          ovx:s
overflow-x:auto;                            ovx:a

overflow-y:;                                ovy
overflow-y:visible;                         ovy:v
overflow-y:hidden;                          ovy:h
overflow-y:scroll;                          ovy:s
overflow-y:auto;                            ovy:a

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

zoom:1;                                     zoo

clip:;                                      cp
clip:auto;                                  cp:a
clip:rect(0000);                         cp:r

box-sizing:;                                bxz
box-sizing:content-box;                     bxz:cb
box-sizing:border-box;                      bxz:bb

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

margin:;                                    m
margin:auto;                                m:a
margin:0;                                   m:0
margin:00;                                 m:2
margin:000;                               m:3
margin:0000;                             m:4

margin-top:;                                mt
margin-top:auto;                            mt:a

margin-right:;                              mr
margin-right:auto;                          mr:a

margin-bottom:;                             mb
margin-bottom:auto;                         mb:a

margin-left:;                               ml
margin-left:auto;                           ml:a

padding:;                                   p
padding:0;                                  p:0
padding:00;                                p:2
padding:000;                              p:3
padding:0000;                            p:4

padding-top:;                               pt
padding-right:;                             pr
padding-bottom:;                            pb
padding-left:;                              pl

width:;                                     w
width:auto;                                 w:a

height:;                                    h
height:auto;                                h:a

max-width:;                                 maw
max-width:none;                             maw:n

max-height:;                                mah
max-height:none;                            mah:n

min-width:;                                 miw
min-height:;                                mih

Color appearance

outline:;                                   o
outline:none;                               o:n
outline:1px solid #000;                     o+

outline-offset:;                            oo
outline-width:;                             ow
outline-style:;                             os

outline-color:#000;                         oc
outline-color:invert;                       oc:i

border:;                                    bd
border:none;                                bd:n
border:1px solid #000;                      bd+

border-break:;                              bdbk
border-break:close;                         bdbk:c

border-collapse:;                           bdcl
border-collapse:collapse;                   bdcl:c
border-collapse:separate;                   bdcl:s

border-color:#000;                          bdc

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+

border-top-image:;                          bdti
border-top-image:none;                      bdti:n

border-right-image:;                        bdri
border-right-image:none;                    bdri:n

border-bottom-image:;                       bdbi
border-bottom-image:none;                   bdbi:n

border-left-image:;                         bdli
border-left-image:none;                     bdli:n

border-corner-image:;                       bdci
border-corner-image:none;                   bdci:n
border-corner-image:continue;               bdci:c

border-top-left-image:;                     bdtli
border-top-left-image:none;                 bdtli:n
border-top-left-image:continue;             bdtli:c

border-top-right-image:;                    bdtri
border-top-right-image:none;                bdtri:n
border-top-right-image:continue;            bdtri:c

border-bottom-right-image:;                 bdbri
border-bottom-right-image:none;             bdbri:n
border-bottom-right-image:continue;         bdbri:c

border-bottom-left-image:;                  bdbli
border-bottom-left-image:none;              bdbli:n
border-bottom-left-image:continue;          bdbli:c

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

border-length:;                             bdlt
border-length:auto;                         bdlt:a

border-spacing:;                            bdsp

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

border-width:;                              bdw

border-top:;                                bdt
border-top:none;                            bdt:n
border-top:1px solid #000;                  bdt+

border-top-width:;                          bdtw

border-top-style:;                          bdts
border-top-style:none;                      bdts:n

border-top-color:#000;                      bdtc

border-right:;                              bdr
border-right:none;                          bdr:n
border-right:1px solid #000;                bdr+

border-right-width:;                        bdrw

border-right-style:;                        bdrs
border-right-style:none;                    bdrs:n

border-right-color:#000;                    bdrc

border-bottom:;                             bdb
border-bottom:none;                         bdb:n
border-bottom:1px solid #000;               bdb+

border-bottom-width:;                       bdbw

border-bottom-style:;                       bdbs
border-bottom-style:none;                   bdbs:n

border-bottom-color:#000;                   bdbc

border-left:;                               bdl
border-left:none;                           bdl:n
border-left:1px solid #000;                 bdl+

border-left-width:;                         bdlw

border-left-style:;                         bdls
border-left-style:none;                     bdls:n

border-left-color:#000;                     bdlc

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

background:;                                                                               bg
background:none;                                                                           bg:n
background:#FFF url() 0 0 no-repeat;                                                       bg+
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='',sizingMethod='crop');     bg:ie

background-color:#FFF;                      bgc
background-color:transparent;               bgc:t

background-image:url();                     bgi
background-image:none;                      bgi:n

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

background-attachment:;                     bga
background-attachment:fixed;                bga:f
background-attachment:scroll;               bga:s

background-position:00;                    bgp
background-position-x:;                     bgpx
background-position-y:;                     bgpy

background-break:;                          bgbk
background-break:bounding-box;              bgbk:bb
background-break:each-box;                  bgbk:eb
background-break:continuous;                bgbk:c

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

background-origin:;                         bgo
background-origin:padding-box;              bgo:pb
background-origin:border-box;               bgo:bb
background-origin:content-box;              bgo:cb

background-size:;                           bgz
background-size:auto;                       bgz:a
background-size:contain;                    bgz:ct
background-size:cover;                      bgz:cv

color:#000;                                 c

Special content types

table-layout:;                              tbl
table-layout:auto;                          tbl:a
table-layout:fixed;                         tbl:f

caption-side:;                              cps
caption-side:top;                           cps:t
caption-side:bottom;                        cps:b

empty-cells:;                               ec
empty-cells:show;                           ec:s
empty-cells:hide;                           ec:h

list-style:;                                lis
list-style:none;                            lis:n

list-style-position:;                       lisp
list-style-position:inside;                 lisp:i
list-style-position:outside;                lisp:o

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

list-style-image:;                          lisi
list-style-image:none;                      lisi:n

quotes:;                                    q
quotes:none;                                q:n
quotes:'\00AB''\00BB''\201E''\201C';     q:ru
quotes:'\201C''\201D''\2018''\2019';     q:en

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

counter-increment:;                         coi
counter-reset:;                             cor

Text

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

text-align:;                                ta
text-align:left;                            ta:l
text-align:center;                          ta:c
text-align:right;                           ta:r
text-align:justify;                         ta:j

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

text-decoration:;                           td
text-decoration:none;                       td:n
text-decoration:overline;                   td:o
text-decoration:line-through;               td:l
text-decoration:underline;                  td:u

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

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

text-indent:;                               ti
text-indent:-9999px;                        ti:-

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

text-outline:;                              to
text-outline:none;                          to:n
text-outline:00#000;                      to+

text-replace:;                              tr
text-replace:none;                          tr:n

text-transform:;                            tt
text-transform:none;                        tt:n
text-transform:uppercase;                   tt:u
text-transform:capitalize;                  tt:c
text-transform:lowercase;                   tt:l

text-wrap:;                                 tw
text-wrap:normal;                           tw:n
text-wrap:none;                             tw:no
text-wrap:unrestricted;                     tw:u
text-wrap:suppress;                         tw:s

text-shadow:;                               tsh
text-shadow:none;                           tsh:n
text-shadow:000#000;                     tsh+

line-height:;                               lh

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

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

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

word-spacing:;                              wos

word-wrap:;                                 wow
word-wrap:normal;                           wow:n
word-wrap:none;                             wow:no
word-wrap:unrestricted;                     wow:u
word-wrap:suppress;                         wow:s

letter-spacing:;                            lts

font:;                                      f
font:1emArial,sans-serif;                  f+

font-weight:;                               fw
font-weight:normal;                         fw:n
font-weight:bold;                           fw:b
font-weight:bolder;                         fw:br
font-weight:lighter;                        fw:lr

font-style:;                                fs
font-style:normal;                          fs:n
font-style:italic;                          fs:i
font-style:oblique;                         fs:o

font-variant:;                              fv
font-variant:normal;                        fv:n
font-variant:small-caps;                    fv:sc

font-size:;                                 fz

font-size-adjust:;                          fza
font-size-adjust:none;                      fza:n

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

font-effect:;                               fef
font-effect:none;                           fef:n
font-effect:engrave;                        fef:eg
font-effect:emboss;                         fef:eb
font-effect:outline;                        fef:o

font-emphasize:;                            fem

font-emphasize-position:;                   femp
font-emphasize-position:before;             femp:b
font-emphasize-position:after;              femp:a

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

font-smooth:;                               fsm
font-smooth:auto;                           fsm:a
font-smooth:never;                          fsm:n
font-smooth:always;                         fsm:aw

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

opacity:;                                                               op
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);            op:ie
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';      op:ms

resize:;                                    rz
resize:none;                                rz:n
resize:both;                                rz:b
resize:horizontal;                          rz:h
resize:vertical;                            rz:v

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

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

page-break-inside:;                         pgbi
page-break-inside:auto;                     pgbi:a
page-break-inside:avoid;                    pgbi:av

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

orphans:;                                   orp
widows:;                                    wid

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2013-03-13 ，如有侵权请联系 cloudcommunity@tencent.com 删除

css

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

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

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