2 Le langage CSS

 2LelangageCSS
Objectifs du chapitre Présenter les feuilles de style et leurs rôles Présenter les éléments de spécification des styles dont : Les méthodes de sélection des éléments de la page; Le formatage des pages; Formatage des textes; Les éléments de marge, de distances et de positionnement; La manipulation des couleurs. Montrer des exemples de conception de pages avec des menus de navi‐
gation interactifs Décrire tous des aspects en utilisant des exemples pratiques CSS (Cascading Style Sheet) permet de décrire des éléments de formatage et de mise en pages pour les documents HTML. Ce langage est un incontournable dans la conception des sites Web. Dans ce chapitre, nous présentons la version 2 de CSS. Dans le chapitre 6, nous présentons le langage CSS3 qui contient les éléments les plus récents. 121 2 Programmation du Web 2.1 Introduction CSS (Cascading Style Sheet) est un langage de spécification des propriétés de styles permettant de formater le contenu d’une page HTML. C’est un langage simple de présentation appliqué aux pages Web. Il permet de contrôler la présentation d’un texte comme la couleur, la taille, la police, les espacements entre les paragraphes, la taille des colonnes, le positionnement des éléments, les images ainsi que leurs tailles, la couleur de fond, etc. Ce langage est standardisé par le consortium W3C et est en ce moment la version 2 qui est acceptée par tous les navigateurs. Cependant, la version 3 (appelée CSS3), plus riche est en cours d’adoption par les navigateurs. Nous la décrirons plus loin dans le livre. Comme on le verra plus tard dans ce document, on peut spécifier le style de trois manières : en l’associant à un élément HTML particulier; en l’associant à des éléments dans un document; en le stockant dans un fichier externe auquel on peut faire référence à partir du document HTML. L’usage des styles offre plusieurs avantages. On peut écrire un style une fois et le réutiliser dans plusieurs documents; ce qui permet d’économiser du temps lors du développement d’un site tout en assurant une homogénéité dans la présentation. Il suffit de modifier le fichier contenant des styles pour modifier la présentation de plusieurs pages qui y font référence. L’usage des styles permet aussi de faciliter l’adaptation d’un site Web. Dans certains cas, on veut fournir un même contenu tout en voulant l’afficher différemment sur plusieurs types d’appareils tels que les ordinateurs de bureau, les ordinateurs portables, les téléphones intelligents, etc. On peut simplement définir un style pour chaque type d’appareil permettant ainsi à la présentation du document de s’adapter au type d’appareil utilisé. De plus, grâce aux feuilles de styles dites externes (voir plus loin), on peut assurer une cohérence dans la présentation des documents du site Web d’une entreprise et éviter des erreurs de formatage. Une spécification de style consiste à associer des valeurs à des propriétés de style en utilisant la syntaxe : propriete1:valeur1; propriete2:valeur2; …
Par exemple, on peut définir la largeur et la hauteur d’une image en utilisant les propriétés width et height et en leur associant des valeurs adéquates. Il existe trois façons d’inclure des styles dans un document : les styles en ligne, les styles internes et les styles externes. 122 Le langage CSS 2 2.1.1 Les styles en ligne Dans ce mode, on utilise l’attribut style qu’on applique à une balise HTML. Dans cet attribut on mettra la valeur de la propriété de style en suivant la syntaxe : <element… style="propriété:valeur"> … </element>
Par exemple, si on veut spécifier la couleur rouge pour le texte d’un para‐
graphe, on écrirait : <p style="color:red"> Le texte de ce paragraphe sera en rouge </p>
On peut spécifier plusieurs propriétés en les séparant par une virgule en suivant la syntaxe suivante : <element style="propriété1:valeur1; propriété2:valeur2;…"> … </element>
Par exemple, si on veut spécifier la hauteur et la largeur d’une image, on peut utiliser les propriétés width et height dans l’attribut style appliqué à l’élément <img> comme suit : <img src="monImage.jpg" style="width:200px; height:100px" / >
Notons que cette façon de spécifier les styles peut être trop fastidieuse, car il faut les appliquer à chaque élément. 2.1.2 Les styles internes Les styles internes nécessitent l’utilisation de la balise <style> qui doit paraître dans l’en‐tête à l’intérieur de l’élément <head> du document : <html>
<head>
<style type="text/css">
...
</style>
…
</head>
…
</html>
Cette balise possède un attribut type qui permet de préciser le langage utilisé, dans notre cas, css qu’on décrit grâce à la valeur text/css. Le contenu de la balise <style> est formé de lignes qui associent des éléments (spécifiés par leurs sélecteurs) dans le document HTML à des propriétés de style selon la syntaxe : <style type="text/css">
selecteur1 {propriété11:valeur11; propriété12:valeur12; …;}
sélecteur2 {propriété21:valeur21; propriété22:valeur22; …;}
…
</style>
123 2 Programmation du Web Les sélecteurs sont des moyens d’identifier des éléments particuliers dans le document. Ils jouent un rôle important dans les définitions des styles. On les décrira en détail plus loin dans ce chapitre. Dans l’exemple qui suit, on spécifie les propriétés de couleur du texte, de la police (avec la propriété font‐family) pour les éléments de type paragraphe (balise <p>) et des dimensions (length et width) pour les éléments de type images (balise <img>). <style type="text/css">
p {color: red; font-family: Arial;}
img {width: 200px; height: 150px;}
</style>
2.1.3 Les styles externes Dans ce mode, on doit mettre les spécifications de style dans un fichier externe auquel on fait référence dans un document HTML. On désigne ce fichier par feuille de style. La balise <link> permet d’indiquer ce lien entre le document et une ressource externe qui contient cette feuille de style. Elle possède un attribut rel qui indique la nature de cette relation et un attribut href qui indique l’emplacement du fichier qui contient les styles. Pour indiquer une relation de type feuille de style on écrirait rel="stylesheet". La balise <link> doit se trouver dans l’en‐tête (c’est‐à‐dire dans la balise <head>) du document HTML et suivre la syntaxe suivante : <head>
…
<link rel="stylesheet" type="text/css" href="URL" />
…
</head>
L’URL est l’adresse du fichier qui contient la feuille de style. On peut faire référence à un fichier local ou à un fichier qui se trouve sur un site distant par rapport au document HTML. Le fichier de feuille de style doit avoir l’extension .css. La feuille de style doit contenir la spécification des propriétés sans utiliser la balise <style>. Par exemple, pour la description donnée dans l’exemple précédent, on mettra la description du style dans un fichier (exemple monStyle.css) qui contient : p {color: red; font-family: Arial;}
img {width: 200px; height: 150px;}
124 Le langage CSS 2 Dans le document HTML qui utilise ce fichier, on écrirait (en supposant que la feuille de style se trouve sur le même répertoire que le document HTML) : <head>
<link rel="stylesheet" type="text/css" href=" monStyle.css" />
</head>
2.1.4 Utilisation des feuilles de style On peut utiliser les feuilles de style pour adapter la présentation à différentes situations : On peut associer un style de présentation à un ensemble particulier d’utilisateurs. On peut adapter la présentation à un type particulier d’appareils tels que les ordinateurs fixes, les ordinateurs portables, les tablettes, les téléphones intelligents, etc. On peut ainsi séparer le contenu de la présentation. Cette « séparation des préoccupations » (ou Separation of concerns) est un des avantages des feuilles de style. Elle fait en sorte que pour changer de présentation, il suffit de modifier la feuille de style sans toucher au contenu du document HTML. On peut construire une base contenant plusieurs fichiers des styles qu’on pourra utiliser en fonction de la situation d’utilisation ou faire référence à des feuilles de style déposées sur un serveur distant qui gère ces styles de manière centralisée et les modifie en fonction de la situation. L’utilisation des feuilles de style pour l’adaptation est illustrée dans la figure ci‐dessous. Pr
és
en
t
at
io
n
1
Figure2.1
Pr
en
és
tio
ta
n
3
125 2 Programmation du Web Dans un même fichier HTML, on peut utiliser les trois modes de spécification des styles : styles en ligne, styles internes et styles externes. On a affaire à des styles dits en Cascades (Cascading Syle Sheets ou CSS). Dans ce cas, il y a des règles de priorité qui s’appliquent. On les expliquera en détail plus loin dans ce chapitre. Une spécification CSS consiste à indiquer des règles qui comprennent trois éléments : Un sélecteur qui correspond aux éléments HTML auxquels s’appliquera la règle de style. Ce sélecteur peut être une balise HTML ou une balise à laquelle on ajoute un identifiant unique, identificateur de classe ou une fonction de sélection (voir plus loin); Une propriété de style que l’on veut appliquer à l’élément sélectionné. Il existe un grand nombre de propriétés qu’on peut utiliser; La valeur que l’on veut appliquer à la propriété. Dans une même règle, on peut spécifier plusieurs propriétés. On doit les séparer par des points‐virgules et les mettre entre deux accolades comme dans : sélecteur { propriété: valeur;
propriété: valeur;
…
propriété: valeur:
}
Dans l’exemple ci‐dessous, on applique plusieurs propriétés de style à certains éléments : Les textes des paragraphes (balise <p>) sont en rouge; Ceux des en‐têtes (balise<h2>) sont en bleu; Les cellules des tables (balise <td>) sont de largeur 100px et de texte de couleur verte; La table (balise <table>) est encadrée avec un trait vert de 2 pixels d’épaisseur. <! Fichier: CSS/style1.html -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="monStyle.css" />
</head>
<body>
126 Le langage CSS 2 <p> Ce premier paragraphe est rouge.</p>
<h2>Cet en-tête est en bleu</h2>
<table>
<tr>
<td> Nom </td><td> Alain </td>
</tr>
<tr>
<td> Age </td><td> 30 </td>
</tr>
<tr>
<td> Salaire </td><td> 40000
</td>
</tr>
</table>
<p> Ce deuxiéme paragraphe est rouge aussi.</p>
Le reste du document.
</body>
</html>
Le contenu du fichier monStyle.css est : p {color:red;}
h2 {color:blue;}
table {border:2px solid green;}
td {
width: 100px;
color : green;
}
Résultat : Figure2.2
127 2 Programmation du Web 2.2 Les sélecteurs Pour désigner les éléments auxquels on applique un style, on peut utiliser les noms des balises. Cela implique que ce style s’appliquera à toutes les instances de cette balise sans distinction. Pour sélectionner des éléments spécifiques dans le document, on utilise des sélecteurs plus sélectifs. Ces sélecteurs peuvent être simples ou composés et exprimés sous forme d’expressions de sélection. L’attribut class L’attribut class permet de définir un groupe d’éléments et de l’associer à un même identificateur. Par exemple, on peut définir une classe « rouge » qui permet de grouper des éléments auxquels on veut changer la couleur de texte et la mettre en rouge. Si on veut qu’un paragraphe appartienne à cette classe, on écrirait : <p class="rouge"> Contenu du paragraphe </p>
On peut aussi définir une classe menu pour désigner les éléments appartenant à un menu pour lequel nous voulons mettre la couleur de fond en vert grâce à la propriété backgound‐color. Les éléments d’une classe peuvent avoir la même balise ou des balises différentes. Dans l’exemple ci‐dessous, les paragraphes et les blocs <div> ainsi qu’un en‐tête <h2> appartiennent tous à la classe rouge : <p class="rouge">Un paragraphe de la classe rouge</p>
<p class="rouge">Un autre paragraphe de la classe rouge </div>
<div class="rouge ">Un div de la classe rouge et menu</p>
<h2 class="rouge ">Un en-tête de la classe</h2>
On peut ainsi appliquer un même style à tous les éléments de cette classe. Un élément peut appartenir à plus d’une classe. Dans ce cas, on met les noms de ces classes dans un même attribut class en les séparant par un espace comme dans : <p class="rouge bleu"> Un paragraphe de la classe rouge et de la classe bleue
</p>
128 Le langage CSS 2 L’attribut id L’attribut id permet d’associer un identifiant unique à un élément. On ne doit pas reprendre le même identifiant plusieurs fois dans un même document. Par exemple, si on veut qu’un paragraphe ait un identificateur monPar1, on écrirait alors : <p id="monPar1"> Contenu du paragraphe </p>
Grâce à la spécification de style et l’attribut id, on peut appliquer un style à ce seul élément. Un élément peut avoir un identifiant unique et en même temps appartenir à une classe comme dans : <p class="rouge" id="monPar1"> Contenu du paragraphe </p>
Ceci permet de lui appliquer les styles associés à toute la classe et ceux associés de manière unique. L’exemple qui suit illustre l’utilisation des attributs class et id. <p id="bleu"> Un paragraphe bleu</p>
<p class="rouge"> Un paragraphe de la classe rouge </p>
<div class="rouge"> Un div de la classe rouge </div>
<div class="rouge menu"> Un div de la classe rouge et menu </p>
<div class="menu">
<ul>
<li>item 1 </li>
<li> item 2 </li>
<li> choix 1 </li>
<li>item 3
<ul>
<li id="sous_ligne"> Item 4 – sous_ligne </li>
<li> item 5 </li>
</ul>
</li>
</ul>
</div>
Le sélecteur #id La valeur de l’attribut id dans un sélecteur sert à appliquer le style à un élément unique dans le document. Pour cela, on fait précéder l’identifiant du caractère # comme dans : #monPar1 {
font-family: Arial;
color: blue;
}
129 2 Programmation du Web Cet exemple applique les propriétés font‐family et color à l’élément unique identifié par monPar1. On peut préciser l’élément identifié par un identificateur en utilisant sa balise grâce à un sélecteur de type élément#identificateur comme dans l’exemple ci‐dessous qui sélectionne le paragraphe identifié par monPar1. p#monPar1 {
font-family: Arial;
color: blue;
}
Le sélecteur .class On peut utiliser la valeur de l’attribut class dans un sélecteur pour appliquer le style aux éléments de cette classe. Pour cela, on fait précéder le nom de la classe du caractère « . » (point) comme dans : .rouge {
color: red;
width: 400px;
}
Dans le cas de l’exemple donné ci‐dessous, ce style s’applique aux éléments <p> et <div> qui appartiennent à la classe rouge. <p id="bleu"> Un paragraphe bleu </p>
<p class="rouge"> Un paragraphe de la classe rouge </p>
<div class="rouge"> Un div de la classe rouge </div>
Pour préciser à quel type d’élément de cette classe on veut appliquer le style, on fait précéder le nom de la classe de cet élément. Dans l’exemple précédent, p.rouge précise qu’il s’agit d’éléments <p> qui appartiennent à la classe rouge (et non les éléments <div>). Pour appliquer le style dans ce cas, on écrirait : p.rouge {
color: red;
width: 400px;
}
Étant donné qu’un élément peut appartenir à plusieurs classes, un sélecteur permet de désigner un élément en tant qu’élément d’une ou l’autre de ces classes. Par exemple, la classe rouge à la page suivante concerne un élément <div> qui appartient aux deux classes rouge et bleu et un autre qui appartient à la classe rouge uniquement : 130 Le langage CSS 2 <div class="vert bleu"> Dans la div dans la classe rouge et la classe bleu </div>
<div class="vert" > Un div de la classe rouge </div>.
La spécification ci‐dessous colore l’élément <div> qui appartient à la classe vert. p.rouge {
color: green;
}
On peut également sélectionner des éléments particuliers en suivant la hiérarchie dans l’emboîtement des éléments dans le document. Sélecteur de descendant : E F Si E et F sont deux sélecteurs, l’expression E F sélectionne tous les éléments sélectionnés par F qui sont descendants des éléments sélectionnés par E. Considérons l’exemple ci‐dessous : <div> Un texte <em> dans le div </em>. La suite </div>
<p> Un texte de <em> paragraphe - partie 1 </em> et <em> paragraphe – partie
2</em>. La suite </p>
Si on utilise la spécification ci‐dessous, alors tous les éléments <em> seront en rouge. em {
color: red;
}
Par contre, si on utilise la spécification suivante, p em {
color: red;
}
seuls les éléments <em> qui se trouvent à l’intérieur de <p> seront en rouge : Dans l’exemple suivant, le sélecteur .menu1 > li désigne les éléments <li> qui sont descendants de .menu. Dans le cas de notre exemple, cela correspond aux éléments dont les contenus sont Item 1, Item 2, Item 3 et également Item 1 1 et Item 1 2. Par contre, les éléments Item 4 et Item 5 ne seront pas sélectionnés, car ils ne descendaient pas de .menu. 131 2 Programmation du Web <ul class="menu1">
<li> Item 1 </li>
<ul>
<li> Item 1 1 </li>
<li> Item 1 2</li>
</ul>
< li> Item 2 </li>
<li> Item 3 </li>
</ul>
<ul>
<li> Item 4 </li>
<li> Item 5 </li>
</ul>
Le sélecteur de descendants directs : E > F L’expression E > F sélectionne tous les éléments sélectionnés par F qui sont descendants directs des éléments sélectionnés par E. Considérons l’exemple ci‐dessous : <div> Un texte <em> dans le div </em>. La suite </div>
<p> Un texte de <em> paragraphe – partie 1 </em> et <div><em> paragraphe –
partie 2 </em><div>. La suite </p>
Si on utilise la spécification ci‐dessous, seul le premier élément <em> (qui contient le texte paragraphe – partie 1) qui se trouve à l’intérieur de <p> sera en rouge. p > em {color: red;}
Dans l’exemple ci‐dessous, le sélecteur .menu1 > li désigne les éléments <li> qui sont descendants directs (ou enfants) de .menu. Dans le cas de notre exemple, cela correspond aux éléments dont les contenus sont Item 1, Item 2 et Item 3. Les éléments de contenus Item 4 et Item 5 ne sont pas inclus. <ul class="menu1">
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
</ul>
<li> Item 4 </li>
<li> Item 5 </li>
Le sélecteur universel : * Ce sélecteur permet de spécifier des styles pour tous les éléments du document. Par exemple, * {color : red;}
permet de colorer tout le document en rouge. 132 Le langage CSS 2 La spécification .menu > * désigne tous les enfants de .menu. Dans l’exemple ci‐dessous, il désigne tous les éléments <li>, <ul> et <div> descendants de .menu. <ul class="menu1">
<li> Item 1 </li>
<ul>
<li> Item 1 1 </li>
<li> Item 1 2</li>
</ul>
<div> Div 1 </div>
<div> Div 2 </div>
</ul>
<ul>
< li> Item 2 </li>
<li> Item 3 </li>
</ul>
Le sélecteur d’adjacents : E + F Ce sélecteur permet de spécifier les éléments sélectionnés par F qui se trouvent à côté (gauche ou droite) des éléments sélectionnés par E (c’est‐à‐
dire dans une relation de frères). Si on utilise l’exemple suivant : <h2> Un en-tête </h2>
<p>
Un texte de paragraphe
</p>
<div>
Un texte de div
</div>
<div>
Un texte de div - <em> partie 1 </em> Un texte de div <b> partie 2 </b>
</div>
Avec la spécification ci‐dessous, le style s’applique au premier <div> qui se trouve à côté de <p> p + div {
color : red ;
font-family : Arial ;
}
Alors que si on utilise la spécification ci‐dessous on applique le style au texte « partie 2 ». em + b {
color : red ;
font-family : Arial ;
}
133