Zwei spezielle Werte in CSS werden verwendet, um die Vererbungs- und Initialisierungsmethoden der Kaskade zu steuern

Es gibt zwei spezielle Werte, die jeder Eigenschaft in CSS zugewiesen werden können, um die Kaskade zu steuern: inherit und initial. Schauen wir uns diese beiden Sonderwerte an.

Verwenden des Schlüsselworts „inhere“

Manchmal möchten wir Vererbung anstelle eines kaskadierenden Werts verwenden. In diesem Fall können Sie das Schlüsselwort „inherit“ verwenden. Sie können es verwenden, um einen anderen Wert zu überschreiben, sodass das Element den Wert seines übergeordneten Elements erbt.

Angenommen, wir möchten unserer Webseite eine hellgraue Fußzeile hinzufügen. Es gibt einige Links in der Fußzeile, wir möchten aber nicht, dass diese zu auffällig sind, da die Fußzeile nicht den Schwerpunkt der Webseite bildet. Daher müssen Sie die Links in der Fußzeile dunkelgrau färben (wie in der Abbildung unten gezeigt).

Der Link „Nutzungsbedingungen“ übernimmt die Textfarbe Grau

Normalerweise fügen wir allen Links auf einer Webseite eine Schriftfarbe hinzu (andernfalls wird der Stil des Benutzeragenten verwendet). Diese Farbe wird auch für den Link „Nutzungsbedingungen“ in der Fußzeile verwendet. Um die Links in der Fußzeile grau darzustellen, müssen Sie den Farbwert überschreiben. Fügen Sie Ihrem Stylesheet den folgenden Code hinzu.

a:link{ /* (nächste 3 Zeilen) globale Weblinkfarbe*/ 
  Farbe: blau; 
} 
... 
.Fußzeile{ 
  Farbe: #666; /* Fußzeilentext auf Grau setzen*/ 
  Hintergrundfarbe: #ccc; 
  Polsterung: 15px 0; 
  Textausrichtung: zentriert; 
  Schriftgröße: 14px; 
} 
.footer a{ 
  color: inherit; /* übernimmt die Textfarbe vom Fußbereich */ 
  Textdekoration: Unterstreichen; 
}

Der dritte Regelsatz überschreibt die blaue Linkfarbe und legt den Kaskadenwert der Fußzeilenlinks auf Übernahme fest. Daher erbt es die Farbe des übergeordneten Elements.

Zusammenfassen

Dies ist das Ende dieses Artikels über zwei spezielle Werte in CSS, die zur Steuerung der Kaskade verwendet werden: inherit und initial. Weitere relevante CSS-Spezialwerte zur Steuerung der Kaskade finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!