Les feuilles de style avec KompoZer

Des styles en cascades

Retour vers le passé: un voyage en enfer

C'est peut-être de la curiosité mal placée, mais les mises en forme, elles étaient définies comment, dans mon premier site web? Il n'y avait pas de feuille de style, que je sache.

Exact. Pas de feuille de style. Je vous engage d'ailleurs à aller faire un petit tour dans le code de ces pages. Mais soyez courageux: le spectacle est difficilement supportable.

Code d'enfer

Aaaahhh!! C'est vraiment moi qui ai produit ça?

Et encore, je vous épargne certains codes encore plus horribles.

Problème des styles internes

Des informations relatives aux mises en forme peuvent être placées dans le code HTML. C'était la première méthode utilisée dans ce cours.

Les textes sont donc mélangés aux instructions de mises en forme. Cette méthode devrait être évitée autant que possible.

Synthèse sur les styles

Il y a donc au moins trois endroits différents où il est possible de définir les caractéristiques de style des éléments d'une page web:

  1. dans le corps de la page, comme dans l'illustration ci-dessus ;
  2. dans l'entête de la page, entre des balises <style> et </style> ;
  3. dans un fichier .css lié à la page web.

Vous êtes bien gentil, mais j'ai trouvé une faille dans votre système. Si je donne des instructions différentes dans le corps de la page et dans une feuille de style. Si, dans le texte, je dis qu'une police doit mesurer 1cm et dans la feuille de style 0,5cm. Il se passe quoi, alors ?

C'est simple, l'ordinateur se met à fumer et explose dans les 10 secondes.

C'est vrai, ça ????

Bon, pas tout à fait ! Pour éviter ce genre de problèmes, certaines conventions ont été prises.

Expériences sur l'ordre de priorité des styles

Afin de vérifier ce qui se produit lorsque des directives de style sont en contradictions, nous allons tenter une petite expérience. Nous allons mettre en compétition un style interne et un style défini dans l'entête d'une page.

  • Parcours le contenu de la zone de texte ci-dessous ; elle contient le code HTML d'une page web simple. Repères-y les directives de style contradictoires.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<style type="text/css">
h1 {color: silver}
</style>
<title>test</title>
</head>
<body>
<h1 style="color: red;">Titre de niveau 1</h1>
</body>
</html>

  • Ouvre une nouvelle page web dans KompoZer.
  • Dans l'onglet Source, supprime tout le texte de cette page et remplace-le par le texte qui se trouve dans la zone ci-dessus.
  • Quelle est la couleur du titre de niveau 1 ?

Nous allons maintenant supprimer la directive de style prioritaire.

  • Dans le code HTML source, efface la directive style="color:red;" (passe par l'onglet Source ou l'onglet Mixte).
  • Quelle est maintenant la couleur du titre de niveau 1 ?

Comment pourrait-on vérifier si une feuille de style externe est prioritaire par rapport aux directives qui figurent dans le corps de la page ?
Quand tu penses avoir trouvé une méthode, propose-la au professeur puis applique-la.

Ordre de priorité des styles

Lorsqu'un document est soumis à des directives de style contradictoires, la directive de style qui s'impose est la dernière définie dans l'ordre chronologique.

Dans le fragment de code ci-dessous, la directive de style rouge arrive en dernier. Elle s'imposera sur la directive bleue.

La directive verte ne s'appliquera que si les autres sont supprimées.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>
      test
    </title>
    <link rel="stylesheet" href="mafeuille.css" type="text/css">
    <style type="text/css">
        h1 {color: silver}
    </style>
  </head>
  <body>
    <h1 style="color: red">
      Titre de niveau 1
    </h1>
  </body>
</html>

Les styles définis directement dans la page HTML doivent donc être évités tant que possible puisqu'ils peuvent surpasser les directives données dans les feuilles de style liées.

On parle d'un mécanisme " en cascade ", pour la mise en place de la présentation. C'est l'origine de l'expression " feuilles de styles en cascade ", ou " cascading style sheets " en anglais; ce qui a donné l'extension .css.

Pour s'assurer que toutes les pages d'un site web présenteront le même aspect général, il vaut mieux utiliser
des styles définis dans le code HTML
des styles définis dans l'entête de la page
des styles définis dans une feuille de style liée

Quand tous les liens vers la feuille de style externe sont réalisés, parcours l'ensemble du site dans le navigateur. Passe ensuite à la page suivante. Vers la page suivante Page suivante


Dernière modification 01/09/2016 Test dans /info ...