Was sind die Vererbungseigenschaften von CSS? Zusammenfassung der vererbbaren und nicht vererbbaren Eigenschaften in CSS

Die sogenannte Vererbung bedeutet, dass das HTML-Element einige CSS-Attribute vom übergeordneten Element erben kann, auch wenn das aktuelle Element dieses Attribut nicht definiert. Welche Eigenschaften von CSS können also vererbt werden und welche nicht? Werfen wir einen Blick auf den Inhalt der Attributvererbung in CSS.

Werfen wir zunächst einen Blick auf die CSS-Priorität:

!important > Platzhalter > Vererbung > Browser-Standardeigenschaften.

Häufig verwendete nicht vererbbare CSS-Attribute

Anzeige: Gibt den Typ der Box an, die das Element generieren soll.

Textdekoration: Gibt die Box an Typ, der der Textdekoration hinzugefügt wird

text-shadow: Textschatteneffekt

white-space: Leerraumverarbeitung

Boxmodellattribute: Breite, Höhe, Rand, Rand, Polsterung

Hintergrundattribute: Hintergrund

Positionierungsattribute: schwebend, klar, Position, oben, rechts, unten, links, minimale Breite, minimale Höhe, maximale Breite, maximale Höhe, Überlauf, Clip, Z-Index

Häufig verwendete CSS-vererbbare Attribute:

Schriftart: kombinierte Schriftart

Schriftfamilie: Schriftfamilie der angegebenen Elemente

font-weight: Legen Sie die Stärke der Schriftart fest

font-size: Legen Sie die Größe der Schriftart fest

font-style: Definieren Sie den Stil der Schriftart

text-indent: Texteinzug

text-align: horizontale Textausrichtung

line-height: Zeilenhöhe

color: Textfarbe

Sichtbarkeit: Elementsichtbarkeit

Cursorattribut: Cursor

Alle Elemente können erben

1. Elementsichtbarkeit: Sichtbarkeit

2 . Cursor-Attribut: Cursor

Attribute, die von Inline-Elementen geerbt werden können

1. Schriftfamilienattribute

2 -align Die Textreihenattribute von

Elementen auf Blockebene können die Attribute

text-indent, text-align

inherit ( Inherit) value

Jedem Attribut kann der Wert „inherit“ zugewiesen werden, das heißt: Für ein bestimmtes Element nimmt das Attribut denselben Wert an wie der berechnete Wert des relativen Attributs von sein übergeordnetes Element. Geerbte Werte werden normalerweise nur als Fallback-Werte verwendet, die durch explizite Angabe von „inherit“ erweitert werden können, zum Beispiel:

p {font-size: inherit;}

Einschränkungen bei der Vererbung

Obwohl die Vererbung die Probleme wiederholter Definitionen verringert, können einige Eigenschaften nicht vererbt werden, z. B. Rahmen, Rand, Innenabstand und Hintergrund.

Diese Einstellung ist sinnvoll, wenn beispielsweise ein Rahmen für ein e388a4556c0f65e1904146cc1a846bee festgelegt wird und dieses Attribut auch vererbt wird zweifellos zu einem umwerfenden Ergebnis führen. Ebenso werden Eigenschaften, die sich auf die Elementposition auswirken, wie etwa Rand und Abstand, nicht vererbt.

Gleichzeitig wirkt sich der Standardstil des Browsers auch auf die Vererbungsergebnisse aus. Zum Beispiel:

body { font-size: 12px; }

c1a436a314ed609750bd7c7d319db4daDer Text des Level-2-Titels ist nicht 12 Pixel groß. // 2e9b454fa8428549ca2e64dfac4625cd Chinesischer H2-Text wird im Titel-2-Stil statt im 12-Pixel-Format angezeigt.

Dies liegt daran, dass der Standardstil des Browsers die CSS-Regel c1a436a314ed609750bd7c7d319db4da festlegt.

Gleichzeitig unterstützen einige ältere Versionen von Browsern die Vererbung möglicherweise nicht gut. Beispielsweise verlieren einige Browser alle geerbten Attribute, wenn sie auf f5d188ed2c074f8b944552db028f98a1 stoßen.

Nach der Vererbung können CSS-Eigenschaften nicht gelöscht, sondern nur neu definiert werden.

Empfohlene verwandte Artikel:

CSS-Vererbungselement attributes_html/css_WEB-ITnose

Attribute in CSS Anleitungen Wertvererbung verwenden

Einführung in die Attributwertvererbung in CSS

Das obige ist der detaillierte Inhalt vonWas sind die Vererbungseigenschaften von CSS? Zusammenfassung der vererbbaren und nicht vererbbaren Eigenschaften in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!