Appliquer des sélecteurs descendants en CSS

Introduction

Dans ce laboratoire, vous allez explorer le pouvoir des sélecteurs descendants CSS en créant un document HTML structuré et en appliquant un style ciblé. Le laboratoire vous guide tout au long de la création d'un fichier HTML de base, de l'ajout d'un élément div avec un paragraphe, puis de l'utilisation de CSS pour styliser spécifiquement le paragraphe à l'intérieur du div. Vous allez apprendre comment les sélecteurs descendants vous permettent d'appliquer des styles à des éléments imbriqués dans d'autres éléments, offrant un contrôle précis sur la conception de votre page web. En suivant le processus étape par étape, vous gagnez une expérience pratique dans la compréhension et la mise en œuvre des sélecteurs descendants, une technique essentielle pour créer des maquettes de page web plus sophistiquées et nuancées.

Créer un fichier HTML avec une structure de base

Dans cette étape, vous allez créer une structure de base de fichier HTML qui servira de base pour explorer les sélecteurs descendants CSS. HTML fournit la structure du contenu web, et créer un document correctement formé est la première étape du développement web.

Ouvrez l'IDE Web et accédez au répertoire ~/projet. Créez un nouveau fichier appelé index.html en cliquant droit dans l'explorateur de fichiers et en sélectionnant "Nouveau fichier" ou en utilisant le menu de création de fichiers.

Voici la structure de base HTML que vous allez créer :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Descendant Selector Example</title>
  </head>
  <body>
    <!-- Content will be added in subsequent steps -->
  </body>
</html>

Analysons les composants clés de cette structure HTML :

<!DOCTYPE html> déclare que ceci est un document HTML5
<html lang="en"> est l'élément racine avec la spécification de la langue
<head> contient les métadonnées du document
<meta charset="UTF-8"> assure un codage correct des caractères
<title> définit le titre de la page affiché dans l'onglet du navigateur
<body> est où le contenu principal de la page sera placé

Après avoir créé le fichier, enregistrez-le dans le répertoire ~/projet. Cette structure de base offre un départ propre pour ajouter du contenu et appliquer des styles CSS dans les étapes suivantes.

Ajouter un élément div avec un paragraphe

Dans cette étape, vous allez apprendre à ajouter un élément <div> et un élément <p> (paragraphe) à votre fichier HTML. Ces éléments sont fondamentaux pour structurer le contenu d'une page web et vous aideront à comprendre comment fonctionnent les sélecteurs descendants.

Ouvrez le fichier index.html que vous avez créé dans l'étape précédente à l'aide de l'IDE Web. Modifiez la section <body> pour inclure un <div> avec un paragraphe à l'intérieur :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Descendant Selector Example</title>
  </head>
  <body>
    <div>
      <p>
        Ceci est un paragraphe à l'intérieur d'un élément div. Nous allons
        utiliser cela pour démontrer les sélecteurs descendants en CSS.
      </p>
    </div>
  </body>
</html>

Analysons les nouveaux éléments :

<div> est un élément conteneur utilisé pour regrouper et structurer le contenu
<p> représente un paragraphe de texte
Le paragraphe est imbriqué à l'intérieur du div, créant une relation parent-enfant

La structure montre comment les éléments HTML peuvent être imbriqués, ce qui est crucial pour comprendre les sélecteurs descendants. Dans cet exemple, le <p> est un descendant du <div>.

Enregistrez le fichier pour vous assurer que vos modifications sont conservées. Dans les étapes suivantes, vous allez apprendre à styliser ce paragraphe à l'aide de sélecteurs descendants CSS.

Définir un sélecteur descendant en CSS

Dans cette étape, vous allez apprendre à connaître les sélecteurs descendants CSS et à les définir. Un sélecteur descendant cible les éléments qui sont imbriqués à l'intérieur d'un autre élément, vous permettant d'appliquer des styles à des éléments imbriqués spécifiques.

Créez un nouveau fichier appelé styles.css dans le répertoire ~/projet à l'aide de l'IDE Web. Ce sera votre feuille de style CSS où vous définirez le sélecteur descendant.

Voici comment créer un sélecteur descendant de base :

/* Syntaxe du sélecteur descendant : élément-parent élément-descendant */
div p {
  /* Les styles CSS seront appliqués aux paragraphes à l'intérieur des éléments div */
}

Analysons le sélecteur descendant :

div est l'élément parent
p est l'élément descendant
L'espace entre div et p indique une relation de descendant
Tout élément <p> à l'intérieur d'un <div> sera stylisé par ce sélecteur

Maintenant, reliez le fichier CSS à votre HTML. Ouvrez index.html et ajoutez un lien vers la feuille de style dans la section <head> :

<head>
  <meta charset="UTF-8" />
  <title>CSS Descendant Selector Example</title>
  <link rel="stylesheet" href="styles.css" />
</head>

Cela relie votre document HTML à la feuille de style CSS, en préparant la mise en forme dans l'étape suivante.

Styliser le paragraphe à l'aide du sélecteur descendant

Dans cette étape, vous allez appliquer des styles au paragraphe à l'intérieur du div à l'aide du sélecteur descendant que vous avez défini précédemment. Cela démontrera comment les sélecteurs descendants CSS vous permettent de cibler et de styliser des éléments imbriqués spécifiques.

Ouvrez le fichier styles.css et ajoutez les règles CSS suivantes :

div p {
  color: blue;
  font-size: 18px;
  font-weight: bold;
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
}

Analysons les propriétés CSS :

color: blue; change la couleur du texte en bleu
font-size: 18px; augmente la taille du texte
font-weight: bold; rend le texte en gras
background-color: #f0f0f0; ajoute un fond gris clair
padding: 10px; ajoute de l'espace à l'intérieur du paragraphe
border-radius: 5px; arrondit les coins du fond

Ces styles ne s'appliqueront que aux paragraphes qui sont des descendants d'éléments div. Cela signifie que les autres paragraphes en dehors des éléments div ne seront pas affectés.

Enregistrez le fichier styles.css. Lorsque vous ouvrirez le fichier index.html dans un navigateur web, vous verrez le paragraphe stylisé selon ces règles. La mise en forme démontre comment les sélecteurs descendants permettent de cibler précisément les éléments imbriqués.

Vérifier la mise en forme et comprendre le mécanisme du sélecteur

Dans cette étape finale, vous allez explorer comment fonctionnent les sélecteurs descendants en ajoutant plus d'éléments à votre HTML et en comprenant le mécanisme de ciblage du sélecteur.

Modifiez votre index.html pour inclure des éléments imbriqués supplémentaires :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Descendant Selector Example</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div>
      <p>Ce paragraphe sera stylisé par le sélecteur descendant.</p>
      <section>
        <p>Ce paragraphe imbriqué sera également stylisé!</p>
      </section>
    </div>
    <p>Ce paragraphe en dehors du div ne sera PAS stylisé.</p>
  </body>
</html>

Mettez à jour votre styles.css pour démontrer la spécificité du sélecteur :

div p {
  color: blue;
  font-size: 18px;
  font-weight: bold;
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
}

Observations clés sur les sélecteurs descendants :

Seuls les paragraphes à l'intérieur d'un <div> seront stylisés
Les éléments imbriqués (comme le paragraphe à l'intérieur de <section>) sont également stylisés
Les paragraphes en dehors du <div> restent non stylisés
Le sélecteur fonctionne à n'importe quelle profondeur d'imbrication

Cet exemple illustre comment les sélecteurs descendants offrent un contrôle précis sur la mise en forme des éléments imbriqués, vous permettant de cibler des éléments spécifiques au sein de la structure d'un document.

Récapitulatif

Dans ce laboratoire, les participants apprennent les bases de la création d'un document HTML structuré et de l'application de sélecteurs descendants CSS. Le processus commence par l'établissement d'une structure de base de fichier HTML, y compris des éléments essentiels tels que les balises DOCTYPE, html, head et body, qui servent de base au développement de contenu web. Les participants ajoutent ensuite un élément div contenant un paragraphe, préparant le terrain pour explorer la manière dont les sélecteurs descendants peuvent être utilisés pour cibler et styliser des éléments imbriqués dans la hiérarchie HTML.

Le laboratoire se concentre sur la démonstration de fonctionnement des sélecteurs descendants CSS en permettant aux développeurs d'appliquer des styles à des éléments spécifiques en fonction de leur relation dans la structure du document. En créant un document HTML simple et en ajoutant progressivement des styles CSS, les apprenants acquièrent une expérience pratique dans la compréhension de la manière dont les éléments imbriqués peuvent être précisément ciblés et stylisés à l'aide de sélecteurs CSS.