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-simples-en-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é s’il est active ou à le focus



      • Soit le texte suivant ( à coller sous l’ancien texte:

        • <div id= »layout »>
        <h1>les technologies du web</h1>
        <h2 class= »gauche »>Introduction (Texete aligné à gauche)</h2>
        <h2 class= »droite »>Avantages (Texete aligné à droite)</h2>
        <h3 class= »justifie »>Utilisation dans le monde professionnel (Texete aligné à justifié)</h3>
        <p>Les technologies du web jouent un rôle crucial dans le développement et la conception de sites internet modernes.</p>
        <ul>
        <li>HTML – HyperText Markup Language</li>
        <li>CSS – Cascading Style Sheets</li>
        <li>JavaScript</li>
        </ul>
        <p>Chaque technologie a son importance et son utilisation spécifique dans la création d’une expérience utilisateur exceptionnelle.</p>
        <a href= »https://example.com »>Lien vers Example.com</a>
        <button>Bouton d’action</button>
        </div>

      • Appliquez ce qui suit :
        • 10- Un background de couleur jaune ,couleur du texte rouge darket et une bordure blanche d’épaisseur 3px ,une largeur de 500px ,un retrait de 5px , et un alignement centré pour l’élément identifié par « layout ».
        • 11- Aligner le texte à gauche pour la classe « gauche » , à droite pour la classe « droite » et justifié pour la classe justifié. Avec un padding de 4px
        • 12- Colorer le texte en bleu pour les éléments h2 et bouton, et les éléments de p en blanc. Pour l’élément « layout »
        • 13- Changer la taille du titre à « 1.5em » en affichant la première lettre de chaque mot en capitale.
        • 14- Affecter une couleur jaune au background du bouton, et une largeur de 100px.
        • 15- Comment ajouter une ombre de texte de couleur grise avec une déviation horizontale de 2 pixels, une déviation verticale de 2 pixels et un flou de 5 pixels pour tous les éléments de paragraphe (<p>) sur la page?
        • 16- Appliquez une marge extérieure de 10 pixels autour de tous les éléments de liste non ordonnée (<ul>) et une bordure de 1 pixel solide avec une couleur de votre choix.
        • 17- Comment définir une couleur de fond transparente pour tous les liens non visités (<a>) et une couleur de fond jaune au survol de la souris?
        • 18- Pour la classe « justifie », ajoutez une bordure en pointillés de 1 pixel avec une couleur de votre choix et une ombre de boîte avec une déviation horizontale de 3 pixels, une déviation verticale de 3 pixels, un flou de 5 pixels et une couleur de gris.
        • 19- Donnez à tous les éléments de paragraphe (<p>) une hauteur de ligne de 1.5 et un espacement de ligne de 1.2.
        • 20- Comment centrer le texte à l’intérieur de tous les boutons de la page, avec un espacement de 8 pixels entre le texte et le bord du bouton?
    2. 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

You may also like

Protégé : Correction applications les opérateurs en JavaScript
5 octobre, 2023

Il n’y a pas d’extrait, car cette publication est protégée.

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 …

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 , …