Les propriétés raccourcies (CSS)

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 »

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *