Utilisation de XHTML et des CSS
Les sélecteurs CSS
Les sélecteurs permettent d'attribuer à une balise ou à un type de balise XHTML un style CSS (couleur, taille de police, positionnement etc...).
Les sélecteurs simples
- Le sélecteur universel qui permet d'appliquer un style à tous les éléments d'une page : *
- Le sélecteur de type qui permet d'appliquer un style à toutes les instances d'un élément, on l'utilise en marquant directement le nom de la balise concernée.
Le sélecteur class, qui va appliquer le style à tous les éléments qui ont pour valeur de leur attribut class celle spécifiée dans la feuille CSS.
Il faut noter que dans une même page plusieurs éléments peuvent être identifiés par un même attribut class.<span class="vert"> Un joli texte vert</span> Pour décorer ce texte entouré par span on utilisera le code suivant dans la feuille CSS : .vert{ color:green; }Le sélecteur id, qui va appliquer un style à un élément unique de la page et qui aura pour valeur de l'attribut id, la valeur spécifiée dans le feuille CSS.
<span id="vert"> Un joli texte vert</span> Pour décorer ce texte entouré par span on utilisera le code suivant dans la feuille CSS : #vert{ color:green; }Il faut noter qu'il ne peut pas y avoir deux éléments dans la page XHTML ayant la même valeur pour l'attribut id.
Le sélecteurs complexes
Grâce aux sélecteurs on peut spécifier des styles pour des enchaînements d'éléments.
Le sélecteur descendant permet de spécifier un élément descendant d'un autre élément par exemple :
<h1> Titre <strong>gras</strong></h1> <p> Pour décorer seulement ce qui est dans la balise strong on utilisera la syntaxe suivante </p> h1 em{ color:green; font-weight:bold; }-
Le sélecteur d'enfant permet d'appliquer un style à un élément fils d'un autre élément, par exemple la syntaxe body > p {color:blue;} affectera la couleur bleu à tous les paragraphes fils de p.
Le sélecteur d'enfant adjacent, permet d'appliquer un style à un élément qui suit un autre élément.
<h1> Titre </h1> <p>Texte apres le titre</p> Pour décorer le paragraphe situé après un titre h1 on utilisera la syntaxe suivante : h1 + p { color:green; font-weight:bold; }
Les pseudo éléments et pseudos classes
En CSS2, le style est habituellement lié à un élément selon sa position dans l'arbre du document. Ce modèle simple est suffisant la plupart du temps, mais du fait de la structure de cet arbre, n'est pas adapté dans certains contextes usuels de publication. Par exemple, en HTML 4.0, il n'existe pas d'éléments qui se réfèrent à la première ligne d'un paragraphe, et donc aucun sélecteur simple en CSS ne peut y correspondre. C'est pourquoi CSS introduit les concepts de pseudo-éléments et de pseudo-classes ce qui permet une mise en forme à partir d'informations absentes de l'arbre du document.
Les pseudo-classes peuvent être dynamiques, dans le sens où un élément peut les acquérir ou les perdre pendant l'interaction de l'utilisateur avec le document. Voici un exemple concret des pseudos classes les plus souvent utilisées :
A:link { color: red } /* lien non-visité */
A:visited { color: blue } /* lien visité */
A:hover { color: yellow } /* lien survolé */
A:active { color: lime } /* lien activé */
Les pseudos éléments les plus utilisés sont ceux permettant d'accéder à la première ligne ou à la première lettre d'un texte. Ils permettront par exemple de créer un effet de lettrine au début d'un nouveau paragraphe.
P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }
<p>Voici un morceau de texte qui est formaté sur deux lignes.</p>
D'autres pseudos éléments comme before et after permettent d'insérer un contenu avant ou après un élément. Mais ce principe s'éloigne déjà un peu de la séparation de la forme et du contenu.