Qu'est-ce que la cascade CSS

La cascade CSS est une fonctionnalité de base de CSS. Il s'agit d'un algorithme qui définit comment fusionner les valeurs d'attribut de plusieurs sources ; la cascade CSS signifie que lorsque les styles CSS configurent le même attribut pour le même élément, il est basé sur des règles en cascade qui sont utilisées pour gérer les conflits, en choisissant d'appliquer l'attribut spécifié par le sélecteur CSS avec le poids le plus élevé.

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

Qu'est-ce que la cascade CSS ?

La cascade est une fonctionnalité fondamentale de CSS, un algorithme qui définit comment combiner les valeurs de propriétés provenant de plusieurs sources. Il est au cœur du CSS, et le nom complet du CSS, Cascading Style Sheets, souligne ce point.

La cascade CSS signifie que lorsque le style CSS configure le même attribut pour le même élément, il gère les conflits en fonction des règles de cascade (poids) et sélectionne l'attribut spécifié par le sélecteur CSS avec un poids élevé. généralement décrits comme ceux avec des poids plus élevés couvrent ceux avec des poids plus faibles, c'est pourquoi on l'appelle également empilement.

Chaque sélecteur CSS aura un poids. Lorsque deux sélecteurs configurent le même attribut du même élément en même temps (par exemple, l'un définit la couleur : rouge et l'autre la couleur : noir), un conflit se produira. , et La solution pour résoudre le conflit est le poids du sélecteur CSS, le poids le plus élevé remplaçant le poids le plus faible.

La mise en cascade signifie que le style de la balise de niveau supérieur sera automatiquement hérité de toutes ses balises de niveau inférieur. Par exemple, le style de police défini pour le sélecteur de balise défini pour aux balises sous

, sauf si

remplace le style associé en le remplaçant.

La cascade fait référence à la priorité des styles. Lorsqu'un conflit survient, celui avec la priorité la plus élevée prévaut :

• Style du développeur>Style du lecteur>Style du sélecteur de navigation (sauf si en utilisant la balise !important)

• sélecteur d'identifiant> (pseudo) sélecteur de classe> sélecteur d'élément

• poids En même temps, prenez le style défini plus tard

L'algorithme en cascade CSS s'attend à définir la valeur correcte pour la propriété CSS en sélectionnant les déclarations CSS. Les déclarations CSS peuvent provenir de différentes sources :

1. Le navigateur aura une feuille de style de base pour définir le style par défaut de n'importe quelle page Web. Ces styles sont collectivement appelés **Styles d'agent utilisateur**. Certains navigateurs le font en utilisant de vraies feuilles de style, tandis que d'autres le simulent via du code, mais dans les deux cas, cela devrait être indétectable.

Et certains navigateurs permettent aux utilisateurs de modifier le style de l'agent utilisateur. Bien que la norme HTML impose de nombreuses restrictions sur les styles des agents utilisateurs, les navigateurs ont encore beaucoup à faire et il y aura des différences significatives entre les différents navigateurs.

Afin de réduire les coûts de développement et de réduire l'environnement de base requis pour exécuter la feuille de style, les développeurs Web utilisent généralement une feuille de style de réinitialisation CSS pour forcer les valeurs d'attributs communs à un certain état.

2. L'auteur de la page web peut définir le style du document. Il s'agit de la feuille de style la plus courante. Dans la plupart des cas, plusieurs feuilles de style de ce type seront définies, qui constituent le visuel et l'expérience du site, c'est-à-dire le thème.

3. Les lecteurs, en tant qu'utilisateurs de navigateurs, peuvent utiliser des feuilles de style personnalisées pour personnaliser leur expérience.

Bien que les styles CSS proviennent de ces différentes sources, leurs portées se chevauchent et l'algorithme en cascade définit la manière dont ils interagissent.

[Apprentissage recommandé : Tutoriel vidéo 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!