Nous venons de voir les premières balises permettant de construire des pages web. Par défaut, les balises conteneur de type block se déploient sur toute la largeur de la page et prennent la hauteur de leur contenu. Le premier bloc se situe en haut de la page et les blocs suivants "s'empilent" dessous.
Leur contenu s'affiche par défaut ligne par ligne, du haut du bloc à gauche au bas du bloc à droite. Dans le cas de texte, sa taille par défaut est celle que vous utilisez dans votre navigateur et sa couleur est noire. Aussi, pour permettre une mise en page des blocs et de leur contenu, les concepteurs du langage ont dans un premier temps mis à disposition un certain nombre d'attributs que l'on insérait dans la balise d'ouverture du bloc de la façon suivante:
- pour donner à celui-ci une largeur de 600pixels: <div width="600px">
- pour lui donner une hauteur de 400 pixels: <div height="400px>
- pour centrer un bloc moins large que la page: <div align="center">
- pour center le texte à l'intérieur d'un paragraphe: <p text-align="center">
- pour donner au texte la couleur bleue: <div font-color="blue">
- pour donner au texte du paragraphe une taille de 20 pixels: <p font-size="20px">
et ainsi de suite de très nombreuses propriétés spécifiques applicables aux balises HTML.
Le gros problème de cette procédure était qu'il fallait renseigner chaque balise avec les attributs désirés, ce qui était fastidieux, d'une part lors de la saisie, d'autre part pour rechercher dans le code une erreur de frappe éventuelle ou tout simplement pour effectuer une modification !
Cascading Style Sheets (Feuilles de styles en cascades) ou CSS, une idée géniale !: définir à l'avance des styles à appliquer aux balises de 3 façons différentes:
- dans un (ou plusieurs) fichier(s) dédié(s) créé(s) sur le site, portant l'extension ".css" et lié(s) à la page grâce à la balise
d'en-tête<link> que nous avons vue précédemment, - dans l'en-tête de la page grâce à la balise <style> </style>,
- directement dans les balises HTML grâce à l'attribut style=" " .
Mais, direz-vous, pourquoi "en cascade" ?
1. Pour comprendre cette appellation, nous allons prendre un exemple. Nous allons d'abord créer une feuille de styles extérieure à la page que nous appellerons tout bêtement "mes_styles.css". Pour cela, nous ouvrons PSPad et nous cliquons Fichier → Nouveau → Cascading Style Sheet → OK. Dans la page qui s'est ouverte, nous cliquons Fichier → Enregistrer sous et nous saisissons "mes_styles.css" à la place de "Nouveau.css" → Enregistrer.
Puis nous définissons un style pour la balise <p> comme suit:
Cliquez sur l'image pour l'agrandir
puis vous cliquez sur Fichier → Enregistrer.
Ce qui, sur notre page "index.html", en codifiant:
Cliquez sur l'image pour l'agrandir
donnera:
Cliquez sur l'image pour l'agrandir
2. Nous décidons maintenant de créer une nouvelle page que nous nommerons "test.html" (Dans PSPad, cliquez Fichier → Nouveau → HTML → Effacez la première ligne pour ne conserver que <!DOCTYPE html> → cliquez Fichier → Enregistrer sous → remplacez "Nouveau.html" par "test.html" → Enregistrer).
Remplissez le reste de cette page comme suit, puis cliquez sur Fichier → Enregistrer:
Cliquez sur l'image pour l'agrandir
Ce qui donne:
Cliquez sur l'image pour l'agrandir
Vous constatez donc que le texte a conservé sa taille et le retrait définis dans la feuille de styles externe, mais qu'il a perdu sa couleur bleue au profit de la couleur rouge définie dans l'en-tête de la page.
3. Nous voulons maintenant que le texte du paragraphe suivant soit de couleur violette et que le retrait de la 1° ligne soit de 150 pixels, rajoutez ceci:
Cliquez sur l'image pour l'agrandir
Ce qui donne:
Cliquez sur l'image pour l'agrandir
Vous constatez que les définitions au sein de la balise <p> sont appliquées au détriment des définitions précédentes. Par contre, la taille du texte définie une seule fois dans la feuille de styles extérieure reste bien la même.
Pour résumer, nous avons appris que:
L'ordre de priorité du style appliqué à une balise est, du dernier au premier: Feuille de styles extérieure / Style déclaré dans l'en-tête de la page / Style déclaré dans la balise même.
En d'autres termes, les éléments définis pour une balise X dans une feuille de styles extérieure s'appliquent à toutes les balises X de toutes les pages du site liées à la feuille de styles extérieure.
Toutefois, si certains éléments sont redéfinis dans l'en-tête d'une page, ils s'appliqueront en priorité dans toutes les balises X de cette page.
Si certains éléments sont redéfinis dans une balise X, ils s'appliqueront en priorité dans cette seule balise X.
Aucun commentaire :
Enregistrer un commentaire