TP07 : CSS avancées

Exercice 1 — Application des sélecteurs avancés #

Récupérer cette page HTML (archive) et l'utiliser pour tester les différents sélecteurs avancés en répondant aux questions suivantes, sans changer le code HTML.

1. Pour commencer, réduire la largeur du body, par exemple à 40 em, ce qui permet d'avoir des lignes d'environ 80 caractères quelle que soit la taille de la police.
2. Mettre en valeur la première lettre de chaque paragraphe, soit en modifiant sa taille ou sa couleur, soit en en faisant une lettrine (drop cap).
3. 1. Mettre en gras la première ligne de chaque paragraphe.
   2. Modifier votre règle pour que seule la première ligne du premier paragraphe de chaque partie soit en gras.
4. Faire en sorte que l'alignement des titres soit alterné, une fois à gauche, une fois à droite. Les paragraphes doivent rester en place.
5. Le dernier paragraphe contient uniquement une formule consacrée.
   1. Le mettre en valeur comme vous le voulez (centré, italique…).
   2. Est-ce que la méthode que vous avez employée vous semble correcte (c'est-à-dire propre, robuste, sémantique…) ? Si vous aviez le droit de modifier le HTML, auriez-vous choisi la même solution ?
6. Ajouter le caractère de décoration suivant : « ✽ » au début et à la fin de chaque titre de partie. (NB : vous pouvez le copier tel quel dans le CSS, c'est un caractère comme un autre.)
7. Mettre ce caractère de décoration en vert.
8. Faire en sorte qu'au survol d'un paragraphe, la couleur du texte qu'il contient change.
9. Faire en sorte que lorsque l'on clique sur un titre (sans relâcher), un cadre de couleur apparaisse autour, et que le titre se retrouve centré dans ce cadre.
10. Faire en sorte que lorsque l'on survole un paragraphe, les éléments em qu'il contient soient mis en majuscules.
11. Faire en sorte qu'au survol d'un paragraphe, sa couleur de fond et celle du paragraphe suivant (dans la même partie) changent.
12. En n'utilisant qu'une seule règle CSS, faire en sorte que tous les titres apparaissent en petites capitales, sauf lorsqu'ils sont survolés. (j'avais oublié d'enlever cette question que vous ne pouvez pas faire avec seulement ce qu'on a vu en cours)
13. Faire en sorte qu'au survol d'un titre, les paragraphes de cette partie changent de couleurs de texte et de fond, mais pas les autres. Attention, la solution est simple, mais pas évidente à trouver ; ne pas hésiter à demander de l'aide. (Indice : ce n'est pas faisable avec une seule règle.)