Detaillierte Erläuterung des CSS-Kaskadenmechanismus

CSS (Cascading Style Sheet)

Kaskadierung in Cascading Style Sheets bedeutet, dass Stile von einer Ebene zur anderen in der Dokumentstruktur weitergegeben werden und ihre Aufgabe darin besteht, den Browser entscheiden zu lassen, was in mehreren Quellen verwendet werden soll . , um Stilattribute aus welcher Quelle für eine Beschriftung anzuwenden.

Kaskadierung ist ein mächtiger Mechanismus. Das Verständnis von Kaskaden kann Ihnen dabei helfen, CSS auf die wirtschaftlichste und wartbarste Art und Weise zu schreiben und das ideale Erscheinungsbild des Dokuments zu erstellen, das Sie sich wünschen.

Quelle der Stile

Zuallererst sollte im Browser ein Browser-Stylesheet (Standard-Stylesheet) versteckt sein, da jedes Tag Stile hat, ohne dass etwas geschrieben werden muss. Beispielsweise wird der Text im h1-Tag in größerer Fettschrift angezeigt, der Text im em-Tag in Kursivschrift usw., alles wird automatisch hinzugefügt.

Zweitens gibt es das Benutzer-Stylesheet. Sehr selten, kann aber großen Komfort bieten. Beispielsweise können sehbehinderte Benutzer die Grundgröße des Textes selbst erhöhen (zum Beispiel: body {font-size:200 %}) oder erzwingen, dass Text in lesbaren Farben relativ zueinander angezeigt wird. Barrierefreiheitsfunktionen in Windows können Stylesheets hinzufügen.

Schließlich gibt es ein Designer-Stylesheet. Es wurde von Webentwicklern geschrieben.

Die Reihenfolge, in der Browser Stilquellen behandeln:

Standard-Browser-Stylesheet

Benutzer-Stylesheet

Designer-Stylesheet

Im Designer eingebettete Stile

Designer-Inline-Stile

Wenn der Browser an den entsprechenden Positionen in der obigen Reihenfolge nach Stilen sucht und auf den für ein bestimmtes Tag definierten Attributwert stößt, werden die Einstellungen für das entsprechende Tag angezeigt Das Etikett wird aktualisiert. Der Browser definiert den Stil der Beschriftung im Standard-Stylesheet. Wenn der Stil auch an anderer Stelle für die Beschriftung definiert ist, aktualisiert der Browser die Einstellung auf den im Dokument definierten Wert.

Dies sind die grundlegenden Arbeitsprinzipien des Stapelns.

Kaskadierungsregeln

Regel 1: Finden Sie alle Erklärungen guter Attribute, die für jedes Element gelten.

Regel 2: Sortieren Sie nach Reihenfolge und Wichtigkeit. Der Browser prüft nacheinander die fünf Stilquellen und legt alle passenden Attribute fest. Setzt ein späterer Ursprung erneut ein passendes Attribut, aktualisiert der Browser ggf. den Wert des Attributs und wiederholt den Vorgang.

Regel 3: Nach Relevanz sortieren. In Situationen, in denen es schwierig ist, ein Urteil zu fällen (z. B. wenn zwei Regeln mit demselben Tag übereinstimmen und aus derselben Stilquelle stammen), kann die Relevanz den Gewinner der Regel bestimmen.

Beispiel 1: Das Stylesheet enthält diese beiden Regeln,

P {font-size:12px;}

p.largetext { font-size:16px }

Dann erscheint der Text in

Ein Stück Text

Denn Letzteres ist zielgerichteter.

P {font-size:12px;}

.largetext { font-size:16px;🎜>

Beide Regeln stimmen mit demselben Tag überein, aber aufgrund der Klasse The Der Selektor hat Vorrang, daher wird der Text mit 16 Pixeln angezeigt. Der konkrete Grund ist: Das numerische Targeting des Label-Selektors ist 1, während das Targeting des Klassen-Selektors 1-0 ist. Es gibt ein Problem bei der Berechnung des Targetings des Selektors. Für jeden Stil gibt es ein einfaches Bewertungssystem. Die Bewertung wird in den folgenden drei Werten ausgedrückt:

A – B – C. Die Bewertungsmethode ist wie folgt:

1. Wenn im Selektor eine ID vorhanden ist, muss 1 zu A hinzugefügt werden.

2. Wenn im Selektor eine Klasse vorhanden ist, muss 1 zu B hinzugefügt werden.

3. Wenn im Selektor ein Elementname (Tag-Name) vorhanden ist, muss 1 zu C hinzugefügt werden.

4 Das Endergebnis wird basierend auf dem dreistelligen Zertifikat berechnet. (Das Ergebnis ist keine echte dreistellige Zahl, aber in den meisten Fällen ist es einfacher, sie als dreistellige Zahl zu interpretieren. Im Vergleich zu 0-1-12 und 0-2-1 ist dies beispielsweise letztere (spezifischere Sexualität)

Sehen Sie sich die folgenden Beispiele an:

P 0 – 0 – 1 Targetedness = 1 >

p#largetext 1 – 0 – 1 Targeted=101

body p#largetext 1 – 0 – 2 Targeted=102

body p#largetext ul.mylist 1 – 1 – 3 Targeted=113

body p#largetext mylist li 1 – 1 – 4 Gezielt=114

Regel 4: In der Reihenfolge sortieren. Wenn zwei Regeln genau das gleiche Gewicht haben, hat die in der Stapelreihenfolge niedrigste Regel Vorrang.

Spezifität ist wichtiger als Reihenfolge, daher haben Regeln mit höherer Spezifität Vorrang vor weniger spezifischen Regeln, die in der Kaskade weiter unten liegen.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des CSS-Kaskadenmechanismus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!