La vraie puissance du langage CSS réside dans la combinaison
de sélecteurs pour l'application des règles de style. Il est ainsi
possible d'affecter un style particulier à un élément suivant
le contexte, c'est-à-dire suivant l'imbrication de l'élément
au sein d'un autre élément spécifique. Dans le même
ordre d'idées, il est permis d'appliquer un style à plusieurs éléments
à la fois, en groupant les sélecteurs correspondants.
Sélecteurs contextuels
Ils correspondent à la première possibilité. Prenons
l'exemple suivant:
B I {color: blue}
alors un élément en italique sera coloré en
bleu uniquement si cet élément est lui-même situé
au sein d'un élément en gras. On écrira:
<B>Texte<I> en gras italique bleu</I></B>
<I>Texte en italique de la couleur par défaut</I>
Cette technique permet d'affiner encore le niveau de précision de la feuille
de style.
Héritage
Remarquons que si nous avions défini un style pour l'élément
B, mais pas pour l'élément I, alors tout texte en italique inséré
entre des balises <B> et </B> aurait hérité
du style correspondant au texte en gras (avec en plus la propriété
d'être en italique). Définir un style particulier pour l'élément
I résout le problème, mais ce style s'appliquera également
à tous les textes en italique qui ne sont pas situés entre
des balises <B> et </B>, ce qui peut ne pas correspondre à
ce que l'on désire. La solution optimale est ici d'utiliser un sélecteur
contextuel.
Groupement de sélecteurs
Définir un style pour un ensemble de sélecteurs (groupe) s'effectue
de la manière suivante (notez les virgules séparant les sélecteurs):
B, I, H1 {color: blue}
Cet exemple nous permet de préciser que le texte contenu
dans les balises <B>/</B>, <I>/</I> et <H1>/</H1>
devra être affiché en bleu. Ceci appelle trois remarques:
- premièrement, l'indication de couleur n'enlève en
rien les propriétés "gras","italique", et "premier
niveau de titre" propres aux éléments correspondants;
- deuxièmement, si l'on désire définir avec plus de précision
le style de, par exemple, H1, il est possible de redéclarer dans la feuille
de style ce sélecteur:
H1 {font-weight: bold; font-family: Verdana}
Alors le texte contenu entre les balises <H1> et </H1> sera en gras,
dans la police Verdana, et coloré en bleu;
- troisièmement, les indications de style pour un groupe de sélecteurs
peuvent évidemment être bien plus détaillées que dans
l'exemple donné, et l'intérêt du groupement apparaît
alors: réduire la taille du code des pages web (et la peine du développeur
!)
Feuilles de style "en cascade"
Nous venons de voir que l'on pouvait redéclarer un sélécteur
auquel nous avions déjà attribué un style. Cette redéclaration
permet d'affecter des propriétés supplémentaires au style
voulu. Nous avons également pris conscience du mécanisme d'héritage,
par lequel certaines propriétés peuvent être transmises en
cas d'imbrication des éléments. Ces deux règles se fondent
dans un mécanisme supérieur: le mécanisme de cascade.
Ce dernier permet de déterminer quelles règles sont à appliquer à un élément.
Il fonctionne ainsi:
Si aucune règle n'a été définie pour l'élément,
alors sont déterminées les propriétés de style qui peuvent être héritées.
A noter que toutes les propriétés ne peuvent pas être héritées: pour ces dernières,
le langage CSS procurera des valeurs par défaut. S'il est possible d'hériter
de la propriété, alors les règles appliquées à l'élément
englobant, s'il en existe, sont transmises à l'élément inclus. Ce processus se
poursuit (en recherchant des éléments toujours plus englobant)
jusqu'à ce qu'une règle applicable soit trouvée. L'avantage de ce système
de fonctionnement est, par exemple, de spécifier la famille de polices pour tous
les éléments de la section BODY et ce par une unique règle qui s'appliquerait
à l'élément BODY lui-même. Le code ainsi produit s'avère donc très
compact.
Les meilleures astuces CSS sur le JDN :
- Comment
appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment
centrer horizontalement une DIV dans une autre en CSS ?
- Comment
créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment
définir les cellpadding et cellspacing en CSS ?
- Comment
modifier l'image d'un bouton input en CSS ?
- Comment
rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de
cet élément opaque en CSS ?
- Internet
Explorer supporte-t-il l'attribut CSS border-radius
|