Sélecteurs
Dans la mesure où nous voulons décrire le style d'un élément en dehors de cet élément, il va être nécessaire de pouvoir indiquer à quel(s) élément(s) s'applique un style donné. Pour cela on dispose de sélecteurs permettant de désigner telle ou telle catégorie d'élément.
La syntaxe générale des styles est identique dans les éléments <style> internes et dans les feuilles de style externe :
sélecteur {liste des propriétés de style séparées par un point-virgule}
Exemples de sélecteurs fréquemment utilisés :
- le nom d'une balise : dans ce cas le style s'applique à tous les éléments introduits par cette balise
<style>
div {border:solid #000000;}
</style>
le nom d'une balise suivi d'un point et d'un nom , qui sera la valeur de l'attribut classe des éléments affectés (sélecteur de classe)
<style>
p.surligne{background:#ffffaa;}
</style>
Seuls les éléments p dont l'attribut class vaut surligne seront affectés par ce style.
<p class="surligne"> texte surligné de jaune </p>
un point suivi d'un nom (sélecteur de classe)
<style>
.rouge{color:red;font-weight:bold;}
</style>
Tous les éléments dont l'attribut class vaut rouge seront affectés par ce style (si applicable)
<p class="rouge"> paragraphe, texte rouge gras </p>
<li class="rouge"> élément de liste,texte rouge gras </li>
<span class="rouge"> span, texte rouge gras </span>
Un des cas précédents, suivi de : et d'un mot-clé comme hover,link, focus... précisant les circonstances dans
lesquelles le style s'applique à l'élément.
<style>
a:link{color:red;font-weight:bold;text-decoration:underline;}
a:hover{color:yellow;}
a:visited{color:darkred;}
</style>
Les liens seront affichés en rouge gras souligné, apparaîtront jaunes au passage de la souris, et les liens visités seront rouge sombre.
Un autre exemple d'utilisation de hover (passer la souris pour essayer d'identifier une célèbre peinture de la Renaissance...)
Deux noms de sélecteurs écrits côte à côte : dans ce cas le style s'applique aux éléments désignés par le second sélecteur, si ils ont un parent désigné par le premier sélecteur. Bien pratique pour les éléments composés comme les tableaux, les listes...
Par exemple si le sélecteur est
.maliste LI alors le style s'appliquera aux éléments de liste seulement s'ils appartiennent à une liste dont l'attribut
class vaut maliste.
Le principe de la
cascade s'applique aussi aux sélecteurs. Un sélecteur plus précis hérite du style défini pour un sélecteur plus général, mais il prend la priorité. Par exemple si on définit des styles pour les catégories div, div.madiv et div.madiv:hover , div.madiv hérite des propriétés de div, mais peut les modifier. De même div.madiv:hover hérite des propriétés de div.madiv et peut les modifier.
Créez une nouvelle page "demo2.html" contenant un long texte, utilisez les sélecteurs et une déclaration de style globale pour donner à plusieurs paragraphes du texte un style identique