Cascading Style Sheet/Appliquer un style à un élément

Début de la boite de navigation du chapitre

fin de la boite de navigation du chapitre

Introduction

Pour réaliser une mise en page d'un document HTML ou XML, il faut appliquer des styles aux éléments du document source en CSS. Ceci se passe en deux étapes :

1. Sélectionner un ou plusieurs éléments à l'aide de sélecteurs.
2. Appliquer un ou plusieurs styles aux éléments retenus par le sélecteur.

Les déclarations

Syntaxe du langage CSS :

selecteur{propriété:valeur;}

Soit l'exemple suivant :

 input {background-color:yellow;}

• input {background-color:yellow;} : un jeu de règles
• input : un sélecteur
• {background-color:yellow;} : un bloc de déclarations
• background-color:yellow; : une déclaration
• background-color : une propriété
• yellow : une valeur

Les sélecteurs

Sélecteur de type

Le sélecteur de type sélectionne tous les éléments ayant le même type, par exemple si on a besoin de sélectionner tous les éléments h1 d'un document, notre code serait :

h1 {}

Sélecteur universel

Le sélecteur universel sélectionne tous les éléments, on l'utilise avec l'étoile "*" :

* {}

Dans la pratique

Ce sélecteur universel est très peu utilisé, du moins il est recommandé de ne pas l’utiliser pour ces 2 bonnes raisons :

1. Il stoppe la cascade : on ne pourra pas redéfinir une propriété déjà définie dans ce sélecteur
2. Il pose un problème de performances pour le navigateur

Sélecteur d'ID

Les langages de balisage tel (X)HTML, SVG ou MathML définissent un attribut id (identifiant) ayant une valeur qui correspond au type ID qui peut être appliqué à tous les éléments. Si nous reprenons l'exemple plus haut et souhaitons que seul le premier h1 soit retenu par notre sélecteur, on pourrait donc ajouter un attribut id à notre premier élément h1, comme cela :

<h1 id="premh1">Premier H1</h1>
<h1>Deuxième H1</h1>

Pour sélectionner le premier h1 en CSS, on doit donner la valeur de l'attribut id précédée du caractère croisillon "#" :

#premh1 {}

Il est aussi possible de combiner le sélecteur de type et le sélecteur d'ID :

h1#premh1 {}

En étant rigoureux dans le vocabulaire, on devrait parler ici pour "h1#premh1" d'un sélecteur qui est composé d'une séquence de deux sélecteurs simples (h1 et #premh1). Ce lexique peut vous être utile dans la suite de votre apprentissage. Pour que notre sélecteur retienne un élément, il faut que ce dernier soit à la fois de type h1 et qu’il ait comme valeur d'attribut ID "premh1".

À noter aussi qu’il est important de faire la différence entre le nom d'attribut "id" et la valeur d'attribut "ID". Il est tout à fait possible d’avoir un document qui définit un attribut n'ayant pas comme nom "id" mais ayant un type de valeur "ID". D'autre part XML propose de façon générique un attribut "xml:id".

Dans la pratique

On utilisera plus aisément les classes pour gérer des styles de mise en forme. Les "id" sont souvent utilisés pour cibler une interaction en JavaScript. Ainsi, il est plus clair d’utiliser des id ou des classes avec un préfixe "js" pour tout ce qui est ciblé par le JavaScript et d’utiliser les classes pour les CSS.

Sélecteur de classe

Ce sélecteur a beaucoup de points communs avec le sélecteur d'ID mais il est utile de connaître les quelques différences. Premièrement il ne se base lui que sur l'attribut class (notamment utilisé en (X)HTML) et n’est pas associé au type ID. Il est ainsi possible que deux éléments dans un document ait un même nom de classe (identifiant). Deuxièmement on l'indique non pas avec un croisillon mais avec un point "." :

.premh1 {}

Autre chose moins importante qu'on utilise assez rarement, comme la spécification HTML 4 nous l'indique il est possible de définir plusieurs noms de classe par élément en les séparant par un espace :

<p class="rouge">Tomate rouge</p>
<p class="rouge">Pomme rouge</p>

p.rouge {}

Si vous avez bien compris, nos deux éléments p sont retenus par le sélecteur "p.rouge" puisque ces éléments ont bien comme type "p" et ont bien un nom de classe "rouge". À noter ici que le sélecteur simple "p" pourrait être ommis, mais on peut le garder pour nous faciliter la lisibilité du code.

Pour être honnête et complet, il est aussi possible de définir plusieurs identifiants de type ID par élément, mais ceci est moins facile à faire et surtout beaucoup moins bien supporté par les navigateurs actuels.

Combinateur de descendance

Les sélecteurs simples étudiés précédemment peuvent être un peu lourds pour sélectionner un élément précis dans un document. C'est pourquoi le combinateur de descendance existe, il s'intercale entre deux séquences de sélecteurs simples, avec un espace blanc :

<ul>
<li>Premier item de liste</li>
<li>Deuxième item de liste</li>
</ul>

ul li {}

Notre sélecteur "ul li" retient tous les éléments li qui sont dans l'arbre du document descendants d'un élément ul.

Liste de sélecteurs

Il arrive quelque fois qu'on veuille appliquer les mêmes styles à plusieurs éléments différents, avec ce qu'on a appris jusque là, on serait obligé de faire :

h1 {}
h2 {}
h3 {}

Il est possible de regrouper ces sélecteurs en une liste de sélecteurs avec l'aide d'une virgule :

h1, h2, h3 {}

Note : l'espace après la virgule est optionnel.

Pseudo-classes d'ancres

:link

À l'intérieur des documents se trouvent souvent des liens, qui permettent comme vous le savez de naviguer à l'intérieur d'un document ou vers des documents externes.

<lien xhref:type="simple" xhref:href="doc.xml">Document XML</lien>

Pour sélectionner l'élément lien et afficher l'intitulé du lien en bleu, on pourrait faire :

lien {color:blue;}

Mais on peut aussi utiliser la pseudo-classe :link :

:link {color:blue;}

:visited

Changer le style d'un lien lorsque celui-ci a déjà été visité par l'utilisateur, rien de plus simple avec la pseudo-classe :visited, justement faite pour cet usage.

:link {color:blue;}
:visited {color:purple;}

Le lien sera bleu et violet si l'utilisateur l'a déjà visité récemment. Notons qu'on pourrait aussi ajouter le sélecteur simple "lien" devant nos pseudo-classes, mais il n’est pas indispensable de le mettre ici.

Pseudo-classes dynamiques

On peut être amené à changer l'effet d'un élément lorsque celui-ci reçoit l'attention d'un navigateur, c’est la raison pour laquelle nous parlons de pseudo-classes dynamiques.

:hover

Cette pseudo-classe sélectionne les éléments qui sont survolés par un système de pointage tel une souris ou un stylet. Pour reproduire le soulignement des liens de Wikipedia, nous appliquerons la feuille de style suivante :

a:hover {text-decoration:underline;}

Note : IE6 ne comprend pas cette pseudo-classe lorsqu'elle n’est pas attachée aux liens.

:active

active sélectionne les éléments qui sont activés par l'utilisateur, par exemple lorsqu'on clique avec la souris sur un lien.

a:active {color:red;}

Note : Internet Explorer ne comprend pas :active lorsque non attachée à un lien.

:focus

focus sélectionne les éléments qui reçoivent l'attention de l'utilisateur, par exemple quand celui-ci est prêt à taper du texte dans un formulaire :

input {background-color:yellow;}

Cette pseudo-classe est notamment utilisée sur Firefox pour afficher un contour en pointillé lorsqu'on clique sur un lien, dans ce genre de cas elle prend en faite le dessus sur :active. Les navigateurs basés sur le moteur de rendu Webkit tel Google Chrome ou Apple Safari ne l'entendent pas de cette oreille et ne considèrent pas qu'un clic sur un lien est synonyme de focus.

Note : Internet Explorer ne supporte pas cette propriété avant la version 8.

Les pseudo-éléments

Les pseudo-éléments sont des éléments qui ne sont pas présents physiquement dans l'arbre du document. Ils ne peuvent être écrits qu’à la fin d'un sélecteur.

:first-letter

<article>First-letter</article>

article:first-letter {font-size:200%;}

La première lettre de notre article aura une taille de police multipliée par 2.

:first-line

Ce n’est pas la première lettre qui est retenue ici mais la première ligne :

p:first-line {text-decoration:overline;}

Une barre horizontale sera placée au dessus de la première ligne du paragraphe.

Nous étudierons plus en détail ces pseudo-éléments dans la suite du cours.

Les propriétés

Certaines propriétés changent d'un navigateur à l'autre :

Sélecteur	Navigateur
-ms-transform	Internet Explorer 9
-moz-transform	Mozilla (Firefox)
-webkit-transform	Webkit (Chrome, Safari)
-o-transform	Opera
-khtml-transform	Konqueror

Les valeurs

Les couleurs

Il est possible de définir les couleurs de 3 façons :

1. Par leurs 16 noms : aqua, black, blue, fushia, gray (ou grey), green, lime, maroon, navy, purple, red, silver, teal, white, yellow. Ex :

   body{background-color:blue;}. /* Couleur de fond bleue */
   

2. Par code RGB (red, green, blue). Ex :

   h1{color:rgb(10,60,110);} /* Titre 1 bleuté */
   

3. Par valeur hexadécimale. Ex:

   p{color:#3300FF;} /* Paragraphe bleu */
   

Le texte

1. font-style propose 3 styles de texte : normal, italic, et oblique.
2. font-weight influe sur la graisse de la police de caractère : normal, bold, bolder, lighter. Il accepte également les valeurs entre 100 et 900 par pas de 100.
3. font-size : joue sur la taille des caractères, ses unités peuvent être : cm, mm, in (pouces), pt (1 point = 1/72 de pouce), pc (1 picas = 12 points), em (emphasize), ex (minuscule), px (pixels), %. Exemple de classes de paragraphes :
   1. p#t1 { font-size: 12px; }
   2. p#t2 { font-size: 1.5em; }
   3. p#t3 { font-size: 175%; }

Les listes

1. Non ordonnées (<ul>).

   Ses styles sont : none, disc, circle, square, url([image]).

   Exemple : ul {list-style-type:square;}.

2. Ordonnées (<ol>).

   list-style-type comprend : none, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, url([image]).

   Exemple : ol {list-style-type:upper-roman;}

Le positionnement

1. Trois valeurs possibles pour position : static, relative, absolute, personnalisables avec left, right, top, bottom.

   Exemple : déplacement de l'id p1 vers le bas de 20 pixels, et vers la gauche de 30 :

   #p1 { position:relative; bottom:20px; left:-30px; }
   

2. Dans le coin supérieur droit :

   #p1 { position:absolute; top:0; right:0; width:200px; }
   

3. Remplacement des positionnements précédents :

   #p1 { position:static; }
   

En position relative, il existe float, qui peut être égal à left, right, none, inherit :

#p1 { float:none; }

Pour aligner du texte, il existe :

#p1 { text-align:center; }

Pour aligner un bouton contenant du texte, utiliser text-align dans une balise qui le contient.