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+
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+
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+