括弧内での Emmet_html/css_WEB-ITnose の使用

Brackets に Emmet プラグインをインストールした後、Emmet の構文を使用してフロントエンドの記述を高速化できます。

HTMLについて

● サブリレーションシップ>

div>ul>li

●隣接+

div+p+bq

● 前のレベル^

div+ div>p>span+ em^bq

● リピート*

ul>li*5

● Group()

div>(header>ul>li*2)+footer>p

●クラス

div.demo

● ID

div#demo

● Index$

ul>li.item$*5
ul>li.item$$$*5
ul&gt ;li.item$@ -*5 逆順に並べ替えます
ul>li.item$@3*5 3 から始まります

● Text

a{click me}

● 親要素で Emmet を使用します

の略称<div>
.item
</div>

<div>

<div class="item"></div> ;

</ div>

など、ul, olにliを追加、table, tbody, thead, tfootにtrを追加、trにtdを追加、selectにオプションを追加

● テキスト例

p*4> lorem

css について

● -bdrs、オートコンプリートは:

-webkit-border-radius: ;

-moz-border-radius: ;

-ms -border-radius: ;

- o-border-radius: ;

border-radius: ;



● -foo、オートコンプリートは:

-webkit-font: ;

-moz-font: ;

-ms-font: ;

- o-font: ;

font: ;



● -super-foo、オートコンプリートは:

-webkit-super-foo: ;

-moz-super-foo: ;

-ms-super-foo : ;

-o-super-foo: ;

super-foo: ;


● -wm-trf、次のように自動的に完成:

-webkit-transform: ;

-moz -transform: ;
transform: ;

● lg(left, #fc0 30%, red)、オートコンプリートは次のとおりです:

background-image: -webkit-linear-gradient(left, #fc0 30%, red );

background-image: -o -linear-gradient(left, #fc0 30%, red);
background-image: linear-gradient(to right, #fc0 30%, red);

● border -image: lg(left, #fc0 30%、赤)、自動補完は次のとおりです:

background-image: border-image: -webkit-linear-gradient(left, #fc0 30%, red);

background-image: border-image: -o- Linear-gradient(left, #fc0 30%, red);

background-image: border-image: Linear-gradient(to right, #fc0 30%, red);

● ovh、オートコンプリートは次のとおりです。

overflow: hidden;

関連操作

● 外側選択

ctrl+alt+B

● 内側選択

ctrl+alt+shift+B

● ペアになっている要素タグ間をジャンプします

ctrl+shift+T

● 既存の要素をラップする

既存:

<div id="page">

&lt ;p>Hello World</p>

</div>

→ 最初の p と >
の間にマウスを置きます→ ctrl+shif+A
→ .wrapper>h1{タイトル}+ .content

→ 確認

<div id="page">
< div class="wrapper">
<h1>Title</h1>

<div class="content">

& lt; hello world & lt;/p & gt; ;/div & gt;
& lt;/div & lt;/div & gt; + .



● 要素を 1 つずつ選択します

ctrl+shift+,

● コメントを解除

ctrl+/

● タグを削除

ctrl+shi ft+K

● マージ複数行

ctrl+shift+M

●値を変更

ctrl+shif+矢印キー、10単位

ctrl+shift+alt+矢印キー、0.1単位

参考： http:// docs.emmet.io/