Les feuilles de style avec KompoZer

Structure des règles de style

Structure générale

Les règles de style se présentent toujours sous une forme semblable à celle que l'on observe dans le document étudié à la page précédente. Elles sont composées de trois éléments.

sélecteur
propriété
valeur
h1 { color : blue }
  1. Dans sa forme la plus simple, le sélecteur est généralement une balise HTML comme <body>, <p>, <h1>, ...
  2. De très nombreuses propriétés peuvent être définies pour un sélecteur.
  3. Chaque propriété prend une valeur qui indique comment les objets définis par le sélecteur doivent être présentés.
Quel serait, à ton avis, l'effet de la règle body {color : green} si on l'introduisait dans ton document de travail?
Aucun effet.
Le document serait entouré d'un cadre vert.
Le fond de la page prendrait la couleur verte.
L'ensemble du texte de la page prendrait la couleur verte.

Réfléchis, puis essaie. Si le résultat ne correspondait pas à ce que tu attendais, retourne à l'explication ci-dessus ou interroge le professeur.

OK, jusque là, ce n'est pas trop dur. Mais je trouve quand même bien vague cette expression " de nombreuses propriétés " que je lis quelques lignes plus haut. C'est combien, " nombreuses " ? Et puis quelles propriétés, aussi ?

Bon, commençons par quelques exemples...

Les principales propriétés simplesNous envisagerons des choses plus complexes dans une prochaine leçon envisagées dans les règles de style sont :

  • la fonte de caractères: police, taille, épaisseur,...
  • la couleur des caractères
  • les caractéristiques du fond de page: couleur, image, ...
  • les propriétés du texte: espacement des lettres et des mots, alignement, ...
  • ...

La plupart de ces propriétés sont accessibles directement dans l'éditeur de styles.

Plusieurs styles pour le même sélecteur

Pour le même sélecteur (la même balise HTML) : on indique alors les instructions l'une après l'autre, séparées par des ";";

Exemple:

<style type="text/css">
h1 {color : blue ; font-size : 1cm}
</style>

Halte-là! Veuillez m'excuser d'être attentif, mais ce n'est pas du tout la présentation que je trouve dans la page test.html.

Vous avez parfaitement raison. Mais, en fait, la présentation est tout à fait libre. Les passages à la ligne et les espacements sont sans importance. Il suffit que la présentation soit claire pour le lecteur humain.

La présentation pourrait aussi bien être

<style type="text/css">
h1 {color : blue ;
      font-size : 1cm}
</style>

ou même

<style type="text/css">h1 {color : blue ; font-size : 1cm}</style>

Plusieurs styles pour plusieurs sélecteurs

Pour des sélecteurs différents: on indique les instructions complètes, généralement sur des lignes différentes.

Exemple:

<style type="text/css">
h1 {color : red}
h2 {color : yellow}
</style>

Et il faudra retenir tout ça par coeur? Ca ne va pas être franchement coton.

Dans un premier temps, ce n'est pas du tout nécessaire: l'éditeur de styles de KompoZer va faire le travail pour nous. Pour passer à un niveau de maîtrise supérieur, une connaissance minimale de ces règles est vraiment utile.

Dans la règle de style cite {color: green}, le sélecteur est
cite
color
green
Il n'y a pas de sélecteur
Quel élément d'une page web peut jouer le rôle de sélecteur:
Un fragment de texte quelconque
Une balise HTML
Aucun élément d'une page web ne peut jouer le rôle de sélecteur
L'en-tête du document, entre <head> et </head>

Quand tu as fini et bien compris comment traiter le problème de plusieurs règles de style, passe à la page suivante. Vers la page suivante Page suivante


Dernière modification 31/08/2016 Test dans /info ...