简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

不言
Freigeben： 2018-07-27 16:30:04
Original
15747 Leute haben es durchsucht

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

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; }
Nach dem Login kopieren

Der Text des Level-2-Titels ist nicht 12 Pixel groß. //

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

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 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!

Verwandte Etiketten：
css属性继承
Quelle：php.cn
Vorheriger Artikel：Was ist ein CSS-Selektor? Zusammenfassung der grundlegenden CSS-Selektoren (neun Typen) Nächster Artikel：Was sind die Merkmale von CSS? Analyse der drei Merkmale von CSS (Vererbung, Priorität und Kaskadierung)
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
Neueste Artikel des Autors
Aktuelle Ausgaben
CSS-Stile werden nicht auf die Website angewendet Ich erstelle eine Website mit Bootstrap5, aber die index.css-Eigenschaften werden nicht au...
Aus 2024-04-06 17:12:23
0
1
336
Die Listenelementsymbole (<ul> und <ol>) im Stammknoten können in CSS nicht angezeigt und entfernt werden, und das Problem overflow-x:hidden kann nicht entfernt werden. Ich arbeite gerade an einer Webseite und habe Probleme mit meinen Listenelementen. Die Pun...
Aus 2024-04-04 16:38:22
0
1
3617
Wie verwende ich CSS-Selektoren, um auf div-Elemente abzuzielen, die bestimmte Attribute oder Tags enthalten? Ich arbeite an einem POS-System, das eine Website generiert. Der größte Teil des Codes ist...
Aus 2024-04-03 22:25:59
0
1
277
So positionieren Sie ein Div neben einer Seitenleiste, sodass das Div beim Öffnen der Seitenleiste nach links verschoben wird Immer wenn ich die Seitenleiste öffne, wird das Hauptinhalts-Div unterhalb der Seitenleist...
Aus 2024-04-03 14:47:21
0
1
325
Was ist das moderne Äquivalent von LESS string-set? Ein Beispiel für String-Sets und ihre Verwendung finden Sie unter Verwenden von LESS-Strin...
Aus 2024-04-02 13:29:36
0
1
361
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！