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 :
p
font-family: "Times New Roman", Times, serif;
font-size: 1.2em; font-style: italic;
font-weight: bold

peut s’écrire :
p
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 »


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)