Delphine M. [ veille ]Articles, penses-bête, notes…

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 :

peut s’écrire :

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 »