Les feuilles de style avec KompoZer

Définition d'un style

Styles imposés par défautLes balises HTML dans le document servent à indiquer la structure du document : 

  • en-tête (<head>),
  • corps du document (<body>),
  • titre de première importance (<h1>), 
  • titre de second niveau (<h2>), 
  • paragraphe (<p>), 
  • citation (<cite>),
  • ...
Il est donc logique que certaines structures apparaissent en lettres de plus grande taille (les titres de niveau 1) et d'autres en plus petite taille (les paragraphes). Il s'agit d'une présentation " par défaut " des différentes structures de la page web.

C'est sympa, qu'un document HTML contienne des présentations par défaut. Mais moi je les trouve vraiment très laides. Cela ne correspond pas du tout au look du site web que j'envisage !

Dans ce cas, il suffit de préciser comment on veut voir les choses. C'est exactement le rôle des styles que nous allons aborder maintenant.

Les mises en forme du texte se feront avec l'éditeur de styles de KompoZer. Nous allons y indiquer comment il faut présenter chacun des éléments visibles qui constituent la page.

  • Dans la barre d'outils de KompoZer, clique sur le bouton KaZcadeS qui active l'éditeur de styles.
  • Tu peux aussi frapper la touche F11 pour ouvrir cet outil.
  • Clique sur le petit bouton palette situé en haut et à gauche pour permettre la création d'une nouvelle règle de style.

La fenêtre principale de l'éditeur de styles se présente alors comme sur l'illustration ci-dessous.

Fenêtre de l'éditeur CSS

La zone Feuilles et règles à gauche est vide; les onglets de la partie droite de la fenêtre sont inactifs.

Et bien dites donc, voilà une bien grande fenêtre dans laquelle on ne peut rien faire ni rien voir? Quel gâchis!

Non, pas de souci: les principales fonctions dont nous avons besoin pour démarrer sont disponibles.

Quand l'éditeur de styles est ouvert, passe à la page suivante. Vers la page suivante Page suivante


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