Les balises Les classes Les identifiants Les pseudo-classes Jardin Zen

Les sélecteurs de style

Une feuille de style peut comporter autant de règles que souhaité.
En partant de l'exemple donné dans Règle @import

h1 {
color: blue;
text-align: center;
}

pour représenter tous les liens hypertextes <a> en police grasse, on ajoutera dans la même feuille de style

a {
font-weight:bold;
}

Cet exemple utilise comme sélecteurs les balises <h1> et <a>.

Ses règles affecteront toutes ces balises dans les pages HTML concernées.
Cet effet n'est pas toujours désirable : on souhaite parfois n'intervenir que sur certaines balises d'un type donné (par exemple, en colorant en vert certains liens hypertextes mais pas tous).

Pour résoudre cela, le langage CSS propose différentes formes de sélecteurs :

• les sélecteurs de balises (utilisés jusqu'ici) ;
  
• les sélecteurs de classes (une classe est un nom donné à un ensemble d'éléments HTML à distinguer) ;
  
• les sélecteurs d'identifiants (un identifiant ou id est le nom attribué à un élément unique dans le document HTML) ;
  
• les pseudo-classes (variantes pour certaines fonctionnalités, par exemple les liens).

1) Les balises

Toute balise HTML peut intervenir dans un sélecteur.

Ainsi on pourra supprimer tous les interlignes entre paragraphes en attribuant à la balise <p> des marges haute et basse nulles :

p {
margin-top: 0;
margin-bottom: 0;
}

2) Les classes

Une classe est un nom que l'on choisit librement (en se limitant aux caractères alphanumériques classiques) et dont on baptise les éléments concernés.

Un sélecteur de classe reprend son nom en le préfixant d'un point (par exemples :
.ma_classe, .toto, etc.).

Exemple : on affichera en vert les liens hypertextes du document à l'exception de certains liens particuliers que l'on souhaite voir en rouge en reprenant la technique suivante.

Une première règle précise le comportement par défaut à adopter pour toutes les balises <a> :

a {
color: green;
}

Appelons .sommaire la classe des liens spécifiques. Ceci permet d'écrire une règle qui leur est propre :

.sommaire {
color: red;
}

Dans le document, les liens seront alors identifiés comme suit :

<p><a href="#">lien normal</a></p>

apparaîtra en vert, comme défini par la première règle.

<p><a href="#" class="sommaire">lien rouge</a> </p>

apparaîtra en rouge, ainsi que tous les liens de la classe sommaire, par application de la règle spécifique qui prend le pas sur le sélecteur général.

Rien ne contraint à réserver cette classe à l'élément <a> : elle peut s'appliquer à n'importe quel autre élément. Ainsi un paragraphe définit comme suit :

<p class="sommaire">un paragraphe de la même classe</p>

sera lui aussi affiché en rouge.

Le nombre de classe utilisées est libre ainsi que le nombre d'éléments auxquels elles s'appliquent. Un même élément peut aussi recevoir plusieurs classes.

3) Les identifiants

Un identifiant (identificateur ou id) est lui aussi un nom choisi librement (en se limitant aux caractères alphanumériques classiques).

Il se distingue de la classe en ce qu'il ne peut porter, au plus, que sur un objet du document.
Les sélecteurs CSS s'y réfèrent par l'emploi d'un caractère dièse (#) suivi de son nom (exemples : #exemple, #toto, #bannière, etc.).

Si l'une des zones de la page comporte un encart, avec un menu, structuré par une balise <div> contenant à son tour plusieurs autres éléments, cette balise <div> sera spécifique à l'encart.
C'est à son niveau qu'il faut intervenir pour appliquer la mise en forme propre à ce menu (exemple, un arrière plan jaune). On pourra attribuer à ce <div> une classe (.encart) ou un identifiant (#encart)
Cet encart étant unique au document (où l'on ne trouve aucun autre élément comparable), nous privilégierons la solution de l'identifiant en écrivant la règle CSS :

#encart {
background-color:yellow;
}

Dans le code HTML on précisera cet identifiant comme cela :

div id="encart">contenu de id "encart"</div>

Rappelons que seule cette balise <div> pourra porter l'identifiant #encart dans le code HTML. Celui-ci sera interdit à tous les autres éléments.

Prenez le réflexe d'attribuer un identifiant aux objets unique de votre code !
On trouve souvent un bloc d'en-tête, un bloc publicité, un bloc annexe, un bloc pied de page, etc.
les paragraphes ou listes de menus, susceptibles d'apparaître plusieurs fois, seront quant à eux qualifiés à l'aide de classes.

4) Les pseudo-classes

Les pseudo-classes créent des mécanismes ou des relations qui ne sont pas réalisables en HTML.

CSS crée des éléments spécifiques à certaines actions (comme le survol d'un lien) ou à certaines arborescences (comme le premier paragraphe d'un bloc).
Ces techniques permettent de styler un contenu n'apparaissant même pas dans le code du document.

Un exemple courant est l'utilisation de la pseudo-classes : hover, qui prend effet lorsque le pointeur de la souris survole l'élément concerné.Ainsi la règle suivante

a:hover { text-decoration:none; }

affectera tous les liens de la page lors de leur survol par le pointeur de souris.

Introduction Html

Le fond et la forme

Introduction Css

Les sélecteurs

Ouvrages de références

• « More on CSS » par Eric Meyer
  (© CampusPress), 2005.


• «  CSS 2 Pratique du design web » par Raphaël Goetter
  (© Eyrolles), 2009.

Auto-entrepreneur.
Access®, Excel®, Powerpoint®, Word® & Windows® sont des produits et marques déposés
propriété de Microsoft, Inc.
Photoshop® & Dreamweaver ® sont des produits et marques déposés propriété de Adobe System.