Faire son site et le publier

Kompozer et CSS

Feuille de style interne : Exercice 1

Outil Cascades dans Kompozer

Dans Kompozer l'éditeur de styles est l'outil CaScadeS, représentant une palette.

Manipulation préalable pour l'exercice

<html>
<head>
<title>Document sans titre</title>
</head>
<body>
<h1>Ceci est le titre principal</h1>
<h2>Titre secondaire no 1</h2>
<p>Ceci est le texte du premier paragraphe</p>
<h2>Titre secondaire no 2</h2>
<p>Ceci est le texte du second paragraphe</p>
<cite>
Nous naissons tous fous.
Quelques-uns le demeurent. (Samuel Beckett, 1906-1989)
</cite>
</body>
</html>

Interface de Cascades

Dans la barre d'outils de Kompozer, cliquer sur l'outil Cascades Éditeur CSS..., une fenêtre s'ouvre Feuilles de style CSS.

Cascades dans Kompozer : Première fenêtre

Pour donner un aspect particulier à un élément de la page nous pouvons procéder de 2 façons différentes :

Créer des règles de style par la méthode intuitive

 barre d'état    Styles internes   Bouton Extraire et créer un style générique

Créer des règles de style par la méthode classique Nouvelle règle de style : style appliqué aux éléments de même type

fenêtre de création des règles de style dans Cascades

A la fin de ces manipulations nous aurons créé une feuille de style interne à ce document. Cliquer ici pour voir  la page.

Le code généré est inclus dans head de la page, entre une balise ouvrante <style type="text/css"> et une balise fermante </style>.
Nous pouvons visionner ce code de plusieurs façons :

résultat obtenu avec la création d'une feuille de style interne

Nous voyons que l'ensemble de ces règles est inclus dans une zone de head limitée par les 2 balises <style>.
Dans la balise ouvrante se trouve l'attribut type="text/css"  qui indique au navigateur qu'il va avoir à interpréter une feuille de style.

Code source d'une feuille de style interne dans Kompozer

Structure des règles de style

Les règles de style se présentent toujours sous cette forme : 

Sélecteur | Accolade ouvrante | Propriété | : (2 points) | Valeur | Accolade fermante

Sélecteur Propriété Valeur
h1 { color : blue }

Elles sont composées de 3 éléments :

  1. Le sélecteur qui 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.

Les principales propriétés simples envisagées dans les règles de style sont :

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

On peut mettre plusieurs styles pour le même sélecteur. On indique alors les instructions l'une après l'autre, séparées par des  " ; "  (des point virgules). Les différentes instructructions peuvent s'écrire ou bien sur la même ligne ou bien chaque instruction sur une nouvelle ligne. (les 2 sont valides)
Exemple:

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

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>
On peut modifier manuellement les styles dans :
 Jos Argaud - Mise à jour 22/11/2009  Pour m'écrire  Document made with KompoZer  D'après le cours d'Yves Mairesse et avec son consentement