EMMET TOOLKIT


logo emmet

Les principes généraux d'EMMET Commandes de bases

Les Principes

Ctr + shift + Y   Effectuer un calcul

24/16
1.25

>  Ajouter un élément enfant (child)

li>p
<li>
<p></p>
</li>
ul>li>p
<ul>
<li>
<p></p>
</li>
<ul>

+  Ajouter un élément frère (sibling)

ul>li>p+a
<ul>
<li>
<p></p>
<a href=""></a>
</li>
<ul>

*  multiplier les éléments

ul>li*3>p+img
<ul>
<li>
<p></p>
<img src=""alt="" />
</li>
<li>
<p></p>
<img src=""alt="" />
</li>
<li>
<p></p>
<img src=""alt="" />
</li>
<ul>

.  Ajouter un nom de classe

ul.wrapper
<ul class="wrapper">
</ul>
.container
<div class="container">
</div>

#  Ajouter un id

#entete
<section id="entete">
</section>

( )  Grouper des éléments

ul>(li>p+img+a)+li*2>p+img
<ul>
<li>(li>p+img+a)
<p></p>
<img src=""alt="" />
<a href=""></a>
</li>
<li>
<p></p>
<img src=""alt="" />
</li>
<li>
<p></p>
<img src=""alt="" />
</li>
<li>
<p></p>
<img src=""alt="" />
</li>
<ul>

{ }  Insérer du texte dans un élément

a{click me}
<a href="">click me<>/a>

En savoir+

logo Html

Les principes généraux d'EMMET Commandes de bases

Raccourcis HTML

>  Ajouter un élément enfant (child)

li>p
<li>
<p></p>
</li>
ul>li>p
<ul>
<li>
<p></p>
</li>
<ul>

+  Ajouter un élément frère (sibling)

ul>li>p+a
<ul>
<li>
<p></p>
<a href=""></a>
</li>
<ul>

*  multiplier les éléments

ul>li*3>p+img
<ul>
<li>
<p></p>
<img src=""alt="" />
</li>
<li>
<p></p>
<img src=""alt="" />
</li>
<li>
<p></p>
<img src=""alt="" />
</li>
<ul>

.  Ajouter un nom de classe

ul.wrapper
<ul class="wrapper">
</ul>
.container
<div class="container">
</div>

#  Ajouter un id

#entete
<section id="entete">
</section>

( )  Grouper des éléments

ul>(li>p+img+a)+li*2>p+img
<ul>
<li>(li>p+img+a)
<p></p>
<img src=""alt="" />
<a href=""></a>
</li>
<li>
<p></p>
<img src=""alt="" />
</li>
<li>
<p></p>
<img src=""alt="" />
</li>
<li>
<p></p>
<img src=""alt="" />
</li>
<ul>

En savoir+


logo css

Emmet pour le CSS Will Seal the Deal.

Les Raccourcis CSS

w100

width: 100px;

h12.5p

height: 25.5%;

m55p

margin: 55%;

mt50

margin-top: 50px;

mr50p

margin-right: 50%;

pb40

padding-bottom: 40px;

pl5e

padding-left: 5em;

bg

background: #000;

bgi

background-image: url();

c

color: #000;

f

font: ;

ff

font-family: ;

bd

border: ;

bd+

border: 1px solid #000;

En savoir+