Heim > Artikel > Web-Frontend > Können Var-Variablen in CSS verwendet werden?
Können Var-Variablen in CSS verwendet werden?
- WBOYOriginal
- 2022-06-06 16:57:421961Durchsuche
Die Variable var kann in CSS verwendet werden. Sie können die Funktion var() verwenden, um auf den Wert der CSS-Variablen zuzugreifen, und Sie können diese Funktion auch zum Lesen der Variablen verwenden ist „var (Variablenname, Wert)“. Der Wert des zweiten Parameters kann verwendet werden, um den Standardwert der Variablen darzustellen.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
Können var-Variablen in CSS verwendet werden?
Die Funktion var() wird zum Einfügen benutzerdefinierter Attributwerte verwendet. Diese Methode ist nützlich, wenn ein Attributwert an mehreren Stellen verwendet wird. 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. Die Syntax der Funktion
var() lautet wie folgt:
var(name, value)
Name erforderlich. Variablenname (beginnend mit zwei Bindestrichen).
Wert optional. Fallback-Wert (wird verwendet, wenn die Variable nicht gefunden wird).
So funktioniert var()
Erstens: CSS-Variablen können einen globalen oder lokalen Gültigkeitsbereich haben.
Globale Variablen können im gesamten Dokument aufgerufen/verwendet werden, während lokale Variablen nur innerhalb des Selektors verwendet werden können, in dem sie deklariert sind.
Um eine Variable mit globalem Gültigkeitsbereich zu erstellen, deklarieren Sie sie im :root-Selektor. Der :root-Selektor entspricht dem Stammelement des Dokuments.
Um eine Variable mit lokalem Gültigkeitsbereich zu erstellen, deklarieren Sie sie im Selektor, wo sie verwendet werden soll.
Das folgende Beispiel ist das gleiche wie das obige Beispiel, aber hier verwenden wir die Funktion var().
Zuerst deklarieren wir zwei globale Variablen (--blue und --white). Anschließend verwenden wir die Funktion var(), um später den Wert der Variablen in das Stylesheet einzufügen:
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
</style>
</head>
<body>
<h1>使用 var() 函数</h1>
<div class="container">
<h2>Welcome to Shanghai!</h2>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China.</p>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China.</p>
<p>
<button>Yes</button>
<button>No</button>
</p>
</div>
</body>
</html>Ausgabeergebnis:
(Teilen von Lernvideos: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonKönnen Var-Variablen in CSS verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!