Feuilles de style

I. Attribut style, feuilles de style interne et externe

Ecrire une page Web simple, comportant un paragraphe (récupéré par exemple sur le site d'informations de Yahoo).

Appliquer à ce paragraphe un formatage de texte aligné à droite, et de couleur verte, à l'aide :

  1. de l'attribut style
  2. d'une feuille de style interne
  3. d'une feuille de style externe.

Par la suite, on se contentera d'utiliser une feuille de style interne.

Retour au cours

II. Utilisation des classes et identifiants

Télécharger le fichier-source du TD.

1. Utilisation de classes

Appliquer les classes suivantes aux groupements de colonnes :

  1. classe produit aux éléments de la première colonne
  2. classe reference aux éléments de la deuxième colonne
  3. classe general aux éléments des colonnes restantes

Aligner...

  1. ... le texte à gauche pour la classe produit
  2. ... le texte au centre pour la classe reference
  3. ... le texte à droite pour la classe general

2. Utilisation d'identifiants

Identifier chacun des éléments div, ainsi que l'élément q final.

Le texte du troisième div doit être de couleur bleue, et de taille small.

Retour au cours

III. Sélecteurs contextuels

1. Sélecteur contextuel "simple"

Tous les titres de niveau 3 du premier div doivent être de couleur rouge.

2. Sélecteur contextuel et pseudo-élément

La première lettre de chaque élément paragraphe du blockquote doit être de couleur verte, et de graisse... grasse (bold).

Retour au cours

IV. Formatage de la police

Appliquer les styles suivants :

  1. L'ensemble du document doit être dans l'ordre de préférence de police Verdana, Arial, et proposer une famille de police par défaut.
  2. Les titres doivent être de police Arial ou proposer une famille de polices par défaut.
  3. La première lettre de chaque élément paragraphe du blockquote doit être de police fantasy et de taille double de la taille par défaut.
  4. Chaque cellule-titre doit être en petites majuscules.
  5. Chaque cellule de classe reference doit être en police à espacement fixe.

Retour au cours

V. Formatage du texte

Appliquer les styles suivants :

  1. Chaque élément paragraphe du blockquote doit être indenté de 1em.
  2. Le texte de chaque cellule de titre doit être souligné.
  3. Chaque initiale du texte de chaque cellule de classe produit doit être en majuscule.

Retour au cours

VI. Couleurs et fonds

Télécharger l'image de Snoopy.

Appliquer les styles suivants :

  1. Le fond de l'ensemble du document doit être blanc.
  2. Le fond du dernier élément div doit être gris clair (C0C0C0).
  3. Placer l'image de Snoopy en fond du premier div ; ne la répéter que verticalement ; la placer en bas à droite.

Retour au cours

VII. Boîtes

1. Bordures

Ajouter une bordure large de couleur verte et en saillie au paragraphe intitulé "Border". Lui ajouter un padding d'1ex.

2. Float

Faire flotter le "petit texte à droite" à... droite. Tester le comportement vis-à-vis de la propriété d'alignement du texte.

Retour au cours

VIII. Listes

Modifier le style des listes :

Tester le fonctionnement sur une liste dans la seconde partie

Retour au cours