【02】emmet系列之HTML语法
【03】emmet系列之CSS语法
【04】emmet系列之编辑器
【05】emmet系列之各种缩写
单位：
有几个常用值别名：
p % e em x exexample:
输入:
w100p
输出:width:100%
example:
输入:
m10p30e5x
输出:margin:10%30em5ex
example:
输入：
h10p+m5e
输出：
height:10%;margin:5em;
颜色值：
bd5#0s
输出：
border:5px#000 solid
你可以写一个，两个，三个或六个字符的颜色值：
#1 #111111 #e0 #e0e0e0 #fc0 #ffcc00
！important修饰符
您可以添加!在任何CSS缩写，以便获得最终的后缀!important价值：
p !+ m10e !
输出：
padding :! important ; margin :10 em ! important ;
浏览器前缀：
如果输入非W3C标准的CSS属性，Emmet会自动加上供应商前缀，比如输入
-bdrs
输出：
-webkit-border-radius:; -moz-border-radius:; -ms-border-radius:; -o-border-radius:; border-radius:;
[魔芋注]在Emmet中我们只需修改旋转属性值的其中一个，再按 ctrl+b 快捷键，其它相关的属性值也相应的改变。（如果无效，可能与sublime的快捷键冲突，修改之）
比如输入trs，则会生成：
-webkit-transform:; -moz-transform:; -ms-transform:; -o-transform:; transform:;
输入：
trf
输出：
-webkit-transform:; -ms-transform:; -o-transform:; transform:;
你也可以在任意属性前加上“-”符号，也可以为该属性加上前缀。比如输入-super-foo：
-webkit-super-foo:; -moz-super-foo:; -ms-super-foo:; -o-super-foo:; super-foo:;
如果不希望加上所有前缀，可以使用缩写来指定，比如-wm-trf表示只加上-webkit和-moz前缀：
-webkit-transform:; -moz-transform:; transform:;
前缀缩写如下： w 表示 -webkit- m 表示 -moz- s 表示 -ms- o 表示 -o-
附加属性
可能你之前已经了解了一些缩写，比如 @f，可以生成：
@font-face { font-family:; src:url(); }
一些其他的属性，比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项，可以通过“+”符号来生成，比如输入@f+，将生成：
@font-face { font-family:'FontName'; src: url('FileName.eot'); src: url('FileName.eot?#iefix') format('embedded-opentype'), url('FileName.woff') format('woff'), url('FileName.ttf') format('truetype'), url('FileName.svg#FontName') format('svg'); font-style: normal; font-weight: normal; }
模糊匹配
如果有些缩写你拿不准，Emmet会根据你的输入内容匹配最接近的语法，比如输入ov:h、ov-h、ovh和oh，生成的代码是相同的：
overflow: hidden;
渐变
输入lg(left, #fff 50%, #000)，会生成如下代码：
background-image:-webkit-gradient(linear,00,100%0, color-stop(0.5,#fff), to(#000)); background-image:-webkit-linear-gradient(left,#fff 50%, #000); background-image:-moz-linear-gradient(left,#fff 50%, #000); background-image:-o-linear-gradient(left,#fff 50%, #000); background-image: linear-gradient(left,#fff 50%, #000);
lg(left,#fc0 30%,red)
输出：
background-image:-webkit-linear-gradient(left,#fc0 30%, red); background-image:-o-linear-gradient(left,#fc0 30%, red); background-image: linear-gradient(to right,#fc0 30%, red);
border-image:lg(left,#fc0 30%,red)
输出：
-webkit-border-image:-webkit-linear-gradient(left,#fc0 30%, red); -o-border-image:-o-linear-gradient(left,#fc0 30%, red); border-image:linear-gradient(to right,#fc0 30%, red);
技巧篇
1，对于一些带有特定的属性值的CSS样式，只需输入CSS标签与属性值的首字母就可以，比如：
fl →float: left;
2，编写这些CSS样式时，有很多是我们想好的写法，但生成的不是你想要的，比如position: absolute;，我们会输入pa，生成的就不是position: absolute;，这时我们可以：
poa → position: absolute;
3，一些用-连接的CSS样式和属性值，都可以取首字母：
whscbs → whitewhite-space-collapse:break-strict;
4，对于有多个属性值的CSS属性，在编写时只需在属性值之间添加-：
m4-6→ margin:4px6px; p4-6-8→ padding:4px6px8px;
5，属性值没有单位的CSS缩写：
lh2 → line-height:2;, fw400 → font-weight:400;
这些CSS属性有：
z-index, line-height, opacity and font-weight
6，#是一个值分离器，所以不需要使用连字符分隔它，例如：
bd5#0s → border: 5px #000 solid:
7， 输出默认的CSS样式+，用+操作符，比如：
bg+→ background:#fff url() 0 0 no-repeat;
查看更多关于【03】emmet系列之CSS语法_html/css_WEB-ITnose的详细内容...