Maîtrise des Sélecteurs CSS pour le Style des Éléments HTML
Pour appliquer des styles efficacement, il est essentiel de comprendre les sélecteurs CSS, qui déterminent les éléments HTML à cibler pour la mise en forme. Examinons les principaux types de sélecteurs.
Sélecteur de balise
Un sélecteur de balise cible tous les éléments d'une balise donnée, appliquant un style cohérent sur toute la page.
Syntaxe : Dans le HTML, nous avons un élément p :
<p>It was all in my head.</p>
Pour appliquer des styles dans le fichier CSS, utilisez le nom de la balise (p) comme sélecteur :
p {
property: value;
}
Exécutons l'exemple suivant et observons le résultat.
index.html
styles.css
Sélecteur de classe
Les sélecteurs de classe ciblent les éléments partageant un nom de classe, offrant ainsi un contrôle plus précis.
Syntaxe : Dans le HTML, ajouter un attribut class avec un nom de classe pertinent :
<p class="text">This song is another hit.</p>
Dans le CSS, référencer le nom de la classe avec un point (.) pour définir les styles :
.text {
property: value;
}
Exécuter l'exemple suivant et observer que seuls les éléments avec la classe text recevront ces styles, permettant un contrôle plus fin du style.
index.html
styles.css
Tous les éléments avec l'attribut class="text" sont stylisés avec un texte rouge, une taille de police de 24px et un fond couleur blé. Le nom de classe text est défini dans index.css à l'aide d'un préfixe ..
Composition de classes
Il est possible d’attribuer plusieurs classes à un même élément pour une mise en forme flexible.
Syntaxe : Dans le code HTML, ajouter plusieurs noms de classes à un élément :
<p class="text font">A robot created chemicals.</p>
Dans le CSS, définir les styles pour chaque classe séparément :
.text {
property: value;
}
.font {
property: value;
}
Exécuter l’exemple suivant pour observer le fonctionnement. Les éléments possédant à la fois les classes text et font recevront les styles spécifiés.
index.html
styles.css
L’élément <p> avec les classes text et font reçoit les styles des deux sélecteurs. La classe text définit la couleur sur navy, et la classe font définit la taille de police à 24px.
Sélecteur d'identifiant
Les sélecteurs d'identifiant ciblent un seul élément unique. Comme les identifiants doivent être uniques, cette méthode est rarement utilisée pour la mise en forme.
Syntaxe : Dans le HTML, ajouter un attribut id à un élément :
<p id="title">Choose from different themes.</p>
Dans le CSS, référencer l'identifiant avec un dièse (#) pour définir les styles :
#title {
property: value;
}
Analyser l'exemple suivant pour observer son fonctionnement. Cet exemple applique des styles à l'élément unique ayant l'identifiant title.
index.html
styles.css
L'attribut id="title" identifie de manière unique l'élément <p>, et les styles définis avec le sélecteur #title s'appliquent uniquement à cet élément spécifique.
1. Sélectionnez toutes les méthodes possibles pour cibler un élément HTML afin d'appliquer des styles.
2. Quelle est la méthode pour cibler et styliser l’élément HTML avec class="navigation-link" ?
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Génial!
Completion taux amélioré à 2.56
Maîtrise des Sélecteurs CSS pour le Style des Éléments HTML
Glissez pour afficher le menu
Pour appliquer des styles efficacement, il est essentiel de comprendre les sélecteurs CSS, qui déterminent les éléments HTML à cibler pour la mise en forme. Examinons les principaux types de sélecteurs.
Sélecteur de balise
Un sélecteur de balise cible tous les éléments d'une balise donnée, appliquant un style cohérent sur toute la page.
Syntaxe : Dans le HTML, nous avons un élément p :
<p>It was all in my head.</p>
Pour appliquer des styles dans le fichier CSS, utilisez le nom de la balise (p) comme sélecteur :
p {
property: value;
}
Exécutons l'exemple suivant et observons le résultat.
index.html
styles.css
Sélecteur de classe
Les sélecteurs de classe ciblent les éléments partageant un nom de classe, offrant ainsi un contrôle plus précis.
Syntaxe : Dans le HTML, ajouter un attribut class avec un nom de classe pertinent :
<p class="text">This song is another hit.</p>
Dans le CSS, référencer le nom de la classe avec un point (.) pour définir les styles :
.text {
property: value;
}
Exécuter l'exemple suivant et observer que seuls les éléments avec la classe text recevront ces styles, permettant un contrôle plus fin du style.
index.html
styles.css
Tous les éléments avec l'attribut class="text" sont stylisés avec un texte rouge, une taille de police de 24px et un fond couleur blé. Le nom de classe text est défini dans index.css à l'aide d'un préfixe ..
Composition de classes
Il est possible d’attribuer plusieurs classes à un même élément pour une mise en forme flexible.
Syntaxe : Dans le code HTML, ajouter plusieurs noms de classes à un élément :
<p class="text font">A robot created chemicals.</p>
Dans le CSS, définir les styles pour chaque classe séparément :
.text {
property: value;
}
.font {
property: value;
}
Exécuter l’exemple suivant pour observer le fonctionnement. Les éléments possédant à la fois les classes text et font recevront les styles spécifiés.
index.html
styles.css
L’élément <p> avec les classes text et font reçoit les styles des deux sélecteurs. La classe text définit la couleur sur navy, et la classe font définit la taille de police à 24px.
Sélecteur d'identifiant
Les sélecteurs d'identifiant ciblent un seul élément unique. Comme les identifiants doivent être uniques, cette méthode est rarement utilisée pour la mise en forme.
Syntaxe : Dans le HTML, ajouter un attribut id à un élément :
<p id="title">Choose from different themes.</p>
Dans le CSS, référencer l'identifiant avec un dièse (#) pour définir les styles :
#title {
property: value;
}
Analyser l'exemple suivant pour observer son fonctionnement. Cet exemple applique des styles à l'élément unique ayant l'identifiant title.
index.html
styles.css
L'attribut id="title" identifie de manière unique l'élément <p>, et les styles définis avec le sélecteur #title s'appliquent uniquement à cet élément spécifique.
1. Sélectionnez toutes les méthodes possibles pour cibler un élément HTML afin d'appliquer des styles.
2. Quelle est la méthode pour cibler et styliser l’élément HTML avec class="navigation-link" ?
Merci pour vos commentaires !