Zusammenfassung der Kerngrundlagen von CSS

Der heutige Artikel integriert das bisherige CSS-Ergänzungswissen.

Ich finde das bisherige Wissen über CSS etwas verwirrend, deshalb werde ich es heute klären.

Cascading Style Sheet

Was bedeutet Kaskadierung? Warum ist es so wichtig, dass dieses Wort in seinem Namen enthalten ist?

Kaskadierung kann einfach als Konfliktlösung verstanden werden.

Was ist Konflikt?

bedeutet, demselben Element denselben Stil hinzuzufügen, nachdem es mit verschiedenen Selektoren ausgewählt wurde.

Die Prioritätsregel kann ausgedrückt werden als

Inline-Stil>ID-Stil>Kategoriestil>Tag-Stil

Auf einer komplexen Seite kann ein bestimmtes Element den Stil von vielen erhalten Beispielsweise ist für einen bestimmten

-Ebenentitel einer Website die Verwendung von Grün als Ganzes festgelegt, für eine spezielle Spalte muss jedoch Blau verwendet werden, daher müssen Sie in der Spalte

verwenden . Überschreiben Sie allgemeine Stileinstellungen. Auf einer sehr einfachen Seite wird es nicht schwierig sein, solche speziellen Anforderungen umzusetzen.

Aber wenn die Struktur der Website sehr komplex ist, kann es durchaus sein, dass der Code sehr unübersichtlich wird und möglicherweise nicht gefunden wird

Von welcher Regel der Stil eines bestimmten Elements herrührt. Daher ist es notwendig, das Prinzip der „Kaskadierung“ in CSS vollständig zu verstehen.

Die Berechnung der Priorität widersprüchlicher Stile ist ein relativ komplexer Prozess, der nicht nur mit der einfachen Prioritätsregel oben

vollständig beschrieben werden kann. Aber die Leser können einem allgemeinen Grundsatz folgen: „Je spezieller der Stil, desto höher die Priorität.“

Was das Besondere ist und wie man es positioniert, je spezieller es ist, lesen Sie bitte den folgenden Inhalt.

Spezifität:

Jeder Selektor hat Spezifität, und wenn ein Element zwei oder mehr widersprüchliche Attributdeklarationen hat, gewinnt diejenige mit der höheren Spezifität.

Die Spezifität eines Selektors wird durch die Komponenten des Selektors selbst bestimmt. Der Spezifitätswert wird in 4 Teilen ausgedrückt, zum Beispiel: 0,0,0,0.

Die spezifische Spezifität eines Selektors wird wie folgt bestimmt:

Für jede im Selektor angegebene ID Attributwert, fügen Sie eins zum zweiten Teil hinzu: 0,1,0,0.

Fügen Sie für jeden im Selektor angegebenen Klassenattributwert, jede Attributauswahl oder jede Pseudoklasse eins zum dritten Teil hinzu: 0, 0, 1, 0.

Fügen Sie für jedes im Selektor angegebene Element und Pseudoelement eins zum vierten Teil hinzu: 0,0,0,1.

Kombinatoren und Wildcard-Selektoren tragen nichts zur Spezifität bei.

Aber der Wildcard-Selektor hat keine Spezifität: 0,0,0,0.

Das Kombinationssymbol hat nicht einmal Null.

Beispiel:

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

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

.grape{color:purple} ist 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

Und die ersten 0 It ist für Inline-Stile vorbereitet, denn je früher es ist, desto höher ist die Priorität. Wenn die Positionen der Zahlen ungleich Null gleich sind, vergleichen Sie zuerst die Größe der vorherigen Zahlen,

, und dann Vergleichen Sie nach unten, bis die Zahlen nicht mehr relativ sind. Die Zahl mit der größeren Zahl hat die höhere Priorität.

Deshalb gibt es oben die grobe Prioritätsregel:

Inline-Stil>ID-Stil>Kategorie-Stil>Tag-Stil

Sie funktionieren einfach wie jeweils. Es gibt auch vier Vertreter von einige Abteilungen, und sie werden entsprechend ihrer Anzahl besetzt.

Wichtige Aussage !wichtig, das heißt, markieren Sie die Aussage, die Sie benötigen. Sie hat die höchste Priorität, sollte aber am Ende des deklarierten Werts stehen.

Vererbung:

Die Spezialität der Vererbung ist nicht einmal null, das heißt, es gibt keine Spezialität;

Es gibt einen großen Unterschied zwischen null Spezialität und keiner Spezialität Das heißt, ein Selektor mit einer Spezifität von 0 kann Stile zu Nachkommen hinzufügen,

, und obwohl die Vererbung auch Stile zu Nachkommen hinzufügen kann, gibt es Einschränkungen. Nur diejenigen mit Vererbungsfunktionen können zu Nachkommenelementen hinzugefügt werden, wie z. B. Farbe, usw. Margin-, Padding- und Border-Eigenschaften werden den Nachkommen nicht hinzugefügt.

Diejenigen mit dem gleichen Gewicht werden der Reihe nach verglichen. Je niedriger die Reihenfolge, desto höher die Priorität.

Höhere Spezifität ist stärker als niedrigere Spezifität

Also Reihenfolge der Pseudoklassendeklaration: link-visited-hover-active

LVHA (Abkürzung)

Wann :visited kommt nach ihnen, da die Gewichte gleich sind, wird ihre Reihenfolge überprüft und :visited wird nach ihnen gewinnen.

Dieses Problem tritt nicht auf, wenn keine einheitlichen Attribute geschrieben werden. Seien Sie also vorsichtig, wenn Sie dasselbe Attribut schreiben! ! ! !

Das Obige ist die Kerngrundlage von CSS.

Erweitern Sie dieses Wissen:

Umschließender Block:

Die Breite des umschließenden Blocks ist die Breite des übergeordneten Elements des enthaltenen Elements Breite, und die Breite des übergeordneten Elements ist die

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right=Containing block horizontal width

width, margin-left und margin-right können alle auf Auto eingestellt werden

und margin-left und margin-right werden gleichzeitig auf auto gesetzt, was zu einer Zentrierung führt , aber das ist ein Problem Bedingung:

1 Dieses Element muss ein Element auf Blockebene sein und darf nicht vom Dokumentfluss getrennt sein

2 Dieses Element hat die festgelegte Breite

Einstellungen „Rand oben“ und „Rand unten“ werden nicht vertikal zentriert. Wenn sie auf „Auto“ eingestellt sind, sind sie nur gleich Null.

Die sieben Attribute der gesamten horizontalen Länge sind die Attribute der obigen Berechnungsformel. Ihre Summe darf nicht größer sein als die gesamte horizontale Länge, und der Rand kann ein negativer Wert sein, was nicht gegen diese Regel verstößt Berechnung.

Hinweis: Nur die Marge kann negativ sein.

Wie es aussieht, wenn die Marge negativ ist, erfahren Sie selbst. Dieses Attribut scheint ziemlich illegal zu sein.

Die obige Zusammenfassung der Kerngrundlagen von CSS (empfohlen) ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe, dass Sie die chinesische PHP-Website unterstützen.

Weitere Artikel zur Zusammenfassung der Kerngrundlagen von CSS finden Sie auf der chinesischen PHP-Website!