Pour éviter la répétition de code, nous utilisons plusieurs classes en HTML et CSS. Avec CSS, nous pouvons également définir et styliser les deux classes ensemble et utiliser plusieurs classes dans un élément en leur attribuant des identifiants de classe différents. Cette approche peut être suivie en utilisant la syntaxe séparée par des espaces pour ajouter plusieurs classes à un élément HTML.
Dans cet article, nous allons apprendre à ajouter plusieurs classes à un élément.
Comment utiliser plusieurs classes en CSS ?
Pour utiliser deux classes ou plus dans un élément, chaque identifiant de classe sera séparé par un espace.
Vous devez suivre la syntaxe suivante pour utiliser plusieurs classes dans un élément :
< h1 classe = 'classe_1 classe_2 classe_3' > remise... h >
Dans un même élément HTML, vous pouvez inclure plusieurs classes en les séparant par un espace. Pour votre commodité, voici un exemple.
Exemple : Utilisation de plusieurs classes en CSS
Dans l'exemple ci-dessous, nous allons créer :
- Un titre utilisant la balise
et assignez le nom de la classe ' titre ”.
- Ensuite, nous allons créer un autre titre et l'affecter à deux classes différentes : ' titre ' et ' ligne ”. Ces identifiants de classe sont séparés par un espace :
HTML
h1 >
< h1 classer = 'ligne de cap' >
Cours multiples dans Un élément
h1 >
Passons maintenant au fichier CSS et appliquons certaines propriétés CSS répertoriées ci-dessous :
- Définissez la couleur d'arrière-plan de l'en-tête à l'aide de la fonction rgb () comme ' (69, 51, 151) ”.
- Définissez le style de police ' italique » pour le titre.
Dans la classe HTML, le premier titre utilise le nom de la classe ' titre ”. Ainsi, le style spécifié dans la classe spécifiée sera implémenté sur le premier titre :
.titre {
couleur de fond : rvb ( 69 , 51 , 151 ) ;
style de police : italique
}
Pour le ' ligne ” classe, nous avons:
- Définissez la couleur de l'en-tête à l'aide de la fonction rgb() comme ' (255, 0, 0) ”.
- Appliquer text-decoration-line comme ' souligner ”.
Le deuxième titre utilisera les styles des deux classes : ' titre ' et ' ligne ' classer:
.ligne {couleur : RVB ( 255 , 0 , 0 ) ;
text-decoration-line:underline;
}
Après la mise en œuvre, vérifiez le résultat :
À partir de la sortie, vous pouvez observer que le deuxième en-tête utilise les deux classes CSS.
Conclusion
Pour utiliser plusieurs classes sur un seul élément, utilisez différents identifiants de classe séparés par des espaces blancs. En utilisant cela, nous pouvons appliquer différentes propriétés CSS à la fois. Cela nous permet de réutiliser la classe où des éléments similaires existent. Cet article explique comment utiliser plusieurs classes dans un seul élément et le style avec un exemple.