Was sind Variablen in CSS?

Variablen beziehen sich in CSS auf benutzerdefinierte Attribute, die über gültige Bezeichner und zulässige Werte verfügen und überall verwendet werden können. CSS-Variablen haben Zugriff auf das DOM, was bedeutet, dass Entwickler Variablen mit lokalem oder globalem Gültigkeitsbereich erstellen, Variablen mithilfe von JavaScript ändern und Variablen basierend auf Medienabfragen ändern können.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Benutzerdefinierte CSS-Eigenschaften werden auch CSS-Variablen genannt. Variablen verfügen über zulässige Bezeichner und zulässige Werte und können überall verwendet werden. Verwenden Sie Variablen über die Funktion var(). Beispiel: var(--example) gibt den Wert zurück, der --example entspricht. Die Funktion

var() wird verwendet, um den Wert einer CSS-Variablen einzufügen.

CSS-Variablen haben Zugriff auf das DOM, was bedeutet, dass Sie Variablen mit lokalem oder globalem Gültigkeitsbereich erstellen, Variablen mithilfe von JavaScript ändern und Variablen basierend auf Medienabfragen ändern können.

Eine großartige Möglichkeit, CSS-Variablen zu verwenden, sind die Farben Ihres Designs. Sie können sie in Variablen einfügen, anstatt immer wieder dieselben Farben zu kopieren und einzufügen.

Grundlegende Verwendung:

• Deklarieren Sie eine lokale Variable:

element {
  --main-bg-color: brown;
}

• Verwenden Sie eine lokale Variable:

element {
  background-color: var(--main-bg-color);
}

• Deklarieren Sie eine globale CSS-Variable:

:root {
  --global-color: #666;
  --pane-padding: 5px 42px;
}

• verwenden eine globale CSS-Variable:

.demo{
   color: var(--global-color);
}

Supplementary

• :root ist eine CSS-Pseudoklasse, die dem Stammelement des Dokumentbaums entspricht. Für HTML stellt :root das 100db36a723c770d327fc0aef2ce13b1-Element dar, das mit dem HTML-Selektor identisch ist, außer dass es eine höhere Priorität hat. Daher schreiben wir normalerweise benutzerdefinierte Attribute in :root{} und die Elemente im HTML-Tag erben es.

• Benutzerdefinierte CSS-Attribute können kaskadiert werden: Jedes benutzerdefinierte Attribut kann mehrmals vorkommen, und der Wert der Variablen wird mithilfe des Kaskadenalgorithmus und des benutzerdefinierten Attributwerts berechnet.

• CSS-Variablen unterstützen die !important-Deklaration nicht. Bitte beachten Sie, dass es sich nur um eine Deklaration handelt.

(Lernvideo-Sharing: CSS-Video-Tutorial)

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