emmet插件使用(Css)
生活随笔
收集整理的這篇文章主要介紹了
emmet插件使用(Css)
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: lean软件Android有吗,lean
- 下一篇: 怎么样递增的注册成对的点云