Was bedeutet "Kaskadieren" in CSS?

Was bedeutet der Begriff "Cascading" in CSS genau? Ich bekomme unterschiedliche Ansichten, also frage ich hier. Ein Beispiel würde helfen.

"Kaskadieren" bedeutet in diesem Zusammenhang, dass es eine bekannte Methode geben muss, um zu bestimmen, welche bestimmte Stylesheet-Regel für welches HTML-Element gilt, da mehr als eine Stylesheet-Deklaration für ein bestimmtes HTML-Element gelten kann.

Die verwendete Regel wird ausgewählt, indem von den allgemeineren Deklarationen zu der erforderlichen spezifischen Regel übergegangen wird. Die spezifischste Erklärung wird gewählt.

Wenn ich CSS unterrichte, sage ich den Schülern immer, dass "Cascading Style Sheets" so etwas wie " Kampf gegen Stylesheets" bedeutet.

Eine Regel besagt, dass Ihr H3-Tag rot sein soll, eine andere Regel besagt, dass es grün sein soll - die Regeln widersprechen sich, wer wird gewinnen? Stylesheet Deathmatch!

OK, vielleicht ist das eine leichte Übertreibung, aber für Leute ohne Code und ohne Programmierung, die gerade erst anfangen, ist es weitaus zugänglicher als jede Vorstellung von einer Kaskade oder Vererbung.

Ich stelle ihnen natürlich sicher, dass es kein Problem für die Stylesheets ist, sich gegenseitig zu bekämpfen. So wurde die Sprache entworfen.

Håkon Wium Lie (CSS-Mitschöpfer) definiert "Kaskade" in seiner Doktorarbeit über CSS als "den Prozess, mehrere Stylesheets zu kombinieren und Konflikte zwischen ihnen zu lösen" https://www.wiumlie.no/2006/phd/

Der folgende Artikel beantwortet Ihre Frage perfekt.

Dies ist die Reihenfolge, in der Eigenschaften auf ein bestimmtes Element angewendet werden.

http://www.blooberry.com/indexdot/css/topics/cascade.htm

Sie müssen von außen nach innen darüber nachdenken. Wenn Sie eine Regel haben, die sich auf dem Body-Tag befindet, wird sie durch jedes untergeordnete Tag "kaskadiert". Wenn Sie eine Regel für ein Tag im Textkörper festlegen, wird diese Regel übernommen, und so weiter. Die Regel durchläuft also den gesamten Inhalt, sofern sie nicht durch eine Regel aus einem eingebetteten Tag unterbrochen wird.

Sie können die CSS-Verarbeitung so behandeln, dass ein Wasserfall mehrere Kaskaden enthält. Hier sind diese Kaskaden von oben nach unten in der Reihenfolge: (Die niedrigere kann dieselbe Eigenschaft in der höheren überschreiben.)

1. Benutzeragentendeklarationen
2. normale Benutzererklärungen
3. Autor normale Erklärungen
4. Autor wichtige Erklärungen
5. Benutzer wichtige Erklärungen

Weitere Informationen finden Sie in der Spezifikation

Die Kaskadierung besteht darin, den richtigen Wert aus mehreren Ursprüngen auszuwählen. Aber es ist anders als beim Sortieren . Nur etwas, das nicht in Ordnung ist, müssen wir sortieren. In CSS haben diese Ursprünge jedoch einen festen Vorrang. Und so könnte der Pseudocode wie folgt aussehen:

1. Initialisieren Sie das Wertearray.
2. wende die Werte vom 1. Ursprung an;
3. Wenden Sie die Werte vom 2. Ursprung an und überschreiben Sie sie, wenn der Wert vorhanden ist.
4. ...
5. Wenden Sie die Werte vom N-ten Ursprung an und überschreiben Sie sie, wenn die Werte vorhanden sind.

Aus dem Pseudocode geht hervor, dass es wie ein Wasserfall mit mehreren Kaskaden aussieht.

Eine Klarstellung, die helfen kann. Wenn Sie zwei Stylesheets einfügen und jeweils eine Regel mit der gleichen Spezifität enthält, gewinnt die zuletzt enthaltene. IE der letzte in der Kaskade hat den größten Einfluss.

(Dies ist nur eine Variation der beiden Regeln im selben Blatt - die letzte gewinnt, wenn alle anderen Dinge gleich sind.)

ZB gegeben

body {
    background:blue;
}

body {
    background:green;
}

dann ist der Hintergrund grün.

Diese Antwort ist für absolute Anfänger. Wenn Sie einen Überblick über diese Antwort wünschen, lesen Sie bitte meine zweite Antwort.

Beim Kaskadieren werden verschiedene Stylesheets kombiniert und Konflikte zwischen verschiedenen CSS-Regeln und -Deklarationen gelöst, wenn für ein bestimmtes Element mehr als eine Regel gilt . Denn wie Sie wahrscheinlich bereits wissen, kann eine Deklaration für eine bestimmte Stileigenschaft wie die Schriftgröße in mehreren Stylesheets und auch mehrmals in einem einzelnen Stylesheet erscheinen.

Um die Kaskadierung zu verstehen, müssen Sie mit der CSS-Analysephase beginnen, da in der Analysephase der erste Schritt darin besteht, widersprüchliche CSS-Deklarationen aufzulösen, und der zweite Schritt darin besteht, die endgültigen CSS-Werte zu verarbeiten.

Jetzt kann CSS auch aus verschiedenen Quellen stammen. Das häufigste ist das CSS, das wir Entwickler schreiben. Diese Erklärungen, die wir in unsere Stylesheets aufnehmen, werden als Autorenerklärungen bezeichnet. Eine andere Quelle können die Benutzerdeklarationen sein, bei denen es sich um vom Benutzer stammendes CSS handelt. Wenn der Benutzer beispielsweise die Standardschriftgröße im Browser ändert, ist dies Benutzer-CSS, und nicht zuletzt gibt es die Standard-Browserdeklarationen.

Wenn wir beispielsweise ein Ankertag für einen Link in unser HTML einfügen und es dann überhaupt nicht formatieren, wird es normalerweise mit blauem Text gerendert und rechts unterstrichen. Dies wird als Benutzeragenten-CSS bezeichnet, da es vom Browser festgelegt wird. Die Kaskade kombiniert also die CSS-Deklarationen, die aus all diesen verschiedenen Quellen stammen. Wie löst die Kaskade jedoch Konflikte, wenn mehr als eine Regel gilt?

Nun, es geht darum, die Wichtigkeit, die Selektorspezifität und die Reihenfolge der widersprüchlichen Deklarationen zu ermitteln, um festzustellen, welche Vorrang hat, und so funktioniert das. Zunächst beginnt die Kaskade damit, dass widersprüchliche Erklärungen von unterschiedlicher Bedeutung abgegeben werden, je nachdem, wo sie in ihrer Quelle deklariert sind. Die wichtigsten Deklarationen sind Benutzerdeklarationen, die mit dem wichtigen Schlüsselwort gekennzeichnet sind.

Die zweitwichtigsten Erklärungen sind die mit wichtig gekennzeichneten Autorenerklärungen. Drittens sind die normalen Autorendeklarationen, dann die normalen Benutzerdeklarationen und schließlich die am wenigsten wichtigen die Standardbrowserdeklarationen, was tatsächlich sehr sinnvoll ist, dass wir diese standardmäßig vom Browser kommenden Deklarationen leicht überschreiben können.

Jetzt haben wir oft nur eine Reihe widersprüchlicher Regeln in unseren Autoren-Stylesheets ohne ein wichtiges Schlüsselwort. Dies ist tatsächlich das häufigste Szenario, und in diesem Fall haben alle Erklärungen genau die gleiche Bedeutung. Was passiert nun in diesem Fall? Wenn dies der Fall ist, berechnet und vergleicht die Kaskade die Spezifitäten der Deklarationsselektoren, und so funktioniert es.

Inline-Stile haben die höchste Spezifität, gefolgt von IDs, Klassen, Pseudoklassen und Attributselektoren und schließlich dem am wenigsten spezifischen Element- und Pseudoelement-Selektor. Wenn wir also widersprüchliche Deklarationen mit der gleichen Wichtigkeit haben, die wir auf der letzten Folie gesehen haben, berechnen wir ihre Selektorspezifität basierend auf den Prioritäten, die ich Ihnen gerade gezeigt habe, aber lassen Sie uns sehen, wie wir die Spezifitäten tatsächlich anhand eines kleinen Beispiels berechnen, das ist immer am besten, richtig.

Aus dem obigen Beispiel haben alle diese Deklarationen die gleiche Bedeutung, da sie alle Autorendeklarationen sind. Berechnen wir also ihre Selektorspezifitäten, um herauszufinden, ob die Hintergrundfarbe entweder blau, grün, lila oder gelb ist, und so machen wir es. Die Spezifität ist eigentlich nicht nur eine Nummer, sondern eine Nummer für jede der vier Kategorien, die ich Ihnen zuvor gezeigt habe. Inline-Stile, IDs, Klassen, Pseudoelemente und Attribute und schließlich Elemente. Für jedes dieser Elemente wird die Anzahl der Vorkommen im Selektor gezählt.

Hier in Auswahl 1 haben wir natürlich keine Inline-Stile, da ein Inline-Stil in HTML geschrieben werden muss, was hier nicht der Fall ist, also eine Null. Wir haben hier auch keine IDs, also ist es wieder eine Null, aber wir haben eine Klasse, die Button-Klasse. Für die Klassenkategorie haben wir also eine Eins, und schließlich gibt es hier keinen Element-Selektor, also auch für diese Null, und das war's. Die Selektorspezifität ist Null, Null, Eins, Null.

Vergleichen wir es jetzt mit den anderen. Der nächste ist ebenfalls kein Inline-Stil, also Null für den ersten. Jetzt haben wir hier tatsächlich einen ID-Selektor für die Navigations-ID, also einen für die ID. Wir haben auch zwei Klassen, die nach rechts und nach rechts ziehen, also ist es eine Zwei für die Klassenkategorie, und schließlich gibt es hier auch zwei Element-Selektoren. Das nav-Element und das div-Element, was bedeutet, dass es auch zwei für die Elementkategorie sind. Schließlich ist die Spezifität für den Selektor Null, Eins, Zwei, Zwei, was eigentlich ein hochspezifischer Selektor ist.

Selektor Nummer drei ist sehr einfach. Es ist nur eine Elementauswahl und daher ist die Spezifität Null, Null, Null, Eins.

Nun der letzte, Selektor Nummer vier. Zuerst haben wir wieder die Navigations-ID, also eine für die ID. Als nächstes haben wir eine Klasse, die Button-Klasse, und auch eine Pseudo-Klasse, die schwebt, was sie für die Klassenkategorie insgesamt zu zwei macht. Da es auch einen Elementwähler gibt, ist die endgültige Spezifität Null, Eins, Zwei, Eins.

Lassen Sie uns nun wissen, wie wir diese Zahlen tatsächlich verwenden, um herauszufinden, welcher der Selektoren zutrifft. Wir beginnen, die Zahlen von links nach rechts zu betrachten, beginnend mit der spezifischsten Kategorie, den Inline-Stilen. Wenn es einen Selektor mit einem für Inline-Stile gibt, gewinnt er gegen alle anderen Selektoren, da dies die spezifischste Kategorie ist. Nun, das ist hier nicht der Fall, also gehen wir weiter zu den IDs. Wir sehen, dass die Selektoren zwei und vier hier eine Eins haben, während die anderen Null haben, so dass die mit Null aus dem Spiel sind, weil sie weniger spezifisch sind als die Selektoren zwei und vier mit den IDs.

Da beide Selektoren einen in der Kategorie IDs haben, müssen wir fortfahren und die Klassen überprüfen. Beide haben eine Zwei in dieser Kategorie, die immer noch ein Unentschieden zwischen ihnen hat, und schließlich hat in der Elementkategorie der Selektor zwei eine Zwei, während der Selektor vier nur eine hat, und so haben wir hier einen Gewinner. Der Selektor Nummer zwei ist der spezifischste Selektor von allen und gibt unserer Schaltfläche einen grünen Hintergrund.34 Der Wert der Gewinnerdeklaration wird als kaskadierter Wert bezeichnet, da er das Ergebnis der Kaskade ist.

Wir beginnen also mit einer Reihe deklarierter Werte, in diesem Fall Blau, Grün, Lila und Gelb. Einer von ihnen gewinnt und wird zum kaskadierten Wert, der in unserem Beispiel grün ist.

Stellen Sie sich nun vor, Sektor vier hätte auch zwei Elemente, dann hätten beide Selektoren zwei und vier genau die gleiche Spezifität, richtig. Also, was passiert in diesem Fall und ich verspreche Ihnen, dass es jetzt fast vorbei ist, okay. Wenn zu diesem Zeitpunkt noch ein Gleichstand besteht, gilt die letzte im Code geschriebene CSS-Deklaration. Wenn also alles gleich ist und alle Deklarationsselektoren dieselbe Spezifität haben, ist es einfach die letzte Deklaration, die zum Formatieren des ausgewählten Elements verwendet wird.

Es ist ein Prozess, der verwendet wird, um die Konflikte in der Stylesheet-Spezifikation zu lösen.

Dies ist in erster Linie der Konfliktlösungsprozess, der gemäß der in CSS genannten Priorität durchgeführt wird.

CSS steht für Cascading Style Sheet. Aufgrund ihrer Natur überschreiben Stile weiter unten äquivalente Stile gleichwertige Stile weiter oben (es sei denn, Stile höher sind spezifischer). Wir können daher am Anfang eines Stylesheets Basisstile festlegen, die für alle Versionen unseres Designs gelten, und dann relevante Abschnitte mit Medienabfragen weiter unten im Dokument überschreiben.

Kaskadieren bedeutet, in Schritten nach unten zu gießen oder in Schritten hinzuzufügen. Stylesheets enthalten Codes zum Stylen eines HTML-Elements. Und die Art und Weise, wie die Codes in Stylesheets geschrieben werden, ist kaskadierend. Oder einfach Back-to-Back-Codes in Ebenen für jedes HTML-Element einer HTML-Seite im Stylesheet erstellen das kaskadierende Stylesheet.

Cascading ist ein Algorithmus, der jeder Stilregel Gewicht zuweist. Wenn mehrere Regeln gelten, hat die mit dem größten Gewicht Vorrang.

Wenn ein oder mehrere Stile auf dasselbe Element angewendet werden. CSS führt eine Reihe von Regeln aus, die als Kaskadierung bezeichnet werden. Dabei wird die Spezifitätsstärke der beiden angewendeten Stile bewertet und der Gewinner ermittelt, dh die Stilregel mit mehr Gewicht gewinnt, wenn die beiden Regeln haben Das gleiche Gewicht wie die zuletzt angewendete Regel gewinnt.

Kaskade und Spezifität, was Sie wissen müssen:

1. Mit! Wichtig gekennzeichnete CSS-Deklaration hat die höchste Priorität.

2. Verwenden Sie jedoch nur! Wichtig als letzte Ressource. Es ist besser, korrekte Spezifitäten zu verwenden - besser wartbarer Code!

3. Inline-Stile haben in externen Stylesheets immer Vorrang vor Stilen.

4. Ein Selektor, der 1 ID enthält, ist spezifischer als einer mit 1000 Klassen.

5. Ein Selektor, der 1 Klasse enthält, ist spezifischer als einer mit 1000 Elementen.

6. Der Universalwähler * hat keinen Spezifitätswert (0,0,0)

7. Verlassen Sie sich mehr auf die Spezifität als auf die Reihenfolge der Selektoren.

8. Verlassen Sie sich jedoch bei der Verwendung von Stylesheets von Drittanbietern auf die Reihenfolge - setzen Sie Ihr Autoren-Stylesheet immer an die letzte Stelle.

CSS doc    
p{font-size: 12pt;}
p{font-size: 14pt;}

<p>My Headline<p>

würde das p mit 14pt-Schriftart rendern, da es "näher" am eigentlichen Element liegt (externe Stylesheets werden von oben nach unten geladen). Wenn Sie ein verknüpftes Stylesheet verwenden und nach dem Verknüpfen mit dem externen CSS- Dokument etwas CSS in den Kopf Ihres Dokuments einfügen, gewinnt die Deklaration "in head", da sie dem definierten Element noch näher kommt. Dies gilt nur für gleichgewichtete Selektoren. Unter http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html finden Sie eine gute Beschreibung des Gewichts eines bestimmten Selektors.

Alles in allem könnten Sie "Vererbung" auch als Teil der Kaskade betrachten - für alle praktischen Zwecke. Dinge "kaskadieren" von Elementen.