11.1 Cascade (Cascading)
Les principes de base du CSS incluent la cascade, l'héritage et la spécificité. Comprendre ces principes aide à mieux contrôler le style et l'apparence des pages web.
Cascade (Cascading)
La cascade — c'est le principe fondamental du CSS qui détermine comment appliquer les styles lorsque plusieurs règles sont en conflit. Lors de la cascade, le navigateur utilise les règles suivantes pour résoudre les conflits :
-
Ordre des sources : les styles peuvent être définis à différents endroits — feuilles de style externes (fichiers CSS),
feuilles de style internes (dans la balise
<style>) et styles en ligne (dans l'attributstylede l'élément HTML). Les règles sont appliquées dans l'ordre de leur apparition. - Spécificité : chaque sélecteur a son propre niveau de spécificité. Plus la spécificité du sélecteur est élevée, plus sa priorité est haute.
-
Importance : les règles avec la directive
!importantont la plus haute priorité et s'appliquent même en présence d'autres règles conflictuelles.
Exemple de cascade :
Dans cet exemple, la couleur de fond sera jaune parce que le style en ligne a priorité sur le style interne. La couleur du texte sera rouge, car le style en ligne a priorité sur le style interne.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exemple de cascade CSS</title>
<style>
body {
background-color: lightblue; /* Style interne */
}
p {
color: green;
}
</style>
</head>
<body style="background-color: yellow;"> <!-- Style en ligne -->
<p style="color: red;">Exemple de cascade CSS</p>
</body>
</html>
11.2 Héritage (Inheritance)
L'héritage — c'est le processus par lequel les éléments enfants adoptent les styles de leurs éléments parents. Tous les propriétés CSS ne sont pas héritées. Les propriétés héritées incluent la couleur du texte, la famille de polices, l'interligne et quelques autres.
Exemple d'héritage :
Dans cet exemple, l'élément <p> hérite de la police et de la couleur de l'élément <body>,
et de la taille de police de la classe .container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exemple d'héritage CSS</title>
<style>
body {
font-family: Arial, sans-serif;
color: blue;
}
.container {
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<p>Ce texte hérite de la police et de la couleur de body, et de la taille de police de ".container".</p>
</div>
</body>
</html>
11.3 Spécificité (Specificity)
La spécificité détermine quelle règle CSS sera appliquée à un élément lorsque plusieurs règles correspondent à un même élément. La spécificité est calculée sur la base du nombre et des types de sélecteurs dans la règle.
Règles de calcul de la spécificité :
- Les styles en ligne (inline styles) ont la spécificité la plus élevée
- Les identifiants (selectors by ID) ont une spécificité plus élevée que les classes, pseudo-classes et attributs
- Les classes, pseudo-classes et attributs ont une spécificité plus élevée que les éléments et pseudo-éléments
- Les éléments et pseudo-éléments ont la spécificité la plus basse
Exemple de calcul de spécificité :
Dans cet exemple, le texte sera rouge, car le sélecteur #unique a la spécificité la plus élevée.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exemple de spécificité CSS</title>
<style>
p {
color: blue; /* Spécificité 0-0-0-1 */
}
.highlight {
color: green; /* Spécificité 0-0-1-0 */
}
#unique {
color: red; /* Spécificité 0-1-0-0 */
}
</style>
</head>
<body>
<p class="highlight" id="unique">Ce texte sera rouge.</p>
</body>
</html>
11.4 Importance (Importance)
Le CSS permet aux développeurs d'indiquer explicitement la priorité des styles à l'aide de la directive !important. Les règles
avec cette directive seront appliquées indépendamment de la spécificité des autres règles.
Exemple d'utilisation de !important :
Dans cet exemple, le texte sera bleu, car la règle avec !important a la priorité la plus élevée.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exemple de !important en CSS</title>
<style>
p {
color: blue !important;
}
.highlight {
color: green;
}
</style>
</head>
<body>
<p class="highlight">Ce texte sera bleu à cause de "!important".</p>
</body>
</html>
11.5 Exemples d'utilisation des principes CSS
Exemples d'utilisation des principes CSS dans des tâches réelles.
Exemple de cascade et de spécificité :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exemple de cascade et de spécificité CSS</title>
<style>
body {
background-color: lightgray;
}
p {
color: blue;
}
.important {
color: red;
}
</style>
</head>
<body>
<p class="important">Ce texte sera rouge car .important a une spécificité plus élevée que "p".</p>
</body>
</html>
Exemple d'héritage et de spécificité :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exemple d'héritage et de spécificité CSS</title>
<style>
body {
font-family: Arial, sans-serif;
color: blue;
}
.container {
color: green; /* Remplace la couleur de body pour tous les éléments enfants */
}
.highlight {
color: red; /* A une spécificité plus élevée que .container */
}
</style>
</head>
<body>
<div class="container">
<p class="highlight">Ce texte sera rouge à cause de la spécificité de la classe ".highlight".</p>
</div>
</body>
</html>
GO TO FULL VERSION