CSS (partie 2) #

Mais que se passe-t-il en cas de conflit ? #

Plusieurs instructions peuvent s’appliquer en même temps : un texte peut être en rouge et souligné. Il peut arriver cependant que deux instructions CSS se contredisent. Par exemple, un texte ne peut être à la fois en rouge et en bleu. Dans ce cas, la sélection la plus spécifique l’emporte. Ainsi, dans l’exemple qui suit :

* {
    color: black;
}
montant {
    color: red;
}
montant > montant {
    color: yellow;
}

les éléments « montant » seront en rouge, sauf s’ils sont immédiatement contenus dans un autre élément « montant », auquel cas ils seront en jaune.

Par ailleurs, si deux sélections de même spécificité sont rencontrées, c’est la dernière qui l’emporte. Ainsi, dans l’exemple qui suit :

montant {
    color: red;
}
montant {
    color: black;
}

les éléments « montant » seront en noir.

On peut cependant forcer le navigateur à considérer une règle qui apparaît avant une autre comme ayant tout de même priorité (à spécificité égale). Il suffit d’utiliser la mention !important :

montant {
    color: red !important;
}
montant {
    color: black;
}

les éléments « montant » seront en rouge.
Notez que la mention !important permet souvent d’ignorer la spécificité de la règle : les règles avec cette mention l’emportent toujours sur les autres (sauf si une autre règle avec !important a une plus grande spécificité, elle aura alors priorité).

Les règles par défaut utilisées par votre navigateur dans le cas du HTML ou du XHTML sont lues en premier. De cette manière, toutes les règles que vous stipulez dans vos propres fichiers CSS ou directement dans le XML/HTML ont priorité pour une même spécificité. On peut considérer que les règles avec la mention !important sont lues en dernier dans la mesure où elles l’emportent toujours sur les autres.

Calculer la spécificité des règles n’est pas une mince affaire, mais c’est pourtant nécessaire dans certains cas difficiles. La spécificité se mesure avec une valeur à 4 chiffres (a,b,c,d). Lorsqu’on compare deux spécificités (a1,b1,c1,d1) et (a2,b2,c2,d2), on utilise l’ordre lexicographique pour déterminer laquelle est supérieure.

• La première valeur (a) vaut 1 si et seulement si la règle apparaît dans l’attribut style de l’élément lui-même.
• La seconde valeur (b) est le nombre de sélecteurs ID présents dans la règle.
• La troisième valeur (c) est le nombre d’autres sélecteurs d’attributs et de pseudo-classes.
• La quatrième valeur (d) est le nombre de sélecteurs de type élément et de pseudo-éléments.

Exemple concret :

z[x] > a[i]         { color: blue; }           /* spécificité : 0,0,2,2 */
z z[x] a            { text-decoration: underline; } /* 0,0,1,3 */
z > z a , z z z + a { color: red ; }           /* deux règles : 0,0,0,3 et 0,0,0,4 */

Le modèle de boîte CSS #

En CSS, on peut spécifier la hauteur et la largeur d’un objet à l’aide des propriétés width et height. Par exemple, pour indiquer qu’un paragraphe ne doit avoir que 20 pixels de largeur :

p {
    width: 20px;
}

Le CSS supporte de nombreuses unités : px, cm, in, %, em, rem, etc.

On peut ensuite définir une marge (margin) autour de tout objet. La marge est une zone transparente où rien ne peut apparaître ; elle ne fait pas partie de l’objet lui-même.

p {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    margin-left: 10px;
}

On peut aussi définir une région d’espacement interne (padding). Contrairement à la marge, le padding fait partie de l’objet : si vous définissez une couleur de fond, le padding sera coloré.

p {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
}

On peut enfin ajouter une bordure (border) qui se place entre le padding et la marge :

p {
    border-color: black;
    border-width: medium;
}

Voici un diagramme qui résume le modèle de boîte CSS (le diagramme original étant en SVG, il n’est pas reproduit ici, mais il montre les zones suivantes de l’intérieur vers l’extérieur : contenu → padding → border → margin).

(Comme il se doit, ce diagramme est XML par l’entremise du SVG.)