emmet插件使用(Css)

漸變

輸入lg(left,#fff50%,#000),會(huì)生成如下代碼
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);

附加屬性

一些其他屬性，比如background-image、border-radius、font、@font-face、text-shadow等額外的選項(xiàng)可以通過+號(hào)來生成，比如輸入@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;
}

供應(yīng)商前綴

如果輸入w3c標(biāo)準(zhǔn)的Css屬性，emmet會(huì)自動(dòng)加上供應(yīng)商前綴，比如輸入trs，則會(huì)生成
-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;

你也可以在任意屬性前加上”-”號(hào)，也可以為該屬性加上前綴。比如輸入-super-foo

-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;

如果不希望加上所有的前綴，可以使用縮寫來指定，比如-wm-trf表示只jias-webkit和-moz前綴

-webkit-transform: ;
-moz-transform: ;
transform: ;

前綴縮寫如下：

w表示-webkit
m表示-moz
s表示-ms
o表示-o

模糊匹配

如果有些縮寫，你拿捏不準(zhǔn)，emmet會(huì)根據(jù)你輸入的內(nèi)容匹配最近的語法，比如輸入ov:h、ov-h、ovh和oh，生成的代碼是相同的
overflow: hidden;

值

比如要定義元素的寬度，只需要輸入w100，即可生成
width:100px;
除了px還可以生成其他單位
h10p+m5e
可生成
height:10%;
margin:5em;
p表示%
e表示em
x表示ex

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的emmet插件使用(Css)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。