Analyse der Vererbungsverwendung in CSS

Dieser Artikel stellt hauptsächlich eine Zusammenfassung der Vererbungsfähigkeiten in CSS vor. Die Verwendung von Vererbungsschlüsselwörtern in CSS ist das Grundwissen für das einführende Erlernen von CSS. Freunde, die es benötigen, können darauf zurückgreifen.

Es wird sein einfach, wenn Sie nicht aufpassen. Die Funktionen von Cascading Style Sheets werden ignoriert. Den meisten Entwicklern ist das Schlüsselwort „inherit“ bekannt, aber es gibt einige neue CSS3-Vererbungsfunktionen, die Ihnen möglicherweise nicht bekannt sind ...
Eigenschaft: inherit

Das Schlüsselwort „inherit“ steht für „Verwenden Sie alle angegebenen Werte, die dem übergeordneten Element zugewiesen sind“. Wenn im übergeordneten Element keine explizite Wertdefinition vorhanden ist, durchsucht der Browser den DOM-Baum, bis er das entsprechende Attribut findet. Wenn es nicht gefunden werden kann, wird der Standardwert des Browsers verwendet, zum Beispiel:

#myparent   
{   
    margin: 10px;   
    border: 1px solid #000;   
}   
/* use the same border as the parent */
#myparent p   
{   
    border: inherit;   
}

In der Praxis ist es selten notwendig, inherit zu verwenden. Viele nützliche Eigenschaften werden automatisch vererbt, wie z. B. Schriftart, Schriftgröße, Farbe usw.

Inheritis kann mit Zuversicht eingesetzt werden. Auch wenn IE6 und IE7 dies nicht unterstützen, wird Ihr Design dadurch nicht beschädigt.
property: initial;

Oh, ein neues CSS3-Schlüsselwort! initial setzt eine Eigenschaft auf ihren Anfangswert – den standardmäßig definierten Wert des Browsers, zum Beispiel:

body   
{   
    font-size: 0.5em;   
}   

/* reset paragraphs to 1em */
p   
{   
    font-size: initial;   
}

Ist es nützlich? Möglicherweise können Sie schließlich nicht sicherstellen, dass alle Browser denselben Standardwert haben.

Angemessene Unterstützung – Chrome, Firefox, Safari und Opera 15+. Es funktioniert nicht im IE und ich versuche mir die Umstände vorzustellen, unter denen dies ein katastrophales Problem wäre.
Eigenschaft: nicht gesetzt;

Dies ist etwas ungewöhnlich. Wenn unset verwendet wird, verhält es sich so, als ob ein vererbbarer Wert vorhanden wäre und vererbt wurde. Wenn kein vererbbarer Wert gefunden wird (z. B. eine nicht vererbbare Eigenschaft wie „box-shadow“), verhält es sich so, als würde es den Standardwert des Browsers erben.

Andererseits fallen mir nicht viele Szenarien ein, in denen die Funktion „Unset“ verwendet wird, und nur sehr wenige unterstützen dies derzeit.
All: [ inherit |. unset ];

Schließlich ist all eine Eigenschaft und kein Wert. Sie können „Inherit“, „Initial“ oder „Unset“ angeben, um alle Eigenschaften zu beeinflussen, z. B. das Zurücksetzen aller CSS-Eigenschaften auf die Standardeinstellungen des Browsers:

#mywidget   
{   
    all: initial;   
}

Wenn Sie Steuerelemente von Drittanbietern hinzufügen und Seitenstilkonflikte vermeiden möchten, klicken Sie hier kann ein optionales globales CSS-Feld sein.

Leider können Sie sich derzeit nicht auf eine strikte Konsistenz über alle Browser hinweg verlassen, sie ist jedoch dennoch eine nützliche Funktion.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Über CSS Dateikonfiguration von Normalize

Analyse der Verwendung von RGB-Farben in CSS

Das obige ist der detaillierte Inhalt vonAnalyse der Vererbungsverwendung in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!