Chapitre 75 | Vocabulaire essentiel

Vocabulaire essentiel

Voici un rappel des termes importants pour bien comprendre le code HTML et CSS utilisé jusqu’ici :

Balises HTML

• Les balises sont les éléments de base du langage HTML. Elles permettent de structurer le contenu d’une page web.
• Elles sont entourées de chevrons (< >) et peuvent être :
  • Ouvrantes et fermantes : par exemple <p>... </p> pour un paragraphe.
  • Orphelines : elles ne nécessitent pas de balise de fermeture, comme <img> ou <br>.

---

Attributs HTML

• Les attributs fournissent des informations supplémentaires sur une balise. Ils apparaissent toujours dans la balise ouvrante.
• Un attribut se compose de :
  • Un nom : par exemple src ou alt.
  • Une valeur : entre guillemets, comme "images/image1.jpg".
• Exemple d’une balise avec des attributs
  <img src="images/image1.jpg" alt="Description de l'image">

---

Propriétés CSS

• Les propriétés définissent les styles appliqués aux éléments HTML.
• Une propriété CSS est toujours associée à une valeur, séparée par deux points (:).
• Exemple de propriétés CSS
  color: blue; /* Définit la couleur du texte */ font-size: 16px; /* Définit la taille de la police */

---

Déclarations CSS

• Une déclaration CSS associe une ou plusieurs propriétés à un élément HTML.
• Elle est contenue dans un bloc de règles CSS, qui commence par un sélecteur (l’élément à styliser).
• Exemple de déclaration CSS complète
  p { color: green; font-size: 14px; }
  • Sélecteur : p (cible tous les paragraphes <p>).
  • Déclarations : les lignes color: green; et font-size: 14px;.

---

Classes CSS : avec ou sans point ?

L’aviez-vous remarqué ? Lorsqu’on cible une balise comme <p>, il n’y a pas de point devant le sélecteur. Cependant, lorsqu’on souhaite cibler une classe, il faut utiliser un point (.) devant le nom de la classe.

• Sans point : le sélecteur cible directement toutes les balises du même type.
  Exemple :
  p { color: red; }
  Cela stylisera tous les paragraphes (<p>) de la page.
  
• Avec un point : le sélecteur cible un élément portant une classe spécifique.
  Exemple :
  .highlight { color: blue; }
  Cela stylisera uniquement les éléments ayant l’attribut class="highlight".

Résumé :

• Pas de point : pour cibler une balise HTML globale (exemple : p).
• Point : pour cibler une classe spécifique (exemple : .highlight).

---

Résumé

• Balises : éléments de structure HTML.
• Attributs : informations supplémentaires pour les balises.
• Propriétés CSS : caractéristiques à modifier (couleur, taille, etc.).
• Déclarations CSS : ensemble des styles appliqués à un élément HTML.
• Sélecteurs CSS : cibler des balises sans point ou des classes avec un point (.).