🧠 Qu’est-ce qu’un raccourci CSS ?
Un shorthand regroupe plusieurs propriétés en une seule déclaration.
Exemple : border rassemble la largeur, le style et la couleur.
À retenir : l’ordre des valeurs compte souvent. Si tu te trompes d’ordre, le navigateur peut ignorer une partie.
1 border
Écriture détaillée3 propriétés
border-width: 1px;
border-style: solid;
border-color: green;Écriture raccourcie1 ligne
border: 1px solid green;
Ordre :
border: largeur style couleur;
2 margin
Écriture détaillée4 côtés
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;Écriture raccourcie1 ligne
margin: 10px 20px 10px 20px;Autres formes possibles1, 2 ou 3 valeurs
margin: 10px; /* tous les côtés */
margin: 10px 20px; /* haut/bas | gauche/droite */
margin: 10px 20px 30px; /* haut | gauche/droite | bas */
Ordre (4 valeurs) : haut → droite → bas → gauche
3 padding
Même logique que margin, mais pour l’espace intérieur de l’élément.
Écriture détaillée4 côtés
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;Écriture raccourcieexemple
padding: 10px 20px;4 background
Écriture détailléeexemple
background-color: lightblue;
background-image: url("image.jpg");
background-repeat: no-repeat;
background-position: center;Écriture raccourcieexemple
background: lightblue url("image.jpg") no-repeat center;
Astuce : on met seulement ce dont on a besoin (couleur, image, répétition, position…).
5 font
⚠️ Dans le raccourci font, font-size et font-family sont indispensables.
Écriture détaillée4 coins
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;Écriture raccourcieexemples
border-radius: 10px;
border-radius: 10px 20px;✅ À retenir
- Les raccourcis rendent le CSS plus lisible et évitent les répétitions.
- L’ordre des valeurs est important (ex :
border,margin). - Les raccourcis ne sont pas obligatoires, mais ils sont recommandés.
- Teste le rendu dans le navigateur pour vérifier.