Explication détaillée de la structure CSS et de la cascade

CSS est l'abréviation de Cascading Style Sheets, ce qui implique que la notion de cascade est très importante. Au niveau le plus élémentaire, cela montre que l'ordre des règles CSS est important, mais c'est plus compliqué que cela. Le choix du sélecteur qui gagne dans la cascade dépend de trois facteurs (ceux-ci sont classés par ordre de poids - le premier l'emporte sur le dernier) :

• Importance (Importance)

• Spécificité

• Ordre à la source (Ordre à la source)

Importance

!important

En CSS, il existe une syntaxe spéciale qui permet à une règle de toujours prévaloir sur les autres règles : !important. L'ajouter après la valeur de la propriété rend la déclaration incroyablement puissante.

Remarque : La seule façon de remplacer cette déclaration !important est d'inclure une déclaration du même attribut !important dans le code source ultérieur ou dans un code source avec une spécificité plus élevée.

Il est utile de savoir que !important existe pour que lorsque vous le rencontrez dans le code de quelqu'un d'autre, vous sachiez de quoi il s'agit. mais! Nous vous recommandons de ne jamais l’utiliser sauf en cas d’absolue nécessité. Une situation dans laquelle vous devrez peut-être l'utiliser est lorsque vous travaillez dans un CMS où vous ne pouvez pas modifier les modules CSS de base et que vous souhaitez vraiment remplacer un style qui ne peut pas être remplacé par d'autres moyens. Cependant, ne l’utilisez pas si vous pouvez l’éviter. Parce que !important change la façon dont la cascade fonctionne correctement, le débogage des problèmes CSS, en particulier dans les grandes feuilles de style, peut devenir très difficile.

Sources des feuilles de style

Il est important de noter que l'importance d'une déclaration CSS dépend de la feuille de style dans laquelle elle est spécifiée - les utilisateurs peuvent définir des feuilles de style personnalisées pour remplacer les styles du développeur, par exemple. Vous êtes peut-être malvoyant et souhaitez définir la taille de la police de toutes les pages Web que vous visitez pour qu'elle soit le double de la taille normale afin de faciliter la lecture.

Les déclarations contradictoires seront appliquées dans l'ordre suivant, cette dernière remplacera la déclaration précédente :

• Déclarations dans les feuilles de style user-agent (Pour exemple : le style par défaut du navigateur sans autres déclarations).

• Déclarations ordinaires dans les feuilles de style utilisateur (styles personnalisés définis par l'utilisateur).

• Une déclaration normale dans la feuille de style de l'auteur (c'est le style que nous avons défini, développeurs web).

• Déclaration importante dans la feuille de style de l'auteur

• Déclaration importante dans la feuille de style de l'utilisateur (priorité la plus élevée)

Il est raisonnable que la feuille de style du développeur Web remplace la feuille de style de l'utilisateur, de sorte que la conception puisse rester attendue, mais parfois l'utilisateur a une bonne raison de remplacer le style du développeur Web, comme mentionné ci-dessus, cela peut être fait en utilisant !important dans les règles de l'utilisateur.

Spécificité

La spécificité est essentiellement une mesure de la spécificité d'un sélecteur - à combien d'éléments il correspond. Comme le montre l'exemple ci-dessus, les sélecteurs d'éléments ont une très faible spécificité. Les sélecteurs de classe sont plus spécifiques et battront les sélecteurs d'éléments. Les sélecteurs d'ID ont une spécificité encore plus élevée et battront donc les sélecteurs de classe.

Le degré de spécificité d'un sélecteur est mesuré à l'aide de quatre valeurs (ou composants) différentes, qui peuvent être considérées comme des milliers, des centaines, des dizaines et des uns - en quatre. Quatre nombres simples dans une colonne :

• Milliers : ajoutez 1 point à cette colonne si la déclaration est dans un attribut de style (de telles déclarations n'ont pas de sélecteur, leur spécificité est donc toujours de 1000. ) sinon 0.

• Centaines : ajoutez 1 point pour chaque ID选择器就 inclus dans l'ensemble du sélecteur de cette colonne.

• Dizaines : ajoutez 1 point à la colonne pour chaque 类选择器, 属性选择器 ou 伪类 contenu dans l'ensemble du sélecteur.

• Chiffre des unités : ajoutez 1 point à la colonne pour chaque 元素选择器 ou 伪元素 inclus dans l'ensemble du sélecteur.

Remarque : les sélecteurs universels (*), les sélecteurs composés (+, >, ~, ' ') et les pseudo-classes négatives (:not) n'ont aucun effet sur la spécificité.

Exemple

选择器	千位	百位	十位	个位	合计值
h1	0	0	0	1	0001
#important	0	1	0	0	0100
h1 + p::first-letter	0	0	0	3	0003
li > a[href*="zh-CN"] > .inline-warning	0	0	2	2	0022
#important p > p > a:hover, 在一个元素的 <style> 属性里	1	1	1	3	1113

Remarque : Si plusieurs sélecteurs ont la même importance et la même spécificité, le sélecteur choisi dépend de l'ordre des sources.

Ordre des sources

Si plusieurs sélecteurs concurrents ont la même importance et la même spécificité, alors un troisième facteur aidera à décider quelle règle l'emporte - Les règles ultérieures l'emporteront sur les règles antérieures.

Héritage

L'héritage CSS est la dernière partie que nous devons examiner pour obtenir toutes les informations et comprendre quels styles sont appliqués aux éléments. L'idée est que certaines valeurs d'attribut appliquées à un élément seront héritées par les éléments enfants de cet élément, et d'autres non.

Les attributs hérités par défaut et ceux qui ne le sont pas sont pour la plupart conformes au bon sens. Si vous voulez en être sûr, vous pouvez vous référer à la référence CSS - chaque page de propriétés individuelle commencera par un tableau récapitulatif contenant divers détails sur l'élément, notamment s'il est hérité.

Les propriétés héritées sont l'un des contenus les plus basiques du CSS. Généralement, elles ne sont pas considérées spécialement, mais vous devez quand même vous rappeler :

• La plupart du modèle de boîte. les propriétés (telles que la bordure) ne seront pas héritées.

• L'héritage n'a pas de caractéristiques particulières et est inférieur à 0,0,0,0 tel que * {couleur : rouge;}

Contrôle de l'héritage

CSS fournit trois valeurs d'attribut générales spéciales pour gérer l'héritage :

• inherit : Cette valeur sera appliquée à la valeur d'attribut de l'élément sélectionné est défini pour être le même que son élément parent.

• initial : Cette valeur définit la valeur de l'attribut appliquée à l'élément sélectionné à la même valeur définie pour cet élément dans la feuille de style par défaut du navigateur. Si aucune valeur n'est définie dans la feuille de style par défaut du navigateur et que la propriété est naturellement héritée, la valeur de la propriété est définie sur inherit.

• unset : Cette valeur réinitialise l'attribut à sa valeur naturelle, c'est à dire que si l'attribut est naturellement hérité, alors il se comporte comme inherit, sinon il se comporte comme initial.

Résumé

Le nom Feuilles de style en cascade est approprié. L'approche adoptée par CSS consiste à mettre en cascade les styles ensemble, ce qui se fait grâce à une combinaison d'héritage et de spécificité. Les règles en cascade de CSS2.1 sont assez simples.

1. Trouver toutes les règles pertinentes contenant des sélecteurs correspondant à un élément donné.

2. Ordre toutes les déclarations appliquées à cet élément par poids explicite. Les règles avec le drapeau !important ont un poids plus élevé que les règles sans le drapeau !important . Trie toutes les déclarations appliquées à un élément donné par source. Il existe 3 sources : les créateurs, les lecteurs et les agents utilisateurs. Normalement, le style du créateur l’emporte sur celui du lecteur. Les styles de lecteur avec la balise !important sont plus forts que tous les autres styles, y compris les styles d'auteur avec la balise !important. Les styles d'auteur et de lecteur sont plus forts que les styles par défaut de l'agent utilisateur.

3. Ordonne toutes les déclarations appliquées à un élément donné par spécificité, les éléments avec une spécificité plus élevée étant plus pondérés que les éléments avec une spécificité plus faible.

4. Somme des commandes déclarations appliquées à un élément donné par ordre d’apparition. Plus une instruction apparaît tardivement dans une feuille de style ou un document, plus son poids est important. S'il y a une feuille de style importée dans la feuille de style, on considère généralement que l'instruction apparaissant dans la feuille de style importée vient en premier, ainsi que toutes les instructions de la feuille de style. la feuille de style principale vient en dernier.

Recommandations associées :

Structure et mise en page CSS

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!