Back

Exercices en CSS les sélecteurs Série 04

Exercices les sélecteurs simples en CSS : Série 04

  1. Objectif

    • Etre capable d’utiliser les sélecteurs simples en css

  2. Exercice 01

    1. Énoncé
      • Créer un document de base HTML5 que vous nommer selecteurCss01.html
      • Soit le texte à utiliser pour cette page:
          • <h1>Les sélecteurs CSS</h1>
          <h2>Objectif</h2>
          <h3>Connaitre les sélecteurs en CSS</h3>
          <p>Introduction</p>
          <ul>
          <li>On appelle « sélecteur de balise » (ou « sélecteur d’éléments ») le ou les mots clés précédant l’accolade et servant à indiquer le ou les balises du document auxquelles le style entre accolades s’applique.</li>
          <li>Il y a différents types de sélecteurs dans CSS.</li>
          </ul>
          <p>L’adresse de notre cours est : <a href="https://apcpedagogie.com/les-selecteurs-css/"> Cliquez pour visiter le site web</a></p>
      • Réaliser une feuille de style pour cette page. Cette feuille de style devra :
        1. La couleur d’arrière plan de la page sera le bleu ciel
        2. Le titre "<h1>" est au centre de la page
        3. Mettre le titre de la page en très gros (48px), en gras et en blanc sur fond rouge, avec un bord de 2 pixels de couleur jaune.
        4. Les autres titres de votre page soient encadrés avec des traits interrompues de 2 pixels, et écrit en rouge foncé (darkred)
        5. Définir la famille de polices de la page sur "Times New Roman", Times, serif
        6. Définir la famille de polices des titres "<h2>" sur "verdana"
        7. Utiliser le symbole carré pour les listes <ul>, le texte des listes devra être en plus petit (small)
        8. Afficher les éléments <li> sous forme de texte "italique".
        9. La couleur de l’adresse est vert,texte souligné, adresse visité en gris, au survol de souris avec couleur rouge texte gras non souligné et enfin texte bleu souligné si il est active ou à le focus



    2. Appliquez ce qui suit :
      1. Un background de couleur bleu ciel ,une largeur de 500px ,un retrait de 5px , et un alignement centré pour l’élément identifié par “layout”.
      2. Aligner le texte à gauche pour la classe “gauche” , à droite pour la classe “droite” et justifié pour la classe justifié.
      3. Colorer le texte en bleu pour les éléments h2 et button, et les éléments de p en rouge.
      4. Changer la taille du titre à “1.5em” en affichant la première lettre de chaque mot en capitale.
      5. Affecter une couleur jaune au background du bouton, et une largeur de 100px.
    3. Solution
      • Essayez de faire l’exercice de votre côté avant de regarder la Solution !

  3. Exercice 02

    1. Énoncé
      • Créer un document de base HTML5 que vous nommer selecteurCss02.html
      • Cette page comprenant un bandeau, une zone de contenu, et un pied de page
      • Les différents blocs se présentent comme ceci:
        • Bandeau : 600 x 50 px – couleur : #00CCFF
        • Contenu : 600 x 400 px – couleur : #FFCC00
        • Pied de page : 600 x 50 px – couleur : #33FF99
      • Le code suivant est à placer entre les balises <body> et </body> de notre page :
        • <div id="bandeau">Ceci est le bandeau</div>
        • <div id="contenu">Ceci est le contenu</div>
        • <div id="piedpage">Ceci est le pied de page</div>
    2. Solution
      • Essayez de faire l’exercice de votre côté avant de regarder la Solution !

  4. Exercice 03

    1. Énoncé
      1. Téléchargez le code source de cet exercice sur ce lien et décompressez le fichier.
      2. Ouvrez le fichier les selecteurs CSS.html en même temps dans votre navigateur et éditeur de texte.
      3. Tout d’abord, recherchez les lignes suivantes dans le code source de votre éditeur de texte :
        p {
        background-color: yellow;
        }
        • Cela sélectionne tous les éléments <p> et définit leurs couleurs d’arrière-plan sur jaune.
        • La ligne “Ceci est du texte dans l’élément div”. n’est pas sélectionné car il est pas dans les balises <p>…</p>.
      4. Essayez maintenant de changer la règle de
        p {
        background-color: yellow;
        }
        à
        P {
        Background-coloR: YELLOW;
        }

        • Enregistrez le fichier dans votre éditeur de texte et actualisez votre navigateur. Remarquerez que rien ne change? C’est parce que CSS n’est pas sensible à la casse dans la plupart des cas.
        • Essayons maintenant de sélectionner différents éléments HTML et observons lesquels les éléments se terminent par un fond jaune. Pour chaque élément ci-dessous, il suffit remplacez le sélecteur de la ligne 6 du fichier HTML par le sélecteur requis.
        • Tout d’abord, sélectionnons l’élément avec class = “myClassPara“. Pour faire ça, remplacez le sélecteur p dans la règle CSS par .myClassPara.
        • Enregistrez le fichier dans l’éditeur et actualisez la page dans le navigateur. Remarquez quel paragraphe est sélectionné maintenant.
      5. Changez maintenant le sélecteur en .myclasspara. Remarquez que rien n’est sélectionné maintenant ? C’est parce que CSS est sensible à la casse lors de la sélection des classes et identifiants.
        • Ensuite, sélectionnons l’élément avec id = “myIDPara”. Essayez de le faire toi-même.
        • J’ai compris? Vous pouvez changer .myClassPara en p#myIDPara ou simplement #myIDPara. Remarquez quel paragraphe est sélectionné.
        • Essayez de changer #myIDPara en #MYIDPARA. Vous remarquez que rien n’est sélectionné ?
      7. Apprenons ensuite à sélectionner plusieurs éléments. Essayez de sélectionner les éléments h1 et h2. La façon de le faire est simplement de changer le sélecteur en h1, h2.
      8. Essayez ensuite de sélectionner l’élément div. Pour ce faire, changez simplement le sélecteur en div.
      9. Maintenant, sélectionnons l’élément p à l’intérieur de l’élément div. Pour ce faire, nous écrivez div p comme sélecteur. Remarquez quels éléments sont sélectionnés.
      10. Ensuite, essayez de sélectionner tous les éléments de lien (<a>). Que remarquez-vous ? Les liens sont maintenant surlignés en jaune, n’est-ce pas ?
        • Ensuite, nous allons affiner notre sélection en fonction des attributs HTML. Essayer en sélectionnant le lien avec href=”https://www.apcpedagogie.com”.
        • la bonne façon de le faire est d’utiliser des crochets comme suit : a[href=”https://www.apcpedagogie.com”]
        • Essayez-le. Seul le premier lien aura désormais un fond jaune.
        • Ensuite, nous utiliserons le sélecteur de pseudo-classe pour changer l’arrière-plan couleur de tous les éléments de lien lorsque nous les survolons. Essayez de changer a[href=”https://www.apcpedagogie.com”] à a:hover
        • Enregistrez le fichier et actualisez le navigateur. Vous remarquez que rien n’est sélectionné ? Maintenant passez votre souris sur l’un des hyperliens et observez ce qui se passe.
      13. Ensuite, essayons de sélectionner le deuxième élément enfant de l’élément div.Pour ce faire, placez le sélecteur sur p:nth-child(2)
      14. Maintenant, essayons de sélectionner la première lettre de tous les éléments <p>. Vous utilisez le pseudo-élément première lettre pour le faire. Changez le sélecteur pour p::first-letter
        • Ensuite, regardons ce qui se passe lorsqu’un élément a plus d’un classe. Remplacez le sélecteur par .myClassPara et ajoutez le code CSS juste avant la balise </style>.
          .mySecondClassPara {
          text-decoration: underline;
          }
        • Remarquez quel paragraphe est à la fois jaune en arrière-plan ET souligné.
        • C’est parce que ce paragraphe a deux classes : myClassPara et mySecondClassPara. Par conséquent, les deux règles s’y appliquent.
      16. Enfin, essayons d’ajouter un point d’exclamation à la fin de tous les éléments <p>. Nous utiliserons le pseudo-élément after pour le faire. Ajoutez ce qui suit :

        Code CSS juste avant la balise </style>.
        p::after{
        content: “!”;
        }

    2. Exercice 04

      1. Énoncé
        • En commençant par télécharger le document exercices04CssSerie04, ajoutez des règles CSS à la page Web pour qu’elle ressemble à la capture d’écran ci-dessous.

        • Déterminez d’abord quel sélecteur vous pouvez utiliser pour sélectionner une partie de la page, en ajoutant attributs class ou des id au HTML si nécessaire.
        • Créez ensuite la règle CSS avec ce sélecteur et la propriété de couleur (par exemple color: red). Les noms de couleur sont utiles red, blue, green, yellow, purple, orange, darkredet lightblue.
        • Notez qu’il existe souvent plusieurs façons d’obtenir le même résultat en CSS. Essayez d’utiliser un mélange des différents types de sélecteurs – id, classe, position dans le document, etc.
        • Source:https://www.teaching-materials.org/htmlcss-1day/css-selectors/exercise_descrip
      2. Solution
        • Essayez de faire l’exercice de votre côté avant de regarder la Solution !



    Exercices les sélecteurs Série 03
    QCM les sélecteurs en CSS
author avatar
Riadh HAJJI

Riadh HAJJI

Ces articles pourraient aussi vous intéresser

Les pseudo-éléments en CSS
11 décembre, 2022

Les sélecteurs simples en CSS Les sélecteurs d’attribut en CSS Les combinateurs CSS Les pseudo-classes en CSS Les pseudo-éléments en CSS Exercices en CSS les sélecteurs Série 01 (Correction) Exercices en CSS les sélecteurs Série 02 (Correction) Exercices en CSS les sélecteurs Série 03 (Correction) QCM les sélecteurs en CSS Les pseudo-éléments en CSS Objectif Connaitre les sélecteurs en CSS …

Examen 5 en HTML , CSS et Bootstrap
19 mai, 2022

Examen en HTML et CSS Examen 2 en HTML et CSS Examen 3 en HTML , CSS et JS Examen 4 en HTML , CSS et JS Examen 5 en HTML , CSS et Bootstrap Examen 5 en HTML , CSS et Bootstrap Consignes Durée : 2h00 Tous documents sont autorisés Téléphones portables (et autres périphériques connectés) interdits Le sujet …

Les combinateurs CSS
28 novembre, 2021

Les sélecteurs simples en CSS Les sélecteurs d’attribut en CSS Les combinateurs CSS Les pseudo-classes en CSS Les pseudo-éléments en CSS Exercices en CSS les sélecteurs Série 01 (Correction) Exercices en CSS les sélecteurs Série 02 (Correction) Exercices en CSS les sélecteurs Série 03 (Correction) QCM les sélecteurs en CSS Les combinateurs CSS Objectifs Connaitre les combinateurs en CSS Présentation …

Abonnez vous à notre chaîne YouTube gratuitement