Les propriétés raccourcies

vendredi 21 octobre 2005 par Nissone

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 :

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"

Pour en savoir plus :
  CSS 2
  CSS Cheat Sheet (pdf - 379k) de Dave Child ou sa traduction française par goetzilla : Aide-mémoire CSS (pdf - 43k)