Préambule

Parfois, votre CSS ne semble pas avoir d'effet. Vous ajoutez une classe à un élément pour le rendre rouge, et celui-ci reste désespérément bleu. Mais pourquoi ? Hé bien, ami lecteur fort curieux (et tu as raison), je vais t'expliquer le poids des déclarations (ouaiiis !).

Pour rappel, la déclaration, c'est ce qui cible un ou plusieurs éléments html :

Code:

#monElement div.element { }

Vous devez d'abord savoir que l'ordre des déclarations influe sur leur emploi. Ici, les balises <span> auront une couleur de texte verte, car la seconde déclaration surcharge la première, et la troisième surcharge la seconde :

Code:

span { color: red }
span { color: blue }
span { color: green }

Mais cet ordre ne suffit pas toujours...

Le poids de chaque élément

Comme vous le savez peut-être, il y a trois façons "basiques" de cibler un élément, c'est à dire trois sélecteurs de base : L'identifiant (ID, #), la classe (class, .), ou le nom de l'élément :

Code:

element { color: red } /* nom */
.element { color: red } /* classe */
#element { color: red } /* identifiant */

Hé bien ces trois sélecteurs ont chacun un poids :

• L'élément a un poids de 1


• La classe a un poids de 10


• L'identifiant a un poids de 100

Le poids d'une déclaration est calculé par simple addition de ces poids. Ainsi, prenons pour exemple cette déclaration :

Code:

#monID .maClasse {}

Le premier élément est un identifiant, il vaut donc 100. Le second est une classe, il vaut donc 10. Le poids de cette déclaration est donc 100 + 10 = 110. Simple non ?

Voici d'autres exemples :

Code:

#monID span {}

Identifiant (100) + élement (1) = 101

Code:

#monID #autreID div.maClasse {}

identifiant (100) + identifiant (100) + element (1) + classe (10) = 211

Code:

.maClasse .autreClasse #monID {}

classe (10) + classe (10) + identifiant (100) = 120

C'est compris ?

"Mais à quoi ça nous sert ?", vous demandez-vous sûrement. Hé bien c'est simple : Plus une déclaration a un poids élevé, plus elle est prioritaire sur une autre, peu importe l'ordre de déclaration.

Reprenons cet exemple sur l'ordre des propriétés vu en début de page :

Code:

span { color: red }
span { color: blue }
span { color: green }

C'est toujours vrai, l'élément ciblé ici serait de couleur verte, mais uniquement parce que le poids des déclarations est identique. Mais maintenant voyons ceci :

Code:

#monID { color: red }
span { color: blue }

Si l'élément ciblé est un span qui porte l'id "monID", alors son texte sera de couleur rouge, car le poids de la première déclaration est de 100 (identifiant), la seconde n'étant que de 1 (élément).

Prenons un exemple en html :

Code:

<ul id="menu">
   <li class="color"><a href="#">Lien 1</a></li>
   <li><a href="#">Lien 2</a></li>
   <li><a href="#">Lien 3</a></li>
   <li><a href="#">Lien 4</a></li>
   <li><a href="#">Lien 2</a></li>
</ul>

Maintenant, imaginons un CSS déjà existant pour ce html, qui vise à colorer les liens en rouge :

Code:

#menu a { color: red }

Cette déclaration a donc un poids de 101 (un identifiant et un éléments);

Sur ce, vous voulez que le lien dont la liste porte la classe "color" s'affiche en vert.

Code:

.color a { color: green }

Surprise ! Ça ne fonctionne pas. En effet, cette déclaration n'a un poids que de 11, donc il ne surclasse pas la précédente de 102 même en étant placé après. Il faut donc écrire une déclaration dont le poids surpassera la première :

Code:

#menu .color a

Cette déclaration fait donc 111 (identifiant + classe + element), son poids est supérieur à la première, et notre lien s'affiche en vert.

Notez bien !

D'une manière générale, dans le métier, on essaie de faire des déclarations "minimales", c'est à dire au poids le plus petit possible. En effet, pour l'exemple précédent, on aurait pu faire une déclaration de ce genre :

Code:

ul#menu li a { color: red }

Ces déclarations peuvent vite devenir très longues, et les raccourci un maximum est un bon moyen de s'assurer à la fois que le code continuera à changer même si le markup (Template) de la page change dans l'avenir, et de permettre d'optimiser un peu le poids de la feuille de CSS. Mais surtout, cela permet de pouvoir surclasser ces déclarations très facilement. En effet, il y a bien plus de façons simples de surclasser une déclaration d'un poids de 102 que de 625 lorsqu'on veut effectuer une petite modification.

Pensez-y !

Cas particuliers

Code:

<div style="color:red">mon texte</div>

Déclarer du CSS inline (c'est à dire dans le html) lui donne automatiquement un poids de 1 000. Autant dire que vous ne pourrez presque rien faire dans votre feuille de style pour le surclasser ! C'est aussi pour ça qu'il faut éviter de mettre du CSS de cette façon. Comment faire alors ?

Hé bien le marqueur !important donne un poids de 10 000. De quoi surclasser tout ce qui se trouve dans la page, y compris le CSS inline.

Code:

element { color: red !important }

Retenez donc que ces deux cas particuliers ne devraient pas être utilisés. La gestion du poids comme de l'héritage suffit largement pour
mettre votre forum en forme ! Cependant, comme forumactif utilise par défaut un CSS assez sale et lourd, vous n'aurez peut-être pas le choix...

Voilà, maintenant vous savez tout sur le poids des déclarations en CSS.

Hello Manumanu (Pour la troisième fois de la matinée! =D)
Merci encore une fois pour ce tuto très intéressant, et je suis sûre, sera très utile pour pas mal de gens sur forumactif! Cependant, j'ai une petite remarque, alors si tu pouvais modifier un peu ça ce serait génial!

Premièrement, tu dis ceci, quelque part au milieu de ton tuto:

Manumanu a écrit:

Jusqu'ici, vous saviez que l'ordre des déclarations influait sur leur emploi :

Code:

span { color: red }
span { color: blue }
span { color: green }

J'en toucherais plutôt un mot rapidement dans le préambule. En effet, il n'est pas certain que toutes les personnes qui lisent ton tuto le sachent nécessairement. Du coup, j'en toucherais rapidement à un mot avant, pour expliquer pourquoi c'est le cas (enfin, juste pour dire que c'est le cas avant qu'on dise "Vous savez déjà ça".). Cela permettrait aussi d'expliquer pourquoi ton explication des poids des déclarations peut être utile, en expliquant que l'ordre séquentiel ne suffit pas toujours.

Merci encore, c'était une lecture très intéressante!

Iz done !

C'est parfait, merci! ^^

merci !

Très intéressant, je ne savais pas du tout que les déclarations avaient un poids ! Merci pour ce tuto !

Autrement dit, pour surpasser le inline, on fait ?

Code:

<style type="text/css">#menu a { color: #red !important;}</style>
<div id="airgear3">
  <div class="color: green;"><c href="#"><div style="color: green;">Couleur ?</div></c></div>
</div>

Pardon du double post, mais j'ai finalement compris mon erreur toute seule x3 Merci beaucoup du tutoriel !