TP3: Les Feuilles de Style en Cascade

Exercice : Mise en forme par CSS

Dans cet exercice, il vous est demandé de mettre en forme des pages html en utilisant des feuilles de style.

  1. Reprenez la page résultante du TP1
  2. Utilisez une feuille de style en en-tête de la page pour gérer le fait que:
    1. les titres soient soulignés
    2. les mots "kitsune" soient en italique souligné grâce à des balises div et un nom de classe
    3. les mots japonais soient en arial et en rouge grâce à des balises div et un nom de classe
    4. la date soit alignée à droite grâce à une balise div et un identifiant
    5. le texte soit justifié dans tous les paragraphes avec une indentation de départ de 15 pixels
    6. Remplacez les puces de la liste non numérotée par cette image:
    7. Supprimez le fait que les liens apparaissent en souligné et réactivez le au passage de la souris dessus
  3. Utilisez une feuille de style externe à la page pour gérer le fait que:
    1. les titres soient en gras, en italique et en vert
    2. les mots "kitsune" soient en gras et en bleu grâce à des balises div et un nom de classe
    3. les mots japonais soient en italique souligné grâce à des balises div et un nom de classe
    4. la date soit alignée à droite grâce à une balise div et un identifiant
    5. le texte soit justifié dans tous les paragraphes avec une indentation de départ de 2cm
    6. Remplacez les puces de la liste non numérotée par cette image:
    7. Supprimez le fait que les liens apparaissent en souligné et réactivez le au passage de la souris dessus
  4. Reprenez la page résultante du TD2
    1. Ajoutez un élément "Légende Kitsune" dans le menu1 affichant dans le cadre main la page créée en 2.
      1. Désactivez la décoration des liens du menu1, et remplacez la par un changement de couleur du fond de la case du tableau lors de son survol par la souris
    2. Ajoutez le bouton dans le menu2 affichant dans le cadre main la page créée en 3.
    3. Trouvez un moyen pour changer automatiquement le style de tous les cadres de la page en ajoutant un nouvel élément dans le cadre foot.