Abréviations HTML
Raccourcis d'éléments
| div | Crée |
| p | Crée |
| h1 | Crée |
| a | Crée |
| img | Crée |
| input | Crée |
| btn | Crée |
| link:css | Balise link pour feuille de style CSS |
Squelette HTML
! → squelette HTML5 complet
doc → doctype HTML5 seulement
Balises implicites
| .class | Résout en |
| ul>.item | Enfant résout en |
| table>.row | Enfant résout en |
| select>.opt | Enfant résout en |
Imbrication
Opérateurs d'imbrication
| > | Élément enfant |
| + | Élément frère |
| ^ | Remonter d'un niveau |
| ^^ | Remonter de deux niveaux |
Exemples d'imbrication
div>ul>li → éléments enfants imbriqués
div+p+footer → éléments frères
div>p>span^h2 → remonte : h2 est frère de p
div>p>span^^h2 → remonte deux fois : h2 frère de div
Groupement
Groupement par parenthèses
div>(header>nav)+main+footer
→ groupe header>nav comme une unité
(div>h2+p)*3
→ répète la structure groupée 3 fois
Mise en page complexe
.container>(header>h1+nav>ul>li*3)+main+footer
→ squelette complet d'une page
Multiplication
Opérateur de répétition
| li*5 | Crée 5 éléments |
| div>p*3 | Div avec 3 paragraphes enfants |
| ul>li*4>a | Liste avec 4 éléments contenant chacun un lien |
| tr>td*4 | Ligne de tableau avec 4 cellules |
Exemples de multiplication
ul>li.item*5 → 5 éléments de liste avec classe
table>tr*3>td*4 → grille de tableau 3x4
.row>.col*3>p{Content} → ligne 3 colonnes avec texte
Numérotation
Numérotation des éléments ($)
| $ | Numéro séquentiel (1, 2, 3...) |
| $$ | Deux chiffres avec zéros (01, 02...) |
| $$$ | Trois chiffres avec zéros (001, 002...) |
| $@3 | Commencer la numérotation à 3 |
| $@- | Numérotation inversée (décroissante) |
| $@-3 | Numérotation inversée à partir de 3 |
Exemples de numérotation
li.item$*3 → item1, item2, item3
li.item$$*3 → item01, item02, item03
li.item$@3*3 → item3, item4, item5
Attributs
ID et classe
| #id | Ajoute l'attribut id : |
| .class | Ajoute une classe : |
| .c1.c2 | Classes multiples : class="c1 c2" |
| #main.container | ID + classe combinés |
Attributs personnalisés
td[colspan=2] →
a[href=#]{Click} → Click
input[type=email placeholder=Email]
div[data-id=$]*3 → data-id="1", "2", "3"
Texte
Contenu textuel ({})
| p{Hello} | Hello |
| a{Click me} | Click me |
| p{Item $}*3 | Item 1, Item 2, Item 3 |
Texte avec imbrication
p>{Click }+a{here}+{ to continue}
→
Click here to continue
ul>li{Item $}*4 → liste avec éléments numérotésAbréviations CSS
Modèle de boîte
| m10 | margin: 10px; |
| m10-20 | margin: 10px 20px; |
| p10 | padding: 10px; |
| w100 | width: 100px; |
| w100p | width: 100%; |
| h50 | height: 50px; |
Affichage et position
| d:f | display: flex; |
| d:g | display: grid; |
| d:n | display: none; |
| d:b | display: block; |
| pos:r | position: relative; |
| pos:a | position: absolute; |
Flexbox
| jc:c | justify-content: center; |
| jc:sb | justify-content: space-between; |
| ai:c | align-items: center; |
| fxd:c | flex-direction: column; |
| fw:w | flex-wrap: wrap; |
Typographie et couleurs
| fz14 | font-size: 14px; |
| fw:b | font-weight: bold; |
| ta:c | text-align: center; |
| c:#333 | color: #333; |
| bgc:#fff | background-color: #fff; |