【03】emmet系列之CSS語法

　　【01】emmet系列之基礎介紹

　　【02】emmet系列之HTML語法

　　【03】emmet系列之CSS語法

　　【04】emmet系列之編輯器

　　【05】emmet系列之各類縮寫

 

單位：

有幾個經常使用值別名：

• p %
• e em
• x ex

example:

輸入:

1. w100p 

輸出:

1. width:100%

 

example:


輸入:

1. m10p30e5x 

輸出:

1. margin:10%30em5ex

 

example:

輸入：

1. h10p+m5e

輸出：

1. height:10%;margin:5em;

 

顏色值：

 

1. bd5#0s

輸出：

1. border:5px#000 solid

 

你能夠寫一個，兩個，三個或六個字符的顏色值：

• #1 #111111
• #e0 #e0e0e0
• #fc0 #ffcc00

！important修飾符

您能夠添加!在任何CSS縮寫，以便得到最終的後綴!important價值：

1. p !+ m10e !

輸出：

1. padding :! important ; margin :10 em ! important ;

 

瀏覽器前綴：

若是輸入非W3C標準的CSS屬性，Emmet會自動加上供應商前綴，好比輸入

1. -bdrs

輸出：

1. -webkit-border-radius:;
2. -moz-border-radius:;
3. -ms-border-radius:;
4. -o-border-radius:;
5. border-radius:;

[魔芋注]在Emmet中咱們只需修改旋轉屬性值的其中一個，再按ctrl+b快捷鍵，其它相關的屬性值也相應的改變。（若是無效，可能與sublime的快捷鍵衝突，修改之）

好比輸入trs，則會生成： 

1. -webkit-transform:;
2. -moz-transform:;
3. -ms-transform:;
4. -o-transform:;
5. transform:;

輸入：

1. trf

輸出：

1. -webkit-transform:;
2. -ms-transform:;
3. -o-transform:;
4. transform:;

你也能夠在任意屬性前加上「-」符號，也能夠爲該屬性加上前綴。好比輸入-super-foo： 

 

1. -webkit-super-foo:;
2. -moz-super-foo:;
3. -ms-super-foo:;
4. -o-super-foo:;
5. super-foo:;

 

若是不但願加上全部前綴，可使用縮寫來指定，好比-wm-trf表示只加上-webkit和-moz前綴： 

1. -webkit-transform:;
2. -moz-transform:;
3. transform:;

前綴縮寫以下： 

• w 表示 -webkit-

• m 表示 -moz-

• s 表示 -ms-

• o 表示 -o-

附加屬性 

可能你以前已經瞭解了一些縮寫，好比 @f，能夠生成： 

1. @font-face {
2. font-family:;
3. src:url();
4. }

 

一些其餘的屬性，好比background-image、border-radius、font、@font-face,text-outline、text-shadow等額外的選項，能夠經過「+」符號來生成，好比輸入@f+，將生成： 

1. @font-face {
2. font-family:'FontName';
3. src: url('FileName.eot');
4. src: url('FileName.eot?#iefix') format('embedded-opentype'),
5. url('FileName.woff') format('woff'),
6. url('FileName.ttf') format('truetype'),
7. url('FileName.svg#FontName') format('svg');
8. font-style: normal;
9. font-weight: normal;
10. }

 

 

 

模糊匹配 


若是有些縮寫你拿不許，Emmet會根據你的輸入內容匹配最接近的語法，好比輸入ov:h、ov-h、ovh和oh，生成的代碼是相同的： 


1. overflow: hidden;

 

漸變 

輸入lg(left, #fff 50%, #000)，會生成以下代碼： 

1. background-image:-webkit-gradient(linear,00,100%0, color-stop(0.5,#fff), to(#000));
2. background-image:-webkit-linear-gradient(left,#fff 50%, #000);
3. background-image:-moz-linear-gradient(left,#fff 50%, #000);
4. background-image:-o-linear-gradient(left,#fff 50%, #000);
5. background-image: linear-gradient(left,#fff 50%, #000);

 

1. lg(left,#fc0 30%,red)

輸出：

1. background-image:-webkit-linear-gradient(left,#fc0 30%, red);
2. background-image:-o-linear-gradient(left,#fc0 30%, red);
3. background-image: linear-gradient(to right,#fc0 30%, red);

 

 

1. border-image:lg(left,#fc0 30%,red)

輸出：

1. -webkit-border-image:-webkit-linear-gradient(left,#fc0 30%, red);
2. -o-border-image:-o-linear-gradient(left,#fc0 30%, red);
3. border-image:linear-gradient(to right,#fc0 30%, red);

 

技巧篇

 

1，對於一些帶有特定的屬性值的CSS樣式，只需輸入CSS標籤與屬性值的首字母就能夠，好比：

1. fl →float: left;

 

2，編寫這些CSS樣式時，有不少是咱們想好的寫法，但生成的不是你想要的，好比position: absolute;，咱們會輸入pa，生成的就不是position: absolute;，這時咱們能夠：

1. poa → position: absolute;

 

3，一些用-鏈接的CSS樣式和屬性值，均可以取首字母：

1. whscbs → whitewhite-space-collapse:break-strict;

 

4，對於有多個屬性值的CSS屬性，在編寫時只需在屬性值之間添加-：

1. m4-6→ margin:4px6px;
2. p4-6-8→ padding:4px6px8px;

 

 

5，屬性值沒有單位的CSS縮寫：

1. lh2 → line-height:2;, fw400 → font-weight:400;

 

 

這些CSS屬性有：

1. z-index, line-height, opacity and font-weight

 

 

6，#是一個值分離器，因此不須要使用連字符分隔它，例如：

1. bd5#0s → border: 5px #000 solid:

 

 

7，輸出默認的CSS樣式+，用+操做符，好比：

1. bg+→ background:#fff url() 0 0 no-repeat;