【03】emmet series_html/css_WEB-ITnoseのCSS構文

【01】emmetシリーズの基礎入門

【02】emmetシリーズのHTML構文

【03】emmetシリーズのCSS構文

【04】emmetシリーズエディタ

【 05】emmet シリーズのさまざまな略語

単位:

共通の値の別名がいくつかあります:

p %

e em

x ex

例:

入力してください:

w100p

出力:

width:100%

例:

入力:

m 10p30e5x

出力:

マージン:10%30em5ex

例:

入力:

h10p+m5e

出力:

高さ:10%;マージン:5em;

色の値:

bd5# 0s

出力:

border:5px#000 Solid

1、2、3、または 6 つの文字色の値を書き込むことができます:

#1 # 111111

#e0 #e0e0e0

#fc0 #ffcc00

!重要な修飾子

最終的なサフィックスを取得するには、任意の CSS 略語に ! を追加できます。 !重要な値:

p !+ m10e !

出力:

パッド重要です。 :10 em ! 重要 ;

ブラウザプレフィックス:

W3C 標準以外の CSS プロパティを入力すると、Emmet は

-bdrs

などのベンダープレフィックスを自動的に追加します。

出力:

-webkit-border-radius:;

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

[Konjac Note] Emmet では、回転属性値の 1 つを変更するだけで、

ctrl+b

ショートカット キーを押すだけで、他の関連属性値もそれに応じて変更されます。 。 (無効な場合はsublimeのショートカットキーと競合する可能性がありますので修正してください) 例えばtrsと入力すると以下が生成されます:

-webkit-transform:;

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

入力:

trf

出力:

-webkit-transform:;

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

属性の前に「-」記号を追加することも、接頭辞を追加することもできます属性に。たとえば、「-super-foo:

-webkit-super-foo:;

1. -moz-super-foo:;
2. -ms-super-foo:;
3. -o-super-」と入力します。 foo:;
4. スーパー foo:;

すべてのプレフィックスを追加したくない場合は、省略形を使用して指定できます。たとえば、-wm-trf は -webkit と -moz プレフィックスのみを追加することを意味します:
1. -webkit-transform:;
2. -moz-transform:;
3. transform:;



接頭辞の略語は次のとおりです:

6. w は -webkit-
を意味します
7. m は -moz-
を意味します
8. s は -ms-
を意味します
9. o は -o を意味します-

追加属性

が可能 @f など、次のような略語をすでに見てきました。これにより、次のものが生成されます。 ;

}

3. 他のいくつかの属性 (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;


Gradient
lg(left, #fff 50%, #000) と入力すると、次のコードが生成されます:
background-画像:-webkit-gradient(linear,00,100%0, color-stop (0.5,#fff), to(#000));
background-image:-webkit-linear-gradient(left,#fff 50%, # 000);
背景画像:-moz-linear-gradient (左,#fff 50%, #000);
背景画像:-o-linear-gradient(左,#fff 50%, #000) ;
背景画像: 線形グラデーション(左,#fff 50%, #000);
出力:
4. 背景-画像:-webkit-linear -gradient(左,#fc0 30%, 赤);
5. 背景-画像:-o-linear-gradient(左,#fc0 30%, 赤) ;
背景画像: 線形グラデーション(右へ,# fc0 30%, 赤);
border-image:lg(左,#fc0 30%, 赤)
出力:
2. -webkit-border -image:-webkit-linear-gradient(left,#fc0 30%, red);
3. -o-border-image:-o-linear-gradient (左、#fc0 30%、赤);
border-image:linear-gradient(右へ、#fc0 30%、赤);
ヒント
1. 1.特定の属性値を指定するには、CSS タグと属性を入力するだけです。値の最初の文字だけで十分です。例:

fl →float: left;

2. これらの CSS スタイルを記述するときは、さまざまな方法が考えられますが、生成されるものは希望するものではありません。たとえば、「pa」と入力しますが、生成されるものはpositionではありません。 : 絶対; 現時点では、次のことが可能です:

3. 一部の CSS スタイルと属性値は、最初の文字を取ることができます:

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

4、複数のプロパティ値を持つ CSS プロパティの場合、次のように記述するときにプロパティ値の間に - を追加するだけです:

m4-6→ margin :4px6px;

p4-6-8→padding:4px6px8px;

5、プロパティ值没有单位のCSS缩写：
lh2 → line -高さ:2;、fw400 → フォント-weight:400;
1. これらの CSS プロパティは次のとおりです:

z-index、line-height、opacity、font-weight

6、# は値です区切るにはハイフンを使用する必要があります。例:
bd5#0s → border: 5px #000 Solid:
7、デフォルトの CSS スタイルを出力 +、使用+ 演算子 (例:
bg+→background:#fff url() 0 0 no-repeat;