Comment Surcharger les Styles CSS
Table du Contenu
Parfois les dévelopeurs doivent travailler avec des codes anciens, et cela est quand ils font face à quelques grands problèmes, particulièrement, au style en ligne (inline) qui ne peut pas être surchargé.
Pour que vous évitiez ce problème, vous devez comprendre deux concepts - le concept de l'Ordre et du Héritage.
1. L'ordre en cascade
Le terme “cascade” signifie un ordre hiérarchique dans lequel les différents types de feuilles de style interagissent quand deux styles entrent en conflit. Le conflit naît si deux styles sont appliqués au même élément.
Pour ce type des cas, il existe un ordre pour les feuilles de style selon leur priorité (4ème a la plus haute priorité ):
- Défauts de Navigateur
- Feuille de Style Externes (Reliée ou Importée)
- Feuille de Style Internes (Enfoncée)
- Styles En ligne
Donc cela signifie qu'en cas de conflits entre deux styles, celui utilisé en dernier a la priorité. Pour rendre cela plus clair, vous devez noter ces deux règles:
- Vous devez placer les styles en ligne dans le corps de votre document HTML, tandis que les feuilles de style enfoncées doivent être placées en tête du document HTML pour que les styles en ligne seront toujours utilisés en dernier et donc ils vont avoir la priorité.
- Les feuilles de style internes ont une plus grande priorité que celles externes, car selon le navigateur, les feuilles de style externes sont toujours avant les feuilles de style internes, même si vous les placez après.
2. Héritage
HTML utilise les relations parent-enfant. Un élément enfant va généralement hériter les caractéristiques de son élément parent à moins de définir une autre chose. Par exemple, voyons ce code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: blue;
font-family: arial;
}
</style>
</head>
<body>
<p>
Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.
</p>
</body>
</html>Comme la balise paragraph, qui est notre élément enfant, est dans la balise body, qui est son élément parent, elle va prendre tous les styles donnés à la balise body. Mais si vous voulez que votre paragraphe prenne seulement quelques règles de body mais pas des autres, vous pouvez simplement surcharger les règles que vous ne voulez pas. Voici un exemple pour vous:
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: blue;
font-family: arial;
}
p {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>
Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.
</p>
</body>
</html>3. Priorités internes
Maintenant, voyons la liste des priorités internes (3ème a la plus haute priorité ):
- ID
- Classe
- Élément
Pour mieux comprendre, notez le structure suivant:
Cela signifie que si vous avez un élément avec une classe et un sélecteur ID qui ont des styles différents, c'est le style ID qui a la priorité. Comme un exemple, voyons ce code:
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
#testid {
color: blue;
font-weight: bold;
}
.example {
color: red;
font-family: arial;
}
</style>
</head>
<body>
<p id="testid" class="example">
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500.
</p>
</body>
</html>Comme nous le voyons, la Classe était placée après l'ID, mais là encore, c'est l'ID qui a la priorité. Cela n'est pas applicable qu'en cas où l'ID et la Classe sont utilisés pour le même élément.
Maintenant voyons un exemple, dans lequel un ID et une Classe sont utilisés dans deux éléments différents.
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
#testid {
color: red;
font-weight: bold;
}
.example {
color: blue;
font-family: arial;
}
</style>
</head>
<body>
<div id="testid">
<span class="example">
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.
</span>
</div>
</body>
</html>Ici le sélecteur Classe a surchargé le sélecteur ID car il a été utilisé en dernier. Un sélecteur ID va avoir la priorité sur la Classe seulement si ces deux sont appliqués au même élément .
Maintenant voyons comment faire en sorte qu'une classe surcharge une autre. Si cette classe a un arrière-plan bleu et vous voulez que votre DIV ait un arrière-plan rouge, essayez de changer la couleur de bleu à rouge dans la classe. Vous pouvez également créer une nouvelle classe CSS qui a défini l'attribut background-color avec la valeur "red" et laisser votre DIV faire référence à cette classe.
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
.bg-blue {
background-color: blue;
}
.bg-red {
background-color: red;
}
</style>
</head>
<body>
<div class="bg-blue bg-red">
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.
</div>
</body>
</html>4. ! Important
Une déclaration !Important est un bon moyen de surcharger les styles que vous voulez. Lorsqu'une règle !Important est utilisée sur une déclaration de style, cette déclaration surcharge n'impore quel autre déclaration. Lorsque deux délarations en conflit avec la règle !important sont appliquées au même élément, la déclaration avec une plus grande spécificité sera appliquée.
Voyons comment vous pouvez utiliser la déclaration !Important pour surcharger les styles en ligne. Vous pouvez définir certains styles dans votre fichier global CSS comme !important, donc surcharger les styles en ligne sont définis directement sur les éléments.
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
.box[style*="color: red"] {
color: white !important;
}
.box {
background-color: blue;
padding: 15px 25px;
margin: 10px;
}
</style>
</head>
<body>
<div class="box" style="color: red;">
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.
</div>
</body>
</html>Au lieu d'utiliser !Important, vous pouvez essayer les trucs suivants pour surcharger les styles que vous voulez:
- Faire un meilleur usage de la cascade CSS
- Utiliser les règles plus spécifiques. En indiquant un ou plusieurs élément avant l'élément que vous sélectionnez, la règle devient plus spécifique et obtient une plus haute priorité:
- En tant que cas insensé pour (2), dupliquez des sélecteurs simples pour augmenter la spécificité lorsque vous n'avez plus rien à spécifier.