Résumé des bases de base du CSS

L'article d'aujourd'hui intègre les connaissances supplémentaires CSS précédentes.

Je pense que les connaissances précédentes sur CSS sont un peu déroutantes, je vais donc faire le tri aujourd'hui.

Feuille de style en cascade

Que signifie la cascade ? Pourquoi ce mot est-il si important dans son nom.

La cascade peut simplement être comprise comme une résolution de conflit.

Qu’est-ce qu’un conflit ?

signifie ajouter le même style au même élément après l'avoir sélectionné à l'aide de différents sélecteurs.

La règle de priorité peut être exprimée sous la forme

Style en ligne>Style d'ID>Style de catégorie>Style de balise

Dans une page complexe, un certain élément peut obtenir le style de plusieurs Par exemple, un certain titre de niveau

d'un site Web est configuré pour utiliser le vert dans son ensemble, mais une colonne spéciale doit utiliser du bleu, vous devez donc

dans la colonne. . Remplacez les paramètres de style courants. Dans une page très simple, il ne sera pas difficile de mettre en œuvre de telles exigences particulières,

Mais si la structure du site Web est très complexe, il est tout à fait possible que le code devienne très confus et ne soit pas trouvé

De quelle règle vient le style d'un certain élément. Il est donc nécessaire de bien comprendre le principe du « cascading » en CSS.

Le calcul de la priorité des styles conflictuels est un processus relativement complexe, et la simple règle de priorité ci-dessus

ne peut pas le décrire entièrement. Mais les lecteurs peuvent suivre un principe général selon lequel « plus le style est spécial, plus la priorité est élevée ».

Pour savoir en quoi cela est spécial et comment le positionner plus il est spécial, veuillez lire le contenu suivant.

Spécificité :

Chaque sélecteur a une spécificité, et si un élément a deux ou plusieurs déclarations d'attributs contradictoires, celui avec la spécificité la plus élevée l'emporte.

La spécificité d'un sélecteur est déterminée par les composants du sélecteur lui-même. La valeur de spécificité est exprimée en 4 parties, telles que : 0,0,0,0.

La spécificité spécifique d'un sélecteur est déterminée comme suit :

Pour chaque ID donné dans le sélecteur Valeur d'attribut, ajoutez-en un à la deuxième partie : 0,1,0,0.

Pour chaque valeur d'attribut de classe, sélection d'attribut ou pseudo-classe donnée dans le sélecteur, ajoutez un à la troisième partie : 0, 0, 1, 0.

Pour chaque élément et pseudo-élément donné dans le sélecteur, ajoutez un à la quatrième partie : 0,0,0,1.

Les combinateurs et les sélecteurs génériques ne contribuent en rien à la spécificité.

Mais le sélecteur de caractères génériques n'a aucune spécificité : 0,0,0,0.

Le symbole de combinaison n’a même pas zéro.

Exemple :

h1{color:red;} vaut 0,0,0,1

p em{color:purple} vaut 0,0,0,2

.grape{color:purple} est 0,0,1,0

p.b e.a{color:red } 0,0,2,2

#aa; {color:red;} 0,1,0,0

p#aa *[href]{color:red;} 0,1,1,1

Et le premier 0 Il est préparé pour les styles en ligne, car plus il est précoce, plus la priorité est élevée. Si les positions des nombres non nuls sont les mêmes, comparez d'abord la taille des nombres précédents,

, puis. comparez vers le bas jusqu'à ce que les nombres ne soient plus relatifs. Celui avec le plus grand nombre a une priorité plus élevée.

C'est pourquoi il existe une règle de priorité approximative ci-dessus :

Style en ligne>Style d'identification>Style de catégorie>Style de balise

Ils fonctionnent simplement comme chacun. Il y a également quatre représentants de certains départements, et ils sont assis en fonction de leur nombre.

Déclaration importante !important , c'est-à-dire marquez la déclaration dont vous avez besoin. Elle a la priorité la plus élevée, mais elle doit être placée à la fin de la valeur déclarée.

Héritage :

La spécialité de l'héritage n'est même pas nulle, c'est-à-dire qu'il n'y a pas de spécialité

Il y a une grande différence entre zéro spécialité et pas de spécialité ; c'est-à-dire qu'un sélecteur avec une spécificité de 0 peut ajouter des styles aux descendants,

, et bien que l'héritage puisse également ajouter des styles aux descendants, il existe des restrictions. Seuls ceux ayant des capacités d'héritage peuvent être ajoutés aux éléments descendants, tels que la couleur, etc. Les propriétés Margin, Padding et Border ne seront pas ajoutées aux descendants.

Ceux ayant le même poids seront comparés dans l'ordre. Plus l'ordre est bas, plus la priorité est élevée.

Une spécificité plus élevée est plus forte qu'une spécificité inférieure

Donc, ordre de déclaration des pseudo-classes : link-visited-hover-active

LVHA (abréviation)

Quand :visited vient après eux, puisque les poids sont les mêmes, leur ordre sera regardé, et :visited gagnera après eux.

Ce problème ne se produira pas si les attributs unifiés ne sont pas écrits. Soyez donc prudent lorsque vous écrivez le même attribut ! ! ! !

Ce qui précède est le fondement de base du CSS.

Développez ces connaissances :

Bloc contenant :

La largeur du bloc contenant est la largeur du parent de l'élément contenu width, et la largeur du parent est la

marge-gauche de chaque élément qu'il contient border-left padding-left width padding-right border-right margin-right=containing block horizontal width

La largeur, la marge gauche et la marge droite peuvent toutes être définies sur auto

Si la marge gauche et la marge droite sont définies sur auto en même temps, elles seront centrées, mais c'est conditionnel :

1. Cet élément doit être un élément de niveau bloc et non séparé du flux de documents

2. Cet élément a une largeur définie

marge. -top et margin-bottom ne seront pas centrés verticalement s'ils sont définis sur auto , ils ne seront égaux qu'à zéro.

Les sept attributs de la longueur horizontale totale. Ces sept attributs sont les attributs de la formule de calcul ci-dessus. Leur somme ne peut pas être supérieure à la longueur horizontale totale, et la marge peut être une valeur négative, ce qui ne viole pas cette règle. calcul.

Remarque : Seule la marge peut être négative.

Quant à quoi cela ressemble lorsque la marge est négative, faites-en l'expérience vous-même. Cet attribut semble tout à fait illégal.

Le résumé ci-dessus des bases de base du CSS (recommandé) est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère que vous soutiendrez le site Web PHP chinois.

Pour plus d'articles liés au résumé des bases de base du CSS, veuillez faire attention au site Web PHP chinois !