Heim > Web-Frontend > Front-End-Fragen und Antworten > Was ist CSS-Kaskadierung?

Was ist CSS-Kaskadierung?

藏色散人
Freigeben: 2023-01-05 16:07:56
Original
3644 Leute haben es durchsucht

CSS-Kaskadierung ist eine Grundfunktion von CSS. Es handelt sich um einen Algorithmus, der definiert, wie Attributwerte aus mehreren Quellen zusammengeführt werden. CSS-Kaskadierung bedeutet, dass CSS-Stile Konflikte basierend auf Kaskadierungsregeln behandeln, wenn dasselbe Attribut für dasselbe konfiguriert wird Element, wählen Sie das vom CSS-Selektor angegebene Attribut mit hoher Gewichtung aus.

Was ist CSS-Kaskadierung?

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.

Was ist CSS-Kaskadierung?

Kaskadierung ist ein grundlegendes Merkmal von CSS, einem Algorithmus, der definiert, wie Eigenschaftswerte aus mehreren Quellen kombiniert werden. Es ist der Kern von CSS, und der vollständige Name von CSS, Cascading Style Sheets, unterstreicht diesen Punkt.

CSS-Kaskadierung bedeutet, dass ein CSS-Stil, wenn er dasselbe Attribut für dasselbe Element konfiguriert, Konflikte basierend auf den Kaskadierungsregeln (Gewichtung) behandelt und das vom CSS-Selektor angegebene Attribut mit hoher Gewichtung auswählt. Es wird im Allgemeinen auch als hoch beschrieben -Gewichtsüberlagerung. Geringes Gewicht, daher auch Stapelung genannt.

Jeder CSS-Selektor hat eine Gewichtung. Wenn zwei Selektoren gleichzeitig dasselbe Attribut desselben Elements konfigurieren (z. B. legt einer die Farbe Rot und der andere die Farbe Schwarz fest), entsteht ein Konflikt und die Lösung Der Konflikt wird sein: Es ist das Gewicht des CSS-Selektors. Derjenige mit dem höheren Gewicht überschreibt den mit dem niedrigeren Gewicht.

Kaskadierung bedeutet, dass der Stil des Tags der oberen Ebene automatisch auf alle Tags der unteren Ebene übernommen wird. Beispielsweise wird der für die Tag-Auswahl festgelegte Schriftstil für automatisch übernommen. p> unter , es sei denn,

überschreibt den entsprechenden Stil.

Kaskadierung bezieht sich auf die Priorität von Stilen. Wenn ein Konflikt auftritt, hat derjenige mit der höheren Priorität Vorrang:

  • Entwicklerstil > Browserstil (es sei denn, das !important-Tag wird verwendet)

  • ID-Selektor > (Pseudo-)Klassenselektor > Elementselektor

  • Wenn die Gewichte gleich sind, wird der später definierte Stil verwendet

Der CSS-Kaskadierungsalgorithmus erwartet, durch Auswahl den richtigen Wert für die CSS-Eigenschaft festzulegen CSS-Deklarationen. CSS-Deklarationen können aus verschiedenen Quellen stammen:

1 Der Browser verfügt über ein grundlegendes Stylesheet, um den Standardstil für jede Webseite festzulegen. Diese Stile werden zusammenfassend als **User-Agent-Stile** bezeichnet. Einige Browser tun dies, indem sie echte Stylesheets verwenden, während andere es durch Code emulieren, aber in beiden Fällen sollte es nicht erkennbar sein.

Und einige Browser ermöglichen es Benutzern, den Benutzeragentenstil zu ändern. Obwohl der HTML-Standard den Benutzeragentenstilen viele Einschränkungen auferlegt, gibt es für Browser noch viel zu tun und es wird erhebliche Unterschiede zwischen verschiedenen Browsern geben.

Um die Entwicklungskosten zu senken und die für die Ausführung von Stylesheets erforderliche Grundumgebung zu reduzieren, verwenden Webentwickler normalerweise ein CSS-Reset-Stylesheet, um allgemeine Attributwerte in einen bestimmten Zustand zu zwingen.

2. Der Autor der Webseite kann den Stil des Dokuments definieren, der das gebräuchlichste Stylesheet ist. In den meisten Fällen werden mehrere Stylesheets dieses Typs definiert, die das Erscheinungsbild und die Erfahrung der Website, also das Thema, darstellen.

3. Leser können als Browserbenutzer benutzerdefinierte Stylesheets verwenden, um ihr Erlebnis anzupassen.

Obwohl CSS-Stile aus diesen verschiedenen Quellen stammen, überschneiden sich ihre Bereiche und der Kaskadenalgorithmus definiert, wie sie interagieren.

【Empfohlenes Lernen:

CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWas ist CSS-Kaskadierung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage