Cours 2 : Sélecteurs et propriétés

Dans cette conférence, nous plongerons dans les éléments constitutifs de CSS : les sélecteurs et les propriétés. Ce sont des concepts essentiels qui vous permettent de cibler des éléments spécifiques sur votre page Web et de les styliser efficacement.

Que sont les sélecteurs CSS ?

Les sélecteurs CSS sont des modèles utilisés pour sélectionner les éléments HTML que vous souhaitez styliser. Différents types de sélecteurs vous permettent d'appliquer des styles à divers éléments en fonction de leur balise, classe, ID, attributs, etc.

Types de sélecteurs

1. Sélecteur d'élément (type) :

   • Cible tous les éléments d'un type spécifique.
   • Exemple :

    p {
      color: green;
    }
   

   Copier après la connexion

   Cela changera la couleur de tous les

   éléments au vert.

2. Sélecteur de classe :

   • Cible les éléments avec un attribut de classe spécifique.
   • Exemple :

    .highlight {
      background-color: yellow;
    }
   

   Copier après la connexion

   Dans votre HTML, tout élément avec class="highlight" aura un fond jaune.
   

    <p class="highlight">This is highlighted text.</p>
   

   Copier après la connexion

3. Sélecteur d'ID :

   • Cible un seul élément avec un attribut ID unique.
   • Exemple :

    #header {
      font-size: 24px;
    }
   

   Copier après la connexion

   Seul l'élément avec id="header" aura une taille de police de 24px.
   

    <div id="header">Welcome to My Website</div>
   

   Copier après la connexion

4. Sélecteur de groupe :

   • Applique le même style à plusieurs sélecteurs.
   • Exemple :

    h1, h2, h3 {
      color: blue;
    }
   

   Copier après la connexion

   Cette règle fera en sorte que tous les

   ,

   et

   éléments bleus.

5. Sélecteur descendant :

   • Cible les éléments qui se trouvent à l'intérieur (descendants d') d'autres éléments.
   • Exemple :

    div p {
      font-style: italic;
    }
   

   Copier après la connexion

   Cela rendra tous les

   éléments à l'intérieur d'un

   en italique.
   

    <div>
      <p>This text is italicized because it's inside a div.</p>
    </div>
   

   Copier après la connexion

Comprendre les propriétés CSS

Les propriétés CSS définissent les aspects des éléments sélectionnés que vous souhaitez styliser. Chaque propriété est suivie d'une valeur qui spécifie le résultat souhaité.

Exemples de propriétés :

• Couleur :

  • Définit la couleur du texte.
  • Exemple :

  h1 {
    color: red;
  }
  

  Copier après la connexion

• Couleur de fond :

  • Définit la couleur d'arrière-plan.
  • Exemple :

  body {
    background-color: #f0f0f0;
  }
  

  Copier après la connexion

• Taille de la police :

  • Définit la taille du texte.
  • Exemple :

  p {
    font-size: 16px;
  }
  

  Copier après la connexion

• Marge :

  • Définit l'espace à l'extérieur d'un élément.
  • Exemple :

  .box {
    margin: 20px;
  }
  

  Copier après la connexion

• Rembourrage :

  • Définit l'espace à l'intérieur d'un élément, entre le contenu et la bordure.
  • Exemple :

  .content {
    padding: 10px;
  }
  

  Copier après la connexion

Exemples pratiques :

Combinons ce que nous avons appris avec un exemple simple.

HTML :

<div id="container">
  <h1>Welcome to CSS Basics</h1>
  <p class="intro">This is an introduction to CSS selectors and properties.</p>
  <p>Selectors help you target elements, and properties allow you to style them.</p>
</div>

CSS :

/* ID Selector */
#container {
  border: 2px solid black;
  padding: 10px;
}

/* Element Selector */
h1 {
  color: purple;
}

/* Class Selector */
.intro {
  background-color: lightblue;
  font-size: 18px;
}

/* Group Selector */
h1, p {
  font-family: Arial, sans-serif;
}

/* Descendant Selector */
#container p {
  margin-bottom: 15px;
}

Dans cet exemple :

• Le div #container est doté d'une bordure et d'un rembourrage noirs.
• Le

  le titre est de couleur violette.

• Le paragraphe avec l'introduction du cours a un fond bleu clair et une taille de police plus grande.
• Les deux

  et

  les éléments utilisent la police Arial.

• Tous les paragraphes à l'intérieur de #container ont une marge inférieure pour l'espacement.

Exercice pratique

1. Créez un fichier HTML simple avec des titres, des paragraphes et des div.
2. Expérimentez avec différents sélecteurs et propriétés pour styliser votre contenu.
3. Essayez d'utiliser le sélecteur descendant pour styliser les éléments imbriqués.
4. Jouez avec le sélecteur de regroupement pour appliquer les mêmes styles à plusieurs éléments.

Prochaine étape : Dans la prochaine conférence, nous explorerons le Modèle de boîte CSS et découvrirons comment les marges, les bordures, le remplissage et le contenu s'assemblent pour définir la disposition de votre éléments Web. Rendez-vous là-bas !

Suivez-moi sur -

LinkedIn- Ridoy Hasan

-

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!