Einen Tumble mit CSS

Was bedeutet der Begriff Kaskade

bedeuten für Stylesheets? Es bedeutet, dass eine CSS-Regel durch den Code umfällt, und manchmal stößt in eine widersprüchliche Regel.

Die Kaskade ist über das, was Programmierer nennen Vorrang: Wer gewinnt, wenn ein Konflikt ist da? Mehr als ein Stil zu einem bestimmten Tag anwenden können. Zum Beispiel gibt es immer der Standard-Browser-Stil definiert, wie Schwarz als Standard-Textfarbe. Wenn Sie eine andere Farbe in einer CSS-Regel angeben, erlaubt die Kaskade die Regel, dominieren den Vorrang vor dem Einbau-Stil zu haben.

Aber wie entscheidet der Browser, welcher Stil gewinnt, wenn zwei CSS-Regeln miteinander in Konflikt geraten? Sollten sich die widerstreitenden Stile kombiniert werden? Was ist, wenn die Stile völlig unvereinbar sind - kursiv und die andere nicht kursiv wie ein Stil angibt?

Visualizing Spezifität

Mehrere Faktoren bestimmen, welche Art gewinnt, wenn Stile kollidieren: Erbschaft, die Strukturbaum in einem Dokument und die Spezifität (oder Nähe) Eines Stils. Wahrscheinlich ist die am leichtesten zu verstehen Kollisionsregel beinhaltet woher der Stil definiert wurde. Ihre CSS-Stile lassen sich in vier Hauptstandorten definiert werden:

• Die Standardstile des Browsers.
• Ein externes Stylesheet (ein CSS-Datei Formatdefinitionen enthält, die aus dem HTML-Dokument mit einem Link-Element verwiesen wird).
• Ein eingebettetes Stylesheet (Stile innerhalb des HTML-Dokuments, definiert in seinem -Tag. Diese Art von Stil ist auch manchmal genannt intern).
• Ein Inline-Stil (ein Stil als ein Attribut in einem HTML-Element definiert selbst, und deren Wirkung begrenzt nur auf dieses Element). Zum Beispiel ist dies ein typisches Inline-Stil:

Diese Liste zeigt auch die Reihenfolge, in der widerstreitenden Stile in jedem Konflikt "gewinnen". Denken Sie an die Ordnung wie der Stil nächste zu den Element gewinnt. Zum Beispiel ist die Inline-Stil - eingebettet direkt in das Element selbst - ist der nächste. Also, wenn mehr als ein Stil für dieses Element angegeben ist, ist ein Inline-Stil verwendet, der Stil. Diese closenessof den Stil auf das Element, das passt es mehr formal bekannt als Spezifität.

Der Stil Ort mit der zweithöchsten Priorität ist die interne Stylesheet im Header der HTML-Dokument befindet. Die dritthöchste Priorität geht an den externen Stylesheet - die separate Datei. Und die schwächste Priorität, derjenige, der alle anderen übertrumpfen, ist der Standardstil. Immerhin ist die Vorgabe der Blick, dass ein Stylesheet ändern sollte.

Hier ist ein Beispiel darstellt, wie IE zwischen blauen und roten Farben entscheidet:

Ich glaube, ich bin blau.

Um dieses Dokument zu testen, geben Sie den HTML-Code in den Editor, und speichern Sie es dann den Dateinamen EmTest.htm verwenden. Laden Sie diese Web-Seite durch einen Doppelklick auf den Dateinamen in Windows Explorer. Sie werden den Satz sehen Ich glaube, ich bin blau erscheinen in Blau. Das

Element hier wurde in zwei widersprüchliche Weise definiert. Im Embedded-Stil, es ist so rot definiert, aber diese Definition wird durch die Inline-Definition der Farbe Blau außer Kraft gesetzt.

Versuchen Sie, die Inline-Stil zu entfernen, um zu sehen, was passiert. Ändern Sie die Zeile zu

Ich glaube, ich bin blau.

Wiederholen Sie den Test durch erneutes Speichern Sie die Editor-Datei, die Sie gerade geändert.

Keine Notwendigkeit, doppelklicken Sie erneut auf diesen Dateinamen in Windows Explorer die neue Version in IE zu laden. Nachdem Sie ein Dokument geladen haben, ist es die Standardadresse in IE - in diesem Fall eine Adresse einer HTM-Datei auf Ihrer Festplatte. Wenn Sie diese Datei ändern, wie Sie gerade in diesem Beispiel getan hat, alles, was Sie tun müssen, um die Änderung zu sehen ist F5 drücken. Das "erfrischt" IE.

Einige Leute bevorzugen den Browser des Einbau-Source-Ansicht als eine schnelle Art und Weise zu modifizieren und erneut getestet CSS-Code zu verwenden. Wählen Sie Ansicht -> Quelle. Sie können Änderungen am Code vornehmen, und speichern Sie es dann. Sowohl Netscape und Firefox markieren Sie die Syntax, die einige Programmierer nützlich finden.

Nachdem Sie die neue Version dieses Dokuments in IE zu laden, die Leitung Ich glaube, ich bin blau Jetzt wird in rot dargestellt. Der Konflikt zwischen den eingebetteten und Inline-Formatdefinitionen behoben wurde, weil Sie die Inline-Stil gelöscht.

Sie können die normalen Regeln der Priorität außer Kraft setzen, indem Sie den! Wichtig Befehl angeben, dass dieser Stil verwendet werden muss, egal was passiert. An! Wichtige Erklärung Vorrang vor allen anderen Stildefinitionen. Sie fügen Sie den Befehl wie folgt aus:

p {color: blau wichtig-}

In CSS1 erklärt Stile vom Autor der Webseite überschreiben auch alle mögliche Arten wichtig, dass der Leser wichtig erklärt hat. Doch in CSS2 gewinnen wichtige Leser Stile über wichtige Autor Stile aus, und zwar über irgendein Autor Stile, ob wichtig markiert oder nicht.

Verstehen CSS Spezifität

Der Begriff Spezifität ist auch eine zweite Möglichkeit, dass ein Browser berechnet, welcher Stil gewinnt, wenn Stile Konflikt zu beschreiben. Zuerst sucht der Browser nach Nähe - aber was, wenn die Nähe identisch ist? Das ist, wenn diese zweite Technik angewendet wird.

Stellen Sie sich zum Beispiel, dass zwei verschiedene Stylesheets mit dem gleichen HTML-Dokument referenziert werden (ja, können Sie mehr als auf CSS-Datei auf eine bestimmte Webseite HTML-Code anhängen). Aber in einer dieser Lagen wird H1 Stil fett, und in einem anderen Blatt ist es gestylt kursiv. Was ist der arme Browser in diesem Fall zu tun? Welche Spezifikation gewinnt?

Im Gegensatz zu den Beispielen der Stil Kollision früher in diesem Kapitel, wo Nähe verwendet werden könnten, einen Sieger zu erklären, hier haben Sie beide Arten erhaltener an die sich gleichem Maße der Nähe (gleicher Spezifität). Beide Stildefinitionen werden in externen Stylesheets entfernt.

In diesem Fall führt der Browser ein wenig bizarr Mathe die Entscheidung darüber zu treffen, welche Art zu verwenden. Wie zuvor gewinnt die mehr "spezifischen" Stil. Aber was zählt als Besonderheit in diesem Wettbewerb? Es ist nicht das gleiche wie die "Nähe" Faktor. Der Browser hat ein bisschen seltsam Berechnung zu tun, aber man kann wirklich thismath nicht nennen. Es ist nur eine ungerade Art von Anhäufung von Werten, bei denen einige Arten als andere Größenordnungen mehr Gewicht haben. stören Ihren hübschen Kopf nicht über diese Dinge, wenn Sie nicht eigentümlich Berechnungen interessant finden do.

Was macht der Browser die Spezifität von zwei konkurrierenden Arten zu berechnen, wenn ihre "Nähe" Faktor identisch ist? Drei Dinge:

• Sieht in einem Stil und zählt die Anzahl der ID-Attribute es hat, wenn überhaupt
• Zählt die Anzahl der Klassenattribute, falls vorhanden
• Zählt die Anzahl der Selektoren (Sie können Gruppenwähler in einem Stil wie folgt aus: h1, h2, h3)

Der Browser funktioniert nicht, dann hinzufügen diese Zahlen zusammen-es nur verkettet die Ziffern. Vielleicht ist dies eine Art von Arithmetik von Aliens, die in ihr Galaxie, aber ich habe sicher noch nie davon gehört. Stellen Sie sich vor, wenn Sie die Zahl 130 durch die folgende Verkettung Prozess bekam:

1 Apfel, 3 Orangen, Bananen 0 = 130

Dieser Prozess gibt Äpfel zehnmal das "Gewicht" von Orangen und 100-fache Gewicht Bananen. Hier sind ein paar Beispiele, die zeigen, wie es funktioniert, wenn verwendet Spezifität in einem CSS zu bestimmen. Einfach so tun Sie dritten Klasse Math-Klasse sind wieder in.

Achtung, Klasse! Was ist die Besonderheit Nummer für diesen Wähler?

ul h1 li.red {color: gelb-}

Jeder Sie die Antwort auf 13?

Die richtige Antwort ist 13. Sie haben

0 IDs, 1 Klassenattribut (rot) und 3-Selektoren (ul h1 li)

Das "addiert", so zu sprechen, zu 013. Jetzt, Kiddies, die erklären kann, wie man eine Spezifität von 1 für die folgende Selektor Definition bekommen?

H1 {color: blau-}

Nachdem die Spezifität festgestellt wurde, gewinnt der höheren Nummer. Es sei angenommen, dass zwei Arten in Konflikt, weil sie sowohl die Farbe des H1 definieren, aber es anders definieren. Aber weil eine Definition eine Spezifität Wert von 13 hat und der andere hat nur 1 ist die H1 Überschrift gelb, nicht blau.

Was passiert, wenn zwei Regeln die gleiche Spezifität haben sich herausstellen? In diesem Fall (unter der Annahme, dass beide in einem Stylesheet sind, oder sonst sind die gleichen "Nähe" zu dem HTML-Tag), die Regel, die letzten Siege angegeben wurde.