Aller au contenu

Exercice 04 - Les sélecteurs CSS

Mise en place de l'exercice

  • Dans votre dossier designweb créez un dossier nommé ex04_css
  • Téléchargez le fichier ex04_index.zip et décompressez le dans ce répertoire.
  • Créez ensuite un dossier nommé css et dans ce dossier un fichier du nom que vous voulez mais avec l'extension css où vous allez écrire votre code css.
  • Reliez votre fichier css au fichier index.html

Consignes

  1. Modifiez le titre de la page « Exercice sur les sélecteurs CSS »
    • La couleur du texte doit être rouge.
    • La taille de la police doit être 3 fois plus grande. (utilisez l'unité de mesure em)
    • Le texte doit être centré
  2. Pour tous les paragraphes
    • La première lettre doit être 2 fois plus grande que le reste du texte et en italique.
    • L’alignement du texte doit être « justifié ».
  3. Pour le premier paragraphe
    • La première lettre doit être de couleur mauve.
  4. Pour les 4 paragraphes suivant de la section article
    • La première lettre doit être de couleur verte
  5. Quand on survole le titre « Consignes »
    • La couleur du texte doit changer pour celle de votre choix

Bonus

Stylisez un lien

Sélectionnez un mot dans un des paragraphes et transformez le en lien hypertexte, à vous de choisir vers quelle page pointe le lien. Modifiez le style du lien selon les points suivants :

  1. Le texte doit être de la même couleur que le texte du paragraphe (par défaut la couleur est bleu). Si on change la couleur du texte du paragraphe, le lien aura lui aussi la même couleur.
  2. Changez la barre de soulignement pour une barre ondulée et de couleur rouge.

  3. Quand on survole le lien, la barre de soulignement doit disparaitre complêtement et le fond du texte doit être jaune, comme s'il était surligné.

    ex04_01 ex04_02

Mise en forme du bloc des consignes

Transformez le bloc où sont inscrit les consignes de la façon suivante :

  1. Ajoutez une bordure de 2 pixels de couleur #daa520.
  2. Les coins de la bordure sont arrondis.
  3. Le bloc doit avoir une largeur de 600 pixels.
  4. Ajoutez aussi un espacement interne de 10 pixels sur les 4 côtés.
  5. Il y a une image de fond, utilisez celle-ci : ex04_image_fond.jpg.
  6. L'image doit être étiré pour quelle occupe toute la largeur du bloc.
  7. Pour la touche finale ajoutez une ombre autour du bloc.

Le résultat devrait ressembler à ceci

ex04_03