Was sind Double-Dash-CSS-Eigenschaften und wie funktionieren sie?

Erkunden der rätselhaften Double-Dash-CSS-Eigenschaften

Möglicherweise sind Sie auf einen seltsamen CSS-Code gestoßen, bei dem Eigenschaftsnamen mit doppelten Bindestrichen vorangestellt sind. Hierbei handelt es sich nicht um reguläre CSS-Eigenschaften, sondern um benutzerdefinierte Eigenschaften, die in CSS3 eingeführt wurden.

Benutzerdefinierte Eigenschaften verstehen

Benutzerdefinierte Eigenschaften, auch CSS-Variablen genannt, ermöglichen Ihnen das Definieren und Wiederverwenden von Werten in Ihrem gesamten Stylesheet. Sie ermöglichen Flexibilität und Wartbarkeit durch die Zentralisierung von Designelementen.

Syntax und Verwendung

Benutzerdefinierte Eigenschaften werden innerhalb des Stammelements (:root) mit der folgenden Syntax deklariert:

:root {
  --property-name: property-value;
}

Sie können dann mit var() auf den benutzerdefinierten Eigenschaftswert in jedem Element zugreifen. Funktion:

#element {
  color: var(--property-name);
}

Beispiel von W3C:

:root {
  --main-color: #05c;
  --accent-color: #056;
}

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

Dieses Beispiel definiert benutzerdefinierte Eigenschaften für die Haupt- und Akzentfarben und verwendet die Farbwertvariable innerhalb der # foo h1 Selektor.

Referenz und Dokumentation

Für Eine umfassende Dokumentation zu benutzerdefinierten Eigenschaften finden Sie auf der W3C-Spezifikationsseite:

https://www.w3.org/TR/css-variables/

Das obige ist der detaillierte Inhalt vonWas sind Double-Dash-CSS-Eigenschaften und wie funktionieren sie?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!