Page d'entraînement aux feuilles de style

Sommaire

Nous allons nous entraîner sur cette page pour apprendre à changer l'affichage de certains éléments :

  1. Un texte
  2. Un tableau
  3. Des liens
  4. Le sélecteur de classe

Un texte

Un petit texte que l'on va tenter d'aérer un peu à l'aide des feuilles de style. Il serait bon en effet que les différents paragraphes d'une page ne soient pas collés contre les différentes bordures de la fenêtre de votre navigateur et soient de plus un peu décalés par rapport aux titres. C'est ce que nous essaierons de faire à l'exercice 5.

Un tableau

Un tableau qui recense une liste de livre en mentionnant titre, auteur, éditeur et année de parution :

Auteur Titre Editeur Date
Georges Perec La vie mode d'emploi Le Livre de Poche 2002 (1978)
W ou le souvenir d'enfance Editions Denoel 1975
La Disparition 1969
Claude Simon Le palace Les Editions de Minuit 2000 (1962)
J.M.Coetzee Michael K, sa vie, son temps Point Seuil 2000 (1983)
En attendant les Barbares 1982
Russel Banks Affliction Babel, Actes Sud 2000 (1989)
Fatos Kongoli Le paumé Rivages Poche 2005 (1992)
Antonio Lobo Antunes La splendeur du Portugal Points Seuil 2000 (1998)

Des liens

Nous allons jouer ici sur l'aspect que l'on peut donner aux liens. Commençons par pointer la page du cours puis quelques pages utiles pour l'édition des pages web : celle de w3c, l'organisme de référence pour les différentes normes html et w3c school qui contient quelques tutoriaux qui pourront vous être utiles et surtout des listes de balises avec leurs attributs.

Le sélecteur de classe

Ici, nous allons apprendre à affecter un style à plusieurs balises en même temps grace à l'attribut class. Ceci est en Particulier utile lorsque l'on veut attribuer des affichages différents à une même balise. Par exemple, lorque l'exercice 8 aura été fait, ce paragraphe restera semblable au paragraphe de la partie "Un texte" alors que le paragraphe suivant sera écrit en rouge.

Ce paragraphe est encadré par les balises <p> et </p> comme le précédent mais on va y rajouter l'attribut class="special". Tant que les feuilles de styles ne seront pas éditées, il n'y aura aucune différence, après l'exercice 8, il y en aura une.

Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page
Quelques lignes pour rallonger la page

Valid CSS!