Les feuilles de style en cascade ou CSS sont configurées de manière à ce que vous puissiez avoir plusieurs propriétés affectant le même élément. Certaines de ces propriétés peuvent être en conflit les unes avec les autres. Par exemple, vous pouvez définir une couleur de police rouge sur la balise de paragraphe, puis ultérieurement une couleur de police bleue. Comment le navigateur sait-il de quelle couleur faire les paragraphes? Ceci est décidé par la cascade.
Types de feuilles de style
Il existe trois types de feuilles de style:
- Feuilles de style d'auteur
- Ce sont des feuilles de style créées par l'auteur de la page Web. C'est ce à quoi la plupart des gens pensent lorsqu'ils pensent aux feuilles de style CSS.
- Feuilles de style utilisateur
- Les feuilles de style de l'utilisateur sont définies par l'utilisateur de la page Web. Celles-ci permettent à l'utilisateur de mieux contrôler l'affichage des pages.
- Feuilles de style de l'agent utilisateur
- Ce sont des styles que le navigateur Web applique à la page pour aider à afficher cette page. Par exemple, en XHTML, la plupart des agents utilisateurs visuels affichent la balise comme texte en italique. Ceci est défini dans la feuille de style de l'agent utilisateur.
Un poids est attribué aux propriétés définies dans chacune des feuilles de style ci-dessus. Par défaut, la feuille de style auteur a le plus de poids, suivie de la feuille de style utilisateur et enfin de la feuille de style agent utilisateur. La seule exception à cette règle concerne la règle! Important dans une feuille de style utilisateur. Cela a plus de poids que la feuille de style de l'auteur.
Commande en cascade
Pour résoudre les conflits, les navigateurs Web utilisent l'ordre de tri suivant pour déterminer quel style est prioritaire et sera utilisé:
- Tout d'abord, recherchez toutes les déclarations qui s'appliquent à l'élément en question, ainsi que le type de média attribué.
- Ensuite, regardez de quelle feuille de style il provient. Comme ci-dessus, les feuilles de style d'auteur viennent en premier, puis utilisateur, puis agent utilisateur. Les styles d'utilisateurs importants ayant une priorité plus élevée que les styles d'auteur!
- Plus un sélecteur est spécifique, plus il aura de priorité. Par exemple, un style sur "div.co p" aura une priorité plus élevée qu'un style sur la balise "p".
- Enfin, triez les règles selon l'ordre dans lequel elles ont été définies. Les règles définies ultérieurement dans l'arborescence du document ont une priorité supérieure à celles définies précédemment. Et les règles d'une feuille de style importée sont considérées avant les règles directement dans la feuille de style.
