Fiche de révision : Maîtrise des sélecteurs et styles CSS

📋 Plan du Cours

1. Priorité des sélecteurs CSS : ID, classe et type
2. Sélecteurs descendants et adjacents en CSS
3. Unités CSS adaptatives à la taille de l’écran
4. Sélecteur universel et application globale des styles
5. Chargement d’une feuille CSS externe dans HTML
6. Groupes de sélecteurs et pseudo-classes en CSS

📖 1. Priorité des sélecteurs CSS : ID, classe et type

🔑 Notions clés & Définitions

• Sélecteur de classe : Un sélecteur CSS qui cible les éléments possédant une classe spécifique, identifié par un point suivi du nom de la classe, avec une priorité intermédiaire dans la hiérarchie de spécificité.
• Sélecteur de type : Un sélecteur CSS qui cible les éléments selon leur type ou nom de balise HTML, avec la priorité la plus faible dans la hiérarchie de spécificité.

📝 Points essentiels

• Le sélecteur de classe (.class) a une priorité intermédiaire entre ID et type.
• Un style appliqué avec un sélecteur d’ID écrase les styles appliqués avec une classe ou un type.
• ID (#id) = priorité la plus forte 2.

💡 À retenir

Comprendre la hiérarchie de spécificité des sélecteurs permet de maîtriser l’ordre d’application des styles en CSS.

📖 2. Sélecteurs descendants et adjacents en CSS

🔑 Notions clés & Définitions

• Il cible : Expression utilisée pour indiquer les éléments HTML sélectionnés par un sélecteur CSS donné.
• Sélecteur descendant : Type de sélecteur CSS qui sélectionne tous les éléments situés à l’intérieur d’un autre élément, qu’ils soient enfants directs ou descendants plus profonds.
• Deviennent rouges : Effet visuel appliqué aux éléments sélectionnés par une règle CSS qui modifie leur couleur de texte en rouge.

📝 Points essentiels

• Le sélecteur descendant sélectionne tous les descendants, pas uniquement les enfants directs.
• Le sélecteur adjacent ne cible que l’élément immédiatement suivant, pas tous les suivants.
• Un sélecteur avec un descendant D.

💡 À retenir

Différencier précisément les sélecteurs descendant et adjacent permet de cibler efficacement les éléments dans la hiérarchie HTML.

📖 3. Unités CSS adaptatives à la taille de l’écran

🔑 Notions clés & Définitions

• Unité vw (viewport width) : unité de mesure qui représente un pourcentage de la largeur de la fenêtre d’affichage, permettant une adaptation automatique à la taille de l’écran.

• Unité px (pixel) : unité de mesure fixe correspondant à un point d’affichage, ne s’adaptant pas à la taille de l’écran.

• Unité cm (centimètre) : unité de mesure fixe correspondant à une longueur physique, indépendante de la taille de l’écran.

📝 Points essentiels

• L’unité vw correspond à un pourcentage de la largeur de la fenêtre d’affichage, ce qui la rend adaptée pour un design responsive. Elle s’ajuste automatiquement lorsque la taille de l’écran change, garantissant une adaptation fluide des styles. En revanche, les unités px et cm sont fixes : elles ne varient pas en fonction de la taille de l’écran, ce qui limite leur utilisation pour des designs adaptatifs. L’unité em dépend quant à elle de la taille de police du parent, et non directement de la taille de l’écran.

💡 À retenir

Utiliser l’unité vw permet d’assurer une adaptation fluide et automatique des styles à la largeur de l’écran, favorisant un design responsive efficace.

📖 4. Sélecteur universel et application globale des styles

🔑 Notions clés & Définitions

• Sélecteur universel () : Un sélecteur CSS représenté par l’astérisque (*) qui cible tous les éléments HTML d’un document.
• Bonne réponse : Signification de p + h2 ✔ Bonne réponse : B.

📝 Points essentiels

• Le sélecteur universel est utile pour des styles de base ou des réinitialisations CSS.
• Le sélecteur body ou html ne cible pas tous les éléments, contrairement au sélecteur universel.
• Laquelle de ces écritures applique un style à toutes les balises d’un document ?
• Le sélecteur CSS p + h2 signifie : A.

💡 À retenir

Le sélecteur universel permet d’appliquer rapidement un style global à l’ensemble des éléments HTML.

📖 5. Chargement d’une feuille CSS externe dans HTML

🔑 Notions clés & Définitions

• < Balise <link> > : Élément HTML permettant de relier un document externe, notamment une feuille de style CSS, à une page HTML.
• < Attribut rel="stylesheet" > : Attribut de la balise <link> qui indique que la ressource liée est une feuille de style CSS.
• < Attribut href > : Attribut de la balise <link> qui spécifie le chemin vers le fichier CSS externe à charger.

📝 Points essentiels

• La syntaxe correcte pour charger une feuille CSS externe consiste en une balise <link> avec l’attribut rel="stylesheet" et l’attribut href pointant vers le fichier CSS, par exemple : <link rel="stylesheet" href="style.css">.
• La balise <style> ne supporte pas l’attribut src, donc ne peut pas charger un fichier externe.
• Les autres méthodes comme @import ou <css> ne sont pas valides pour lier une feuille CSS externe.
• Le fichier CSS externe doit être lié dans la section <head> du document HTML pour assurer un chargement optimal.

💡 À retenir

Maîtriser la syntaxe correcte, notamment la balise <link> avec rel="stylesheet" et href, est essentiel pour intégrer efficacement une feuille CSS externe dans une page HTML.

📖 6. Groupes de sélecteurs et pseudo-classes en CSS

🔑 Notions clés & Définitions

• Plusieurs sélecteurs séparés : Une liste de sélecteurs distincts, séparés par des virgules, pour cibler plusieurs éléments simultanément.
• Pseudo-classe : Une extension d'un sélecteur qui commence par deux-points (:) et cible un état particulier d’un élément, comme :hover ou :first-child.

📝 Points essentiels

• Un groupe de sélecteurs correspond à plusieurs sélecteurs séparés par une virgule, comme h1, h2, p.
• Une pseudo-classe commence par deux-points et cible un état spécifique d’un élément, par exemple :hover.
• Les pseudo-classes courantes incluent :hover, :active, :focus, :first-child.
• Les groupes de sélecteurs permettent d’appliquer une même règle à plusieurs éléments ou états.

💡 À retenir

Utiliser efficacement les groupes de sélecteurs et les pseudo-classes permet de cibler plusieurs éléments et états spécifiques en CSS.

📊 Tableaux de Synthèse

Priorité des sélecteurs CSS

⚠️ Pièges & Confusions Fréquentes

1. Confusion entre priorité des sélecteurs ID, classe et type.
2. Mélanger sélecteurs descendant et adjacent.
3. Utiliser des unités fixes comme px ou cm pour un design responsive.
4. Oublier de charger la feuille CSS avec la balise link.
5. Confondre le sélecteur universel avec d’autres sélecteurs.
6. Ne pas utiliser de virgules pour grouper plusieurs sélecteurs.
7. Oublier le double deux-points pour les pseudo-classes.

✅ Checklist Examen

1. Comprendre la hiérarchie de priorité des sélecteurs CSS.
2. Savoir différencier sélecteur descendant et adjacent.
3. Utiliser des unités adaptatives comme vw pour le responsive.
4. Maîtriser la syntaxe de chargement d’une feuille CSS externe.
5. Utiliser les pseudo-classes pour cibler des états.
6. Appliquer des styles à plusieurs éléments avec un groupe de sélecteurs.
7. Utiliser le sélecteur universel pour une réinitialisation.
8. Différencier les sélecteurs de type, classe et ID.