Emmet:HTML/CSS代码快速编写神器(2)

二、CSS缩写

1.  值

比如要定义元素的宽度,只需输入w100,即可生成

width: 100px;



除了px,也可以生成其他单位,比如输入h10p+m5e,结果如下:

height: 10%;
margin: 5em;

单位别名列表:

p 表示%

e 表示 em

x 表示 ex

2.  附加属性

可能你之前已经了解了一些缩写,比如 @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:HTML/CSS代码快速编写神器



3.  模糊匹配

如果有些缩写你拿不准,Emmet会根据你的输入内容匹配最接近的语法,比如输入ov:h、ov-h、ovh和oh,生成的代码是相同的:



4.  供应商前缀

如果输入非W3C标准的CSS属性,Emmet会自动加上供应商前缀,比如输入trs,则会生成:

-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;

Emmet:HTML/CSS代码快速编写神器



你也可以在任意属性前加上“-”符号,也可以为该属性加上前缀。比如输入-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-

5.  渐变

输入lg(left, #fff 50%, #000),会生成如下代码:

background-image: -webkit-gradient(linear, 0 0, 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);

Emmet:HTML/CSS代码快速编写神器

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/15335.html