Résumé de divers exemples de styles en cascade en CSS

CSS (Cascading Style Sheets) est utilisé pour spécifier la forme de présentation des documents HTML. Tout a une séquence, tout a une ancienneté. Dans des circonstances normales, aucune différence n’est visible, ce qu’on appelle l’égalité de tous les êtres vivants. Cependant, lorsque des conflits et des enchevêtrements surviennent, il est évident qu'il est impossible d'atteindre une équivalence complète et les différences identitaires apparaîtront dans l'ordre. La cascade est le processus par lequel le navigateur empile plusieurs sources de style et détermine finalement le résultat. Cet article va parler du rôle spécifique des styles en cascade CSS.

Tout d'abord, vous pouvez apprendre des cours gratuits liés au site Web chinois php

1. Apprendre"Apprenez HTML+CSS sur. du bout des doigts"Cascading CSSTutoriel

style de cascade CSS

1. Héritage de style CSS et cascade

Caractéristiques : Le sélecteur de balise sélectionnera toutes les balises spécifiées dans la page actuelle tag Le sélecteur n'a aucun rapport avec la hiérarchie de balises actuelle du code et peut être sélectionné tant qu'il se trouve sur la page actuelle.

sélection de l'identifiant : vous devez d'abord spécifier une balise pour définir la valeur de l'identifiant (la valeur de l'identifiant ne peut pas être répétée et est unique dans toute la page). Sélection de classe : donnez à l'étiquette un nom de classe et sélectionnez l'étiquette spécifiée via le sélecteur de classe.

2. Explication détaillée du mécanisme de cascade CSS

La cascade dans les feuilles de style en cascade signifie que les styles sont transmis d'un niveau à un autre dans la structure du document. La fonction consiste à laisser le navigateur décider à quelle source appliquer les attributs de style à une certaine balise parmi de nombreuses sources.

La cascade est une mécanique puissante. Comprendre les cascades peut vous aider à écrire du CSS de la manière la plus économique et la plus maintenable, et peut vous aider à créer l'apparence de document idéale que vous souhaitez.

3. Explication détaillée de l'héritage CSS et des fonctionnalités en cascade

Le premier P n'utilise pas de sélecteur, donc la couleur d'affichage par défaut du HTML (noir) est utilisée

Le deuxième P utilise le sélecteur de classe, donc la couleur du sélecteur de classe (rouge) est préférée

Le troisième P utilise à la fois les sélecteurs d'ID et de classe, en raison de la priorité du sélecteur d'ID Plus élevé que le sélecteur de classe, donc la couleur est affichée en bleu

Le quatrième P utilise un sélecteur en ligne et un sélecteur d'ID Étant donné que le sélecteur en ligne a une priorité plus élevée que le sélecteur d'ID, la couleur est affichée en jaune<.>

Le cinquième P utilise deux sélecteurs de classe en même temps. Le navigateur utilise la couleur définie par le premier sélecteur de classe lors de l'interprétation de la page Web, la couleur est donc violette

Le sixième P personnel utilise deux sélecteurs d'ID en même temps, mais comme le sélecteur d'ID ne peut être utilisé que pour une seule balise à la fois et qu'il est globalement unique, le navigateur le considère comme illégal et la couleur est affichée avec sa valeur par défaut (noir)

4.

Description détaillée de la feuille de style en cascade CSS

[attribut] Sélectionnez des éléments avec des attributs d'attribut.

[attribute=value] sélectionne les éléments avec un attribut d'attribut et une valeur d'attribut égale à value.

[attribute~=value] Sélectionne un élément qui a un attribut d'attribut et la valeur de l'attribut est une liste de mots séparés par des espaces, dont l'un est égal à valeur.

[attribute|=value] sélectionne les éléments E qui ont l'attribut att et dont la valeur d'attribut est une chaîne commençant par val et séparée par le connecteur "-".

[attibute^=value] correspond aux éléments E avec attribut d'attribut et dont la valeur commence par la valeur

[attribute$=value] correspond aux éléments E avec l'attribut d'attribut et dont la valeur se termine par la valeur

[attribut*=value] fait correspondre les éléments E avec les attributs d'attribut et les valeurs contenant la valeur

5

Analyser les feuilles de style CSS, l'héritage, la cascade et les valeurs d'attribut.

CSS possède des propriétés qui contrôlent le formatage de base (telles que la taille et la couleur de la police, etc.), des propriétés qui contrôlent la mise en page (telles que la position et le flottement, etc.) et déterminent également où les visiteurs changeront de page lors de l'impression. éléments de contrôle. De plus, il existe de nombreux autres attributs.

La feuille de style contient les règles qui définissent l'apparence de la page web. Chaque règle comporte deux parties principales : le sélecteur (sélection) et le bloc de déclaration (déclaration). Les sélecteurs déterminent quels éléments sont affectés et les blocs de déclaration sont constitués d'une ou plusieurs paires attribut-valeur qui spécifient ce qui doit être fait.

6.

Spécificité CSS, héritage et cascade

L'instruction marquée !important est appelée une instruction importante. Elle n'a pas de spécialité, mais elle doit être comparée à la non. -déclaration importante. Considérez-les séparément.

Plus précisément : les déclarations non importantes sont regroupées dans un groupe, et les conflits entre elles sont résolus à l'aide de spécificités. Les déclarations importantes sont regroupées dans un groupe, et les conflits entre elles sont résolus en interne. Les déclarations importantes ont toujours la priorité sur les déclarations non importantes ; .

Questions et réponses connexes

1 Comment un élément sans contexte en cascade peut-il avoir un z-index plus grand qu'un élément avec. un ?

2. La vue Web iOS charge les fichiers HTML, pas de problème sous 9.2, mais la mise en cascade horizontale apparaît en bas sous 8.1

[Recommandations associées]

1. Tutoriel vidéo gratuit sur le site Web php chinois : "php.cn Dugu Jiujian (2) - Tutoriel vidéo CSS"

2. : Résumé de l'exemple de DIV superposées 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!