Appliquer les sélecteurs CSS de base dans le développement web

Introduction

Dans ce laboratoire, les étudiants exploreront les sélecteurs CSS fondamentaux utilisés dans le développement web, en se concentrant sur les techniques pratiques de mise en forme des éléments de page web. Le laboratoire propose une approche pratique pour comprendre comment fonctionnent différents sélecteurs CSS, en commençant par les sélecteurs de balises de base et en progressant progressivement vers des méthodes de sélection plus spécifiques telles que les sélecteurs de classe et d'ID.

Les participants apprendront à créer un fichier HTML, à appliquer des sélecteurs de balises pour styliser uniformément les éléments, à implémenter des sélecteurs de classe pour une mise en forme ciblée et à utiliser des sélecteurs d'ID pour modifier individuellement des éléments de manière unique. Le laboratoire couvre également des concepts importants tels que les priorités des sélecteurs CSS et l'utilisation de la règle!important, permettant aux étudiants de développer une compréhension globale de la manière d'assurer un contrôle efficace et de personnaliser la conception des pages web grâce aux techniques de mise en forme CSS.

Créer un fichier HTML et appliquer un sélecteur de balise

Dans cette étape, vous allez apprendre à créer un fichier HTML et à appliquer des sélecteurs de balises de base en CSS. Les sélecteurs de balises sont un moyen fondamental de styliser les éléments HTML en ciblant leurs noms de balises.

Tout d'abord, créons un fichier HTML dans le répertoire du projet. Ouvrez l'IDE Web et accédez au répertoire ~/projet. Créez un nouveau fichier appelé index.html :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Exemple de sélecteur de balise CSS</title>
    <style>
      /* Nous y ajouterons le CSS ici */
    </style>
  </head>
  <body>
    <h1>Bienvenue dans les sélecteurs CSS</h1>
    <p>Ceci est un paragraphe sur les sélecteurs de balises CSS.</p>
    <div>Ceci est un élément div.</div>
  </body>
</html>

Maintenant, appliquons un sélecteur de balise pour styliser nos éléments HTML. Ajoutez le CSS suivant à l'intérieur de la balise <style> :

/* Sélecteur de balise pour h1 */
h1 {
  color: blue;
  text-align: center;
}

/* Sélecteur de balise pour p */
p {
  font-size: 16px;
  color: green;
}

/* Sélecteur de balise pour div */
div {
  background-color: lightgray;
  padding: 10px;
}

Lorsque vous enregistrez et ouvrez ce fichier dans un navigateur, vous verrez :

L'élément <h1> sera bleu et centré
L'élément <p> sera vert avec une taille de police de 16px
L'élément <div> aura un fond gris clair avec un rembourrage

Sortie exemple dans le navigateur :

Titre "Bienvenue dans les sélecteurs CSS" bleu et centré
Texte du paragraphe vert
Div gris clair avec rembourrage

Implémenter un sélecteur de classe pour styliser des éléments

Dans cette étape, vous allez apprendre à utiliser des sélecteurs de classe en CSS pour styliser plusieurs éléments avec un attribut de classe partagé. Les sélecteurs de classe offrent plus de flexibilité par rapport aux sélecteurs de balises en vous permettant d'appliquer des styles à des groupes spécifiques d'éléments.

Ouvrez le fichier index.html de l'étape précédente dans l'IDE Web. Modifiez le HTML pour inclure des attributs de classe :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Exemple de sélecteur de classe CSS</title>
    <style>
      /* Nous y ajouterons des sélecteurs de classe ici */
    </style>
  </head>
  <body>
    <h1 class="main-title">Bienvenue dans les sélecteurs de classe CSS</h1>
    <p class="highlight">Ceci est un paragraphe mis en évidence.</p>
    <p>Ceci est un paragraphe normal.</p>
    <div class="highlight">Ceci est un div mis en évidence.</div>
  </body>
</html>

Maintenant, ajoutez des sélecteurs de classe à votre CSS pour styliser les éléments avec des classes spécifiques :

/* Sélecteur de classe pour.highlight */
.highlight {
  background-color: yellow;
  color: black;
  font-weight: bold;
  padding: 5px;
}

/* Sélecteur de classe pour.main-title */
.main-title {
  color: blue;
  text-align: center;
  font-size: 24px;
}

Lorsque vous enregistrez et ouvrez ce fichier dans un navigateur, vous verrez :

Les éléments avec la classe highlight auront un fond jaune
Le titre principal sera bleu et centré
Seuls les éléments avec la classe highlight auront un style spécial

Sortie exemple dans le navigateur :

Titre principal bleu et centré
Paragraphe et div mis en évidence en jaune
Paragraphe normal reste sans style

Utiliser un sélecteur d'ID pour cibler des éléments uniques

Dans cette étape, vous allez découvrir les sélecteurs d'ID, qui sont utilisés pour styliser un élément unique sur une page web. Contrairement aux sélecteurs de classe qui peuvent être appliqués à plusieurs éléments, un sélecteur d'ID cible un élément spécifique et individuel.

Ouvrez le fichier index.html de l'étape précédente dans l'IDE Web. Modifiez le HTML pour inclure un attribut d'ID :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Exemple de sélecteur d'ID CSS</title>
    <style>
      /* Nous y ajouterons des sélecteurs d'ID ici */
    </style>
  </head>
  <body>
    <h1 class="main-title">Bienvenue dans les sélecteurs d'ID CSS</h1>
    <p class="highlight">Ceci est un paragraphe mis en évidence.</p>
    <p id="special-paragraph">Ceci est un paragraphe unique avec un ID.</p>
    <div class="highlight" id="main-content">
      Ceci est un div mis en évidence avec un ID.
    </div>
  </body>
</html>

Maintenant, ajoutez des sélecteurs d'ID à votre CSS pour styliser des éléments spécifiques :

/* Sélecteur d'ID pour #special-paragraph */
#special-paragraph {
  color: purple;
  font-style: italic;
  border-bottom: 2px solid green;
}

/* Sélecteur d'ID pour #main-content */
#main-content {
  background-color: lightblue;
  padding: 10px;
  font-weight: bold;
}

Lorsque vous enregistrez et ouvrez ce fichier dans un navigateur, vous verrez :

Le paragraphe avec l'ID special-paragraph sera violet, en italique, avec une bordure verte en bas
Le div avec l'ID main-content aura un fond bleu clair et du texte en gras

Sortie exemple dans le navigateur :

Style unique pour le paragraphe avec un ID
Style distinct pour le div avec un ID
Les autres éléments conservent leur style précédent

Comprendre les priorités des sélecteurs CSS

Dans cette étape, vous allez apprendre à connaître la spécificité des sélecteurs CSS et la manière dont différents types de sélecteurs sont priorisés lors de la mise en forme d'éléments. Comprendre les priorités des sélecteurs vous aide à contrôler quels styles sont appliqués lorsque plusieurs sélecteurs ciblent le même élément.

Ouvrez le fichier index.html de l'étape précédente dans l'IDE Web. Mettez à jour le HTML et le CSS pour démontrer les priorités des sélecteurs :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Les priorités des sélecteurs CSS</title>
    <style>
      /* Nous démontrerons les priorités des sélecteurs ici */
    </style>
  </head>
  <body>
    <div id="priority-demo" class="highlight">
      <p>Comprendre les priorités des sélecteurs CSS</p>
    </div>
  </body>
</html>

Maintenant, ajoutez du CSS pour montrer comment différents sélecteurs sont priorisés :

/* Sélecteur de balise (priorité la plus basse) */
p {
  color: green;
  font-size: 16px;
}

/* Sélecteur de classe (priorité moyenne) */
.highlight {
  color: blue;
  border: 2px solid gray;
}

/* Sélecteur d'ID (priorité la plus élevée) */
#priority-demo {
  color: red;
  font-weight: bold;
}

/* Les styles en ligne auraient la priorité la plus élevée (non montré dans cet exemple) */

Hiérarchie des priorités des sélecteurs (du plus bas au plus haut) :

Sélecteurs de balise
Sélecteurs de classe
Sélecteurs d'ID
Styles en ligne (non démontré dans cet exemple)

Lorsque vous enregistrez et ouvrez ce fichier dans un navigateur, vous verrez :

Le texte du paragraphe sera rouge (du sélecteur d'ID)
Le div aura une bordure grise (du sélecteur de classe)
La police sera en gras (du sélecteur d'ID)

Sortie exemple dans le navigateur :

Texte rouge et en gras pour le paragraphe
Bordure grise autour du div
Montre comment les sélecteurs plus spécifiques remplacent ceux moins spécifiques

Explorer la règle!important en CSS

Dans cette étape, vous allez apprendre à connaître la règle !important en CSS, qui est un moyen puissant d'ignorer toutes les autres règles de mise en forme. Bien qu'elle devrait être utilisée avec parcimonie, elle peut être utile dans des situations spécifiques.

Ouvrez le fichier index.html de l'étape précédente dans l'IDE Web. Mettez à jour le HTML pour démontrer la règle !important :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Règle CSS!important</title>
    <style>
      /* Nous démontrerons la règle!important ici */
    </style>
  </head>
  <body>
    <div id="important-demo" class="highlight">
      <p>Comprendre la règle CSS!important</p>
    </div>
  </body>
</html>

Maintenant, ajoutez du CSS pour montrer comment la règle !important ignore les autres sélecteurs :

/* Sélecteur de balise normal */
p {
  color: green;
  font-size: 16px;
}

/* Sélecteur de classe */
.highlight {
  color: blue;
  border: 2px solid gray;
}

/* Sélecteur d'ID */
#important-demo {
  color: red;
}

/* Règle!important (priorité la plus élevée) */
p {
  color: purple !important;
  font-weight: bold !important;
}

Points clés sur la règle !important :

Elle ignore toutes les autres priorités de sélecteur
Utilisez-la avec beaucoup de parcimonie et seulement si c'est absolument nécessaire
Peut rendre le CSS plus difficile à maintenir si elle est surutilisée

Lorsque vous enregistrez et ouvrez ce fichier dans un navigateur, vous verrez :

Le texte du paragraphe sera violet et en gras
La règle !important prend le dessus sur les autres sélecteurs

Sortie exemple dans le navigateur :

Texte violet et en gras pour le paragraphe
Montre comment !important ignore les autres règles de mise en forme

Sommaire

Dans ce laboratoire, les participants ont exploré les techniques fondamentales de sélecteurs CSS pour le développement web, en commençant par les sélecteurs de balises de base pour styliser des éléments HTML tels que les titres, les paragraphes et les conteneurs div. En appliquant des propriétés de couleur, d'alignement, de taille de police et d'arrière-plan, les apprenants ont acquis une expérience pratique dans la ciblage d'éléments HTML spécifiques en utilisant leurs noms de balises.

Le laboratoire a progressivement présenté des méthodes de sélecteurs plus avancées, démontrant comment les sélecteurs de classe peuvent offrir une plus grande flexibilité de mise en forme en permettant une mise en forme ciblée sur plusieurs éléments. Par des exercices pratiques, les participants ont appris à créer et à appliquer dynamiquement des styles CSS, en comprenant les principes fondamentaux de la hiérarchie des sélecteurs et l'importance d'un ciblage précis d'éléments dans la conception web.