Maison >interface Web >tutoriel CSS >Comment spécifier l'ordre des classes en utilisant CSS ?
Comment spécifier l'ordre des classes en utilisant CSS ?
- 王林avant
- 2023-08-28 22:01:021275parcourir
Les feuilles de style en cascade (CSS) sont un composant puissant du développement Web qui permet aux développeurs de déterminer l'apparence visuelle de leurs sites Web. En CSS, les classes servent de sélecteurs qui nous permettent d'appliquer plusieurs styles spécifiques à un élément. Vous pouvez également utiliser plusieurs classes pour des éléments spécifiques.
Cependant, lorsque vous appliquez plusieurs classes à un élément, il est nécessaire de savoir préciser l'ordre de rendu de ces classes pour éviter les écarts et les résultats inattendus. Dans cet article, nous aborderons les différentes manières de spécifier l'ordre des classes en CSS, ainsi que l'importance de la spécificité et des règles en cascade pour aider à déterminer les priorités.
Que sont les cours en CSS ?
En CSS, les classes sont des sélecteurs utilisés pour appliquer un ensemble spécifique de styles aux éléments HTML. Ce sont des outils puissants qui nous permettent de regrouper des éléments et de maintenir la cohérence entre plusieurs éléments d’une page Web. Cela nous permet de réutiliser les styles CSS sur de nombreux éléments d'un grand site Web.
Utilisez plusieurs classes pour un élément
Si vous définissez un ensemble de classes en CSS, vous pouvez les combiner pour un élément spécifique afin de le rendre unique et attrayant. Cependant, vous devez spécifier l'ordre des classes afin que le compilateur exécute le code de manière fluide et fournisse le résultat selon vos besoins. Cela se fait via les règles cascade et spécificité.
L'ordre dans lequel nous définissons les classes dans un fichier CSS est utilisé pour déterminer leur priorité lorsque plusieurs classes sont appliquées à un élément. En effet, CSS est en cascade, ce qui signifie que le compilateur le lit du dernier vers le haut et de de droite à gauche. Par conséquent, le dernier mentionné dans le code CSS obtient la priorité. Comprenons mieux cela avec un exemple.
Exemple
Supposons que vous ayez deux classes définies dans votre fichier CSS.
<html>
<head>
<style>
.class1 {
margin: 10px;
padding: 1px;
text-align: center;
font-size: 18px;
color: red;
letter-spacing: 1px;
}
.class2 {
margin: 12px;
padding: 5px;
color: blue;
font-size: 20px;
font-family: Georgia;
letter-spacing: 1px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1> CSS Classes </h1>
<div class="class1"> Here, we have applied class1 to the div element. </div>
<div class="class2"> Here, we have applied class2 to the div element. </div>
<div class="class1 class2"> This is an example. Here, we will apply both classes to the div element. </div>
</body>
</html>
Puisque .class2 est déclaré après .class1 dans le code CSS, class2 est prioritaire. Ainsi, lorsque nous appliquons class1 et class2 à un élément div, l'élément div est stylisé principalement en fonction de class2.
Cependant, vous pouvez voir que les attributs non mentionnés dans class2 mais présents dans class1 sont appliqués à l'élément div. Tout comme text-align: center est mentionné dans class1, mais pas dans class2. Mais le dernier élément div est toujours aligné au centre. En effet, les seules propriétés de class1 seront appliquées à l'élément telles quelles. Cependant, pour les propriétés identiques dans les deux classes, le compilateur utilise des règles en cascade pour les restituer.
Ordre des cours
L'ordre des classes écrites en HTML ne détermine pas la priorité. Considérez l'exemple suivant
Exemple
Supposons que vous définissiez deux classes similaires à l'exemple ci-dessus. Cependant, vous avez modifié l'ordre des classes dans le code HTML. Selon vous, quel sera le résultat ? Est-ce que ce sera différent d’avant ? Voyons.
<html>
<head>
<style>
.class1 {
margin: 10px;
padding: 1px;
text-align: center;
font-size: 18px;
color: red;
letter-spacing: 1px;
}
.class2 {
margin: 12px;
padding: 5px;
color: blue;
font-size: 20px;
font-family: Georgia;
letter-spacing: 1px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1> CSS Classes </h1>
<div class="class1 class2"> This is an example. Here, we will apply first class1 and then class2 to the div element. </div>
<div class="class2 class1"> This is an example. Here, we will apply first class2 and then class1 to the div element. </div>
</body>
</html>
Comme vous pouvez le constater, les résultats sont inchangés. Les styles seront appliqués uniquement selon l'ordre des classes mentionné en CSS.
CSS ! Utilisation de règles importantes
En CSS, la règle !important permet aux développeurs de remplacer l'ordre en cascade des styles et de garantir que le style spécifique requis obtient la priorité la plus élevée.
Grammaire
selector{
property: value !important;
}
Si vous utilisez le mot-clé !important à côté d'une propriété CSS, le compilateur veillera à ce qu'il soit appliqué à cet élément, quel que soit l'ordre spécifique des styles. Regardons un exemple.
Entrez
Original Linked List: 1 -> 2 -> 3 -> 4 -> 5 -> null
Exemple
Dans l'exemple suivant, puisque b vient avant a, le style sera appliqué en fonction du b du dernier élément div. Cependant, la couleur du texte est appliquée telle qu'écrite en classe "a" , ce qui signifie que la couleur du texte est rouge . En effet, nous utilisons le mot-clé !important dans l'attribut color de la classe "a".
<html>
<head>
<style>
* {
margin: 10px;
padding: 2px;
}
.a {
color: red !important;
letter-spacing: 1px;
text-shadow: 2px 2px 2px grey;
font-size: 16px;
font-family: Calibri;
}
.b {
color: blue;
letter-spacing: 1px;
font-size: 20px;
font-family: Georgia;
}
</style>
</head>
<body>
<h1> !Important Rule </h1>
<div class="a"> Here, we have applied only class "a" to the div element. </div>
<div class="b"> Here, we have applied only class "b" to the div element. </div>
<div class="a b"> Here, we have applied both the classes to the div element. </div>
</body>
</html>
Conclusion
Dans cet article, nous avons discuté des règles de cascade et de spécificité pour spécifier l'ordre des classes en CSS lors de l'application de plusieurs classes à un élément spécifique. Nous avons également discuté des règles !importantes pour annuler une commande spécifique.
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!