Prendre un linge avec CSS

Qu'est-ce que le terme cascade

dire des feuilles de style? Cela signifie que d'une règle CSS dégringole dans le code, et parfois se cogne dans une règle de conflit.

La cascade est sur ce que les programmeurs appellent priorité: Qui gagne quand il ya un conflit? Plus d'un style peut appliquer à une étiquette donnée. Par exemple, il ya toujours le style du navigateur défini par défaut, tels que le noir comme couleur de texte par défaut. Si vous spécifiez une autre couleur dans une règle CSS, la cascade permet à votre règle de dominer, d'avoir la priorité sur le style intégré.

Mais comment le navigateur décider quel style gagne si deux règles CSS conflit avec l'autre? Si les styles contradictoires être combinés? Que faire si les styles sont totalement incompatibles - comme un seul style spécifiant italique et l'autre non-italique?

Spécificité Visualisation

Plusieurs facteurs déterminent le style qui l'emporte lorsque les styles se rencontrent: l'héritage, l'arbre de structure dans un document, et de la spécificité (ou proximité) d'un style. Probablement la règle de la collision la plus facile à comprendre implique où le style a été défini. Vos styles CSS peuvent être définies dans quatre grandes villes:

• Les styles par défaut du navigateur.

• Une feuille de style externe (un fichier .css contenant des définitions de style qui est appelé dans le document HTML avec un élément de lien).

• Une feuille de style intégré (styles définis dans le document HTML, l'intérieur de son tag. Ce genre de style est aussi parfois appelé interne).

• Un style de ligne (un style défini comme un attribut dans un élément HTML lui-même, et dont l'effet est limité à cet élément uniquement). Par exemple, ceci est un style typique de la ligne:

Cette liste illustre également l'ordre dans lequel les styles contradictoires "gagner" dans tout conflit. Pensez à l'ordre que le style plus proche les victoires d'éléments. Par exemple, le style de ligne - niché à l'intérieur de l'élément lui-même - est le plus proche. Donc, si plus d'un style est spécifiée pour cet élément, un style en ligne est le style utilisé. Cette closenessof le style à l'élément qui lui correspond est plus officiellement connu comme spécificité.

L'emplacement de style avec la deuxième priorité est la feuille de style interne située dans l'en-tête du document HTML. La troisième priorité va à la feuille de style externe - le fichier séparé. Et la priorité la plus faible, celle que tous les autres Trump, est le style par défaut. Après tout, la valeur par défaut est le regard que une feuille de style est censé modifier.

Voici un exemple illustrant la façon dont IE décide entre les couleurs bleu et rouge:

Je suppose que je suis bleu.

Pour tester ce document, tapez le code HTML dans le Bloc-notes, puis enregistrez-le en utilisant le nom du fichier EmTest.htm. Chargez cette page Web en double-cliquant sur son nom de fichier dans l'Explorateur Windows. Vous verrez la phrase Je suppose que je suis bleu apparaît en bleu. La

élément ici a été défini de deux façons contradictoires. Dans le style intégré, il est défini comme le rouge, mais cette définition est remplacée par la définition en ligne de la couleur bleue.

Essayez de retirer le style en ligne pour voir ce qui se passe. Modifiez la ligne

Je suppose que je suis bleu.

Retester par réenregistrer le fichier Bloc-notes vous venez de modifier.

Pas besoin de double-cliquez à nouveau sur ce nom de fichier dans l'Explorateur Windows pour charger la nouvelle version dans IE. Une fois que vous avez chargé un document, il est l'adresse par défaut dans IE - dans ce cas, une adresse d'un fichier .htm sur votre disque dur. Si vous modifiez le fichier que vous venez de faire dans cet exemple, tout ce que vous avez à faire pour voir la modification consiste à appuyer sur la touche F5. Ce "rafraîchit" IE.

Certaines personnes préfèrent utiliser intégré dans la vue de source du navigateur comme un moyen rapide de modifier et retester code CSS. Choisissez Vue -> Source. Vous pouvez apporter des modifications au code, puis enregistrez-le. Netscape et Firefox soulignent la syntaxe, que certains programmeurs trouvent utile.

Après avoir chargé la nouvelle version de ce document dans IE, la ligne Je suppose que je suis bleu est maintenant affiché en rouge. Le conflit entre les définitions de style intégré et inline a été résolu parce que vous avez supprimé le style en ligne.

Vous pouvez remplacer les règles normales de priorité en utilisant le commande! Important de préciser que ce style doit être utilisé, peu importe quoi. Une déclaration! Important remplace tous les autres définitions de style. Vous ajoutez la commande comme ceci:

p {color: blue} important-

En CSS1, styles déclarés importante par l'auteur de la page Web override même tous les styles que le lecteur a déclarées importante. Cependant, dans CSS2, importants styles de lecteurs emportent sur importants styles de l'auteur, et même plus quelconque styles de l'auteur, que ce soit important ou pas marqués.

Comprendre la spécificité de CSS

Le terme spécificité est également utilisé pour décrire une deuxième façon qu'un navigateur calcule quel style gagne quand styles conflit. Tout d'abord, le navigateur cherche la proximité - mais que faire si la proximité est identique? Voilà où cette seconde technique est appliquée.

Imaginez, par exemple, que deux feuilles de style différents sont référencés par le même document HTML (oui, vous pouvez attacher plus que sur fichier CSS pour le code HTML d'une page Web donnée). Mais, dans l'une de ces feuilles, H1 est de style audacieux, et dans une autre feuille, il est en italique stylé. Quel est le navigateur pauvres à faire dans ce cas? Quels spécification victoires?

Contrairement aux exemples de collision de style précédemment dans ce chapitre, où proximité pourrait être utilisé pour déclarer un gagnant, là, vous avez deux styles situés au même degré de proximité (la même spécificité). Ces deux définitions de style sont situés dans des feuilles de style externes.

Dans ce cas, le navigateur fait un peu de mathématiques bizarre de prendre la décision sur le style à utiliser. Comme avant, le style plus "spécifique" gagne. Mais ce qui compte comme spécificité à ce concours? Il est pas le même que le facteur "proximité". Le navigateur doit faire un peu de calcul étrange, mais vous ne peut pas vraiment appeler thismath. Il est juste un type étrange de l'accumulation de valeurs où certains styles ont des ordres de grandeur plus de poids que d'autres. Ne vous embêtez pas votre jolie tête à propos de ce genre de choses si vous ne trouvez pas de calculs particuliers intéressant.

Qu'est-ce que le navigateur faire pour calculer la spécificité de deux styles concurrents si leur facteur "proximité" est identique? Trois choses:

• Regarde un style et compte le nombre de attributs ID il a, le cas échéant

• Compte le nombre d'attributs de classe, le cas échéant

• Compte le nombre de sélecteurs (vous pouvez grouper des sélecteurs dans un style comme ceci: h1, h2, h3)

Le navigateur ne puis ajouter ces chiffres ensemble, ce ne enchaîne simplement le chiffres. Peut-être cela est une sorte de calcul utilisée par les étrangers dans leur galaxie, mais je l'ai vous jamais entendu parler. Imaginez si vous avez obtenu le numéro 130 par le processus de concaténation suivante:

1 pomme, 3 oranges, les bananes 0 = 130

Ce processus donne des pommes dix fois le «poids» des oranges, et 100 fois le poids de bananes. Voici quelques exemples montrant comment cela fonctionne lorsqu'il est utilisé pour déterminer la spécificité dans un CSS. Juste faire semblant que vous êtes de retour dans de troisième année la classe de mathématiques.

Attention, la classe! Quel est le nombre de spécificité pour ce sélecteur?

ul h1 li.red {color: jaune}

Quiconque obtenir la réponse 13?

La bonne réponse est 13. Vous avez

0 ID, attribut de la classe 1 (rouge), et 3 sélecteurs (h1 ul li)

Ce "additionne", pour ainsi dire, à 013. Maintenant, kiddies, qui peuvent expliquer comment vous obtenez une spécificité de 1 pour la définition de sélecteur suivant?

H1 {color: bleu-}

Après la spécificité a été déterminée, le nombre le plus élevé gagne. Supposons que deux styles sont en conflit parce qu'ils définissent tous deux la couleur de H1, mais définissent différemment. Mais parce que l'une définition a une valeur de spécificité de 13 et l'autre a seulement 1, le titre H1 est jaune, pas bleu.

Que faire si deux règles se révèlent avoir la même spécificité? Dans ce cas (en supposant que les deux sont dans une feuille de style, ou autrement sont les mêmes "proximité" à la balise HTML), la règle qui a été spécifié dernières victoires.