Was sind benutzerdefinierte CSS-Eigenschaften (Variablen) und wie funktionieren Doppelstrich-Präfixe?

Benutzerdefinierte CSS-Eigenschaften mit vorangestelltem Doppelstrich verstehen

In Ihrem bereitgestellten Codeausschnitt sind Sie auf CSS-Eigenschaften mit vorangestelltem Doppelstrich (--) gestoßen. , wie etwa --color-link und --font-thin. Diese Eigenschaften gehören zu einer Reihe benutzerdefinierter CSS-Eigenschaften, bei denen es sich um benutzerdefinierte Eigenschaften handelt, die eine größere Flexibilität und Anpassung beim CSS-Stil ermöglichen.

Gemäß der W3C-Spezifikation für benutzerdefinierte Eigenschaften werden diesen Eigenschaften ein doppelter Bindestrich vorangestellt werden mit der folgenden Syntax definiert:

--<property-name>: <value>;

wobei --property-name der Name der benutzerdefinierten Eigenschaft ist und ist der gewünschte Wert für diese Eigenschaft.

Benutzerdefinierte Eigenschaften dienen mehreren Zwecken:

• Stilistische Flexibilität: Sie ermöglichen eine einfache Änderung von CSS-Eigenschaften über mehrere Elemente hinweg. Reduzierung der Notwendigkeit redundanter Deklarationen.
• Themenverwaltung: Benutzerdefinierte Eigenschaften können zur Vereinfachung der Definition themenspezifischer Variablen verwendet werden der Prozess des Wechsels zwischen verschiedenen Themen.
• Variablensubstitution: Sie ermöglichen die Verwendung von Variablen als Werte für andere CSS-Eigenschaften und bieten so eine größere Flexibilität beim Stil.

Mit der Funktion var() können Sie in anderen CSS-Deklarationen auf die Werte benutzerdefinierter Eigenschaften zugreifen. Im folgenden Code wird beispielsweise die Farbeigenschaft des Elements #foo h1 auf den Wert der benutzerdefinierten Eigenschaft --main-color gesetzt:

#foo h1 {
  color: var(--main-color);
}

Referenzinformationen

• [Benutzerdefinierte W3C-Eigenschaften Spec](https://www.w3.org/TR/css-variables/)
• [MDN-Webdokumente: Benutzerdefinierte CSS-Eigenschaften](https://developer.mozilla.org/en-US/ docs/Web/CSS/Using_CSS_custom_properties)
• [CSS-Tricks: Alles über Benutzerdefiniert Eigenschaften](https://css-tricks.com/custom-properties-all-the-things/)

Das obige ist der detaillierte Inhalt vonWas sind benutzerdefinierte CSS-Eigenschaften (Variablen) und wie funktionieren Doppelstrich-Präfixe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!