Internet
Site Web: fonctionnement, structure et programmation
Il existe trois moyens d'appliquer un style à un document:
<p style="background-color: red">Ceci est un paragraphe.</p>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Ma page Web</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
p{background-color : red;}
</style>
</head>
<body>
(...)
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<title>Ma page Web</title>
<link rel="stylesheet" type="text/css" href="../styles/site.css">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
(...)
</body>
</html>
site.css via l'élément <link>, placé dans l'en-tête du document. L'URL de la feuille de style est alors spécifiée par la valeur de l'attribut href.L'acronyme CSS signifie Cascading Style Sheet ou Feuille de style en cascade en français. Le mot «cascade» fait référence à la méthode de résolution des conflits: comme il est possible de placer plusieurs feuilles de style dans un même document, les instructions de style successives peuvent s'opposer. Les ordres de style arrivent donc «en cascade» selon la hiérarchie suivante:
Quelque soit le mode d'insertion choisi, une feuille de style CSS est une suite de règles. Chaque règle consiste en un sélecteur, une propriété pour ce sélecteur et une valeur pour le style à appliquer à cette propriété comme l'illustre l'exemple suivant:
Comme nous le verrons par la suite, vous êtes libres d'ajouter autant de propriétés et de valeurs que vous souhaitez dans chaque règle de CSS. Néanmoins, cette section n'a pour but que d'aborder les propriétés les plus répandues. Pour connaître tous les détails du langage CSS, n'hésitez pas à consulter des ouvrages ou des sites de référence comme le site du W3C.
Afin d'explorer au mieux les possibilités offertes par le CSS, nous allons revisiter quelques-unes de nos anciennes pages et leur donner un peu de style. Commençons avec le Bar Tête la Première dont nous vous proposons de télécharger le code XHTML Strict. Suivez ensuite chacune des instructions décrites ci-dessous en testant à chaque fois votre résultat dans le navigateur pour voir s'opérer les changements désirés.
L'élément <style> placé dans l'en-tête du XHTML permet d'ajouter du style au Bar. Changeons par exemple la couleur du texte des paragraphes à l'aide de la propriété color:
Déclaration d'une règle de style pour les éléments <p>
Résultat engendré par la définition du style
Pour mettre en valeur les titres du Bar, il convient de modifier leur police de caractères et leur couleur:
Le sélecteur reprend le nom de l'élément auquel la propriété s'applique
Il est possible de grouper les éléments ayant les mêmes propriétés
Pour mettre en valeur le titre de bienvenue, nous pourrions le souligner à l'aide de la propriété border-bottom. Néanmoins, en affectant cette propriété à la règle qui combine les éléments <h1> et <h2>, les deux titres seront soulignés. Pour limiter cette bordure uniquement à l'élément <h1>, il suffit d'ajouter une nouvelle règle qui ne concerne que cet élément:
Chaque style spécifique fait l'objet d'une règle à part
La nouvelle règle souligne uniquement le titre <h1> en noir
En réumé, les sélecteurs servent à indiquer quels éléments seront concernés par la règle de style:
Il est possible d'appliquer un style à un seul type d'éléments
Il est possible d'appliquer un style à plusieurs type d'éléments en parallèle
Savoir utiliser les sélecteurs est la première étape pour maîtriser les CSS. Pour sélectionner les éléments à styler, il est impératif de pouvoir bien se représenter mentalement les relations qu'il existe entre les différents éléments du XHTML à l'aide du diagramme des éléments:
Comme nous le verrons, cette représentation mentale est indispensable pour comprendre les règles d'héritage de styles.
La page bar.html commence à avoir du style. Il serait bien de pouvoir appliquer le même style aux pages cocktails.html et itineraire.html afin d'avoir une certaine ligne graphique pour le site entier. En copiant l'élément <style> avec l'ensemble des règles dans chaque fichier, il faudra systématiquement modifier chacun des fichiers en cas de changement de style. Il existe une meilleure façon de faire: enregistrer l'ensemble des règles CSS du site dans un fichier externe bar.css que nous vous invitons à créer.
La feuille de style est placée dans un fichier externe
La feuille de style contient les règles de style de toutes les pages du site
Il suffit ensuite d'informer le navigateur qu'il doit styler chaque page conformément à la feuille externe. Ceci est possible grâce à l'élément <link> comme le suggèrent les exemples ci-dessous:
La feuille de style externe appliquée au fichier bar.html..
... et aux fichiers cocktails.html et itineraire.html
La syntaxe de l'élément <link> est la suivante:
Gros plan sur l'élément <link>
Enregistrez tous ces fichiers puis ouvrez bar.html dans un navigateur et cliquez sur les liens «cocktails» et «itinéraire»: il suffit de changer une seule ligne dans le XHTML de ces pages pour unifier leur style !
Passez les polices de caractères de tous les paragraphes du site du Bar en «sans-serif» pour être en harmonie avec les titres. La propriété qui permet de changer la police est font-family et la valeur à attribuer aux caractères est sans-serif.
|
Avez-vous remarqué qu'en assignant la propriété font-family au sélecteur p, celle-ci a aussi affecté tous les éléments à l'intérieur de <p>, comme <a> ou <em> ? De manière générale, les éléments imbriqués dans un conteneur héritent des propriétés de ce dernier même si aucun style ne leur est pas explicitement appliqué.
Ainsi, en remontant la propriété font-family au niveau de l'élément <body>, nous pouvons modifier la police de caractères sur toutes les pages du site. Tout élément ajouté à partir de maintenant héritera donc automatiquement d'une police sans-serif.
Modification de la feuille de style bar.css
Hiérarchie des éléments concernés par le changement
Quand la propriété font-family est au niveau de l'élément <body>, le style des polices de toutes les pages est affecté. Néanmoins, si vous voulez que vos élément <em> utilisent une police serif, il vous est possible d'outrepasser l'héritage en donnant à cet élément une règle spécifique comme ci-dessous. En effet, avec les CSS, ce sont toujours les règles spécifiques qui ont la prédominance sur celles héritées.
Propriété font-family outrepassée
Résultat affiché par le navigateur
Changer de police au cours du même paragraphe n'est pas forcément une bonne idée. Modifiez donc à nouveau la CSS pour retrouver son état initial (sans la règle em) une fois que vous l'aurez testé.
En étudiant la structure hiérarchique d'un fichier XHTML virtuel et de sa feuille de style associée, coloriez en vert tous les éléments qui héritent de la couleur de l'élément <body>.
|
Une règle avec un sélecteur p applique le même style à tous les éléments <p>. Il est néanmoins possible d'ajouter un style particulier différent à chaque paragraphe en lui ajoutant un attribut class. Ceci permettra, par exemple, de styler chaque paragraphe du fichier cocktail.html à l'aide d'une couleur différente de telle sorte que la couleur du texte corresponde à la couleur de la boisson. Ainsi, pour faire passer en vert le paragraphe «Thé vert du Pôle» du fichier cocktails.html, il suffit d'ajouter l'élément <p> à une classe nommée thevert dont nous définissons le style dans la feuille bar.css:
Associer le paragraphe du fichier cocktails.html à la bonne classe
Définir le sélecteur de classe dans le fichier bar.css
En réactualisant la page cocktails.html, vous pourrez observer que la nouvelle classe «thevert» s'applique uniquement au paragraphe «Thé vert du Pôle.
Ajoutez deux classes «framboise» et «myrtille« dans les bons paragraphes du fichier cocktails.html puis écrivez le style qui donnera respectivement la couleur bleue («blue») et violette («purple») au texte.
Vous venez d'écrire une règle qui se sert de la classe thevert pour mettre en vert tous les paragraphes appartenant à cette classe. Pour styler d'autres éléments de la classe thevert, la règle s'écrit tout simplement avec un point devant le sélecteur. Cette règle aura pour effet d'afficher tous les éléments de la classe thevert en vert quelque soit leur type:
Définition de la règle de classe thevert
Application de la classe thevert à un élément <blockquote>
Notons finalement qu'il existe un outil de validation CSS fonctionnant de manière analogue à celui utilisé précédemment pour le (X)HTML. Cet outil, également développé par le Consortium W3C, peut être atteint à l'adresse http://jigsaw.w3.org/css-validator/.
