Les propriétés raccourcies (CSS)
Qu’est-ce que les propriétés raccourcies en CSS et comment les utiliser.
21 octobre 2005
Catégories : Intégration de pages web
Mots-clé : CSS ‐ performance
En CSS, un certains nombres de propriétés peuvent être regroupées sous une seule déclaration. On utilise pour cela les propriétés raccourcies.
Par exemple :
font-family: "Times New Roman", Times, serif;
font-size: 1.2em; font-style: italic;
font-weight: bold
}
peut s’écrire :
font: italic bold 1.2em "Times New Roman", Times, serif
}
Dans le cas des bordures, des marges externes et internes, on peut déclarer un style successif à chacune des 4 bordures d’un éléments. Dans ce cas, il faut respecter le sens de « l’horloge » ; on part de midi et on fait le tour du cadran : top, right, bottom, left. Exemple :
div {border:2px dotted; border-color:#F03 #5C2 #9A3 #245B7A}
Si les deux valeurs verticales sont identiques entres-elles ainsi que les deux valeur horizontales, on peut déclarer les deux en une : top/bottom, right/left. Exemple :
div {margin:20px 10px}
Enfin, il existe aussi une déclaration raccourcie pour le cas où les valeurs horizontales sont identiques : top, right/left, bottom. Exemple :
div {padding:3em 1em 2em}
Les principales propriétés raccourcies, et l’ordre de leurs valeurs, sont les suivantes :
- background : color, image, repeat, attachement, position (vertical, horizontal)
- border : epaisseur, style, couleur
- border-top : epaisseur, style, couleur
- border-right : epaisseur, style, couleur
- border-bottom : epaisseur, style, couleur
- border-left : epaisseur, style, couleur
- border-color : couleurs dans le sens de « l’horloge »
- border-style : style dans le sens de « l’horloge »
- border-width : valeurs dans le sens de « l’horloge »
- font : font-style, font-variant, font-weight, font-size, -* line-height, font-family
- list-style : type, position, image
- margin : valeurs dans le sens de « l’horloge »
- padding : valeurs dans le sens de « l’horloge »