Premiers pas en CSS

Exercices

I. Attribut style, feuilles de style interne et externe

Ecrire une page Web simple, comportant un paragraphe (récupéré par exemple du Lorem Ipsum).

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.

II. Utilisation des classes et identifiants

Télécharger le fichier-source des exercices.

1. Utilisation de classes

Appliquer les classes suivantes aux colonnes du tableau :

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.

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).

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.

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.

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.

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.

VIII. Listes

Modifier le style des listes :

• Les listes non ordonnées doivent être repérées par des puces circulaires
• Les listes ordonnées imbriquées au deuxième niveau (ol ol) doivent être sous la forme a, b...

Tester le fonctionnement sur une liste dans la seconde partie

IX. Positionnement et z-index

1. Reproduire l'exemple suivant :
2. En récupérant les images a.png et b.png, reproduire l'exemple suivant :

X. Révisions : application de style

Récupérer le fichier exoCss.zip.

X.1 Déclaration d'une feuille de style externe

Pour chaque fichier, déclarer une feuille de style externe de nom bibliotheque.css.

X.2 Identifiants et classes

1. Dans les fichiers index.html et contact.html, les listes doivent être de classe "livres".
2. Pour chacun des fichiers d'auteurs (bossuet.html, moliere.html, pouchkine.html, racine.html et vercors.html), le premier span doit être de classe "dates", le second span de classe "description".
3. Pour chacun des fichiers, l'élément <div> du bas (celui qui entoure le lien) doit porter l'identifiant "basdepage".
4. Pour les fichiers bios.html, bossuet.html, contact.html, index.html, moliere.html, pouchkine.html, racine.html, vercors.html, visite.html et reservation.html, l'élément <div> du haut (celui qui entoure le titre de niveau 1) doit porter l'identifiant "bandeau".

X.3 Mise en forme générale

Ouvrir le fichier bibliotheque.css

1. Spécifier que l'image yellow_paper.gif, dans le répertoire images, doit être l'image de fond.
2. La police par défaut doit être par ordre de préférence Verdana, ou Arial, ou bien une famille de polices générique.
3. Les liens doivent être de couleur CC3300. Les liens actifs doivent être de couleur rouge ; les liens visités doivent être de couleur marron.
4. Les niveaux de titre doivent être de préférence en police Arial, ou bien proposer une famille de polices générique.
5. Les images ne doivent pas avoir de bordure.

X.4 Personnalisation des classes et identifiants

X.4.a Identifiant basdepage

Cet élément doit être centré. Il doit avoir une bordure supérieure double, de taille moyenne et de couleur marron.

X.4.b Identifiant bandeau

1. Cet élément doit être centré et de hauteur 75 pixels. Il doit avoir une bordure inférieure fine, simple et de couleur marron.
2. L'élément <h1> qu'il contient doit être de taille 35 pixels, et utiliser la famille de polices générique cursive.
3. Avant et après cet élément <h1>, insérer l'image livre_ouvert.gif, qui a une largeur de 100 pixels et une hauteur de 78 pixels.
   L'image insérée à gauche sera de classe "gauche", l'image insérée à droite sera de classe... "droite".
4. L'image de gauche doit être positionnée dans le coin supérieur gauche.
5. L'image de droite doit être positionnée dans le coin supérieur droit.

X.4.c Classes

1. L'élément span de classe dates doit être en gras ; l'élément span de classe description doit être en italique.
2. Les puces des listes de classe livres doivent être les images bookrouge.gif.
3. L'image de classe imagemap doit être positionnée à 25% à gauche de la position qu'elle aurait eue par défaut.