English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS Referenzhandbuch

CSS @Regel(RULES)

CSS Eigenschaftsliste

CSS var() Funktion

var() Funktion kann als Wert in jedem Attribut eines Elements verwendet werden. Die var() Funktion kann nicht als Attributname, Selector oder irgendetwas anderes als Attributwert verwendet werden. (Dies führt normalerweise zu Syntaxfehlern oder Werten, die nichts mit Variablen zu tun haben).

CSS Funktion

Online-Beispiel

Definieren Sie eine Eigenschaft namens "--main-bg-color" Eigenschaft definiert, dann rufen Sie die Eigenschaft mit der var() Funktion auf:

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Grundlagen-Tutorial(oldtoolbag.com)</title>
<style>
:root {
　　--main-bg-color: coral;　　
}
#div1　{
　　background-color: var(--main-bg-color);
　　padding:　5px;　　
}
#div2　{
　　background-color: var(--main-bg-color);
　　padding:　5px;
}
#div3　{
　　background-color: var(--main-bg-color);
　　padding:　5px;
}
</style>
</head>
<body>
<h1>var() Funktion</h1>
<div id="div1">Grundlagen-Tutorial oldtoolbag.com　-　Lernen Sie die Grundlagen, um weiter zu gehen!‹/div>
<br>
<div id="div2">Grundlagen-Tutorial oldtoolbag.com　-　Lernen Sie die Grundlagen, um weiter zu gehen!‹/div>
<br>
<div id="div3">Grundlagen-Tutorial oldtoolbag.com　-　Lernen Sie die Grundlagen, um weiter zu gehen!‹/div>
</body>
</html>
Testen Sie heraus, ob ‹/›

Definition und Verwendung

Die var() Funktion wird verwendet, um benutzerdefinierte Attributwerte einzufügen. Wenn ein Attributwert mehrfach verwendet wird, ist dies sehr nützlich.

Unterstützte Version: CSS3

Browser-Kompatibilität

Die Zahlen in der Tabelle zeigen die erste Browser-Version an, die die Funktion unterstützt.

Funktion




var()49.015.031.09.136.0

CSS Syntax

var(custom-Eigenschaft-name, value)
WertBeschreibung
custom-Eigenschaft-nameErforderlich. Der Name der benutzerdefinierten Eigenschaft, der unbedingt mit -- 　anfangen.
valueOptional. Ersatz-Wert, der verwendet wird, wenn das Attribut nicht existiert.

Mehr Beispiele

Online-Beispiel

Verwenden Sie die var() Funktion, um mehrere benutzerdefinierte Werte aufzurufen:

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Grundlagen-Tutorial(oldtoolbag.com)</title>
<style>
:root {
　　--main-bg-color: coral;
　　--main-txt-color: blue;　　
　　--main-padding:　15px;　　
}
#div1　{
　　background-color: var(--main-bg-color);
　　color: var(--main-txt-color);　　
　　padding: var(--main-padding);
}
#div2　{
　　background-color: var(--main-bg-color);
　　color: var(--main-txt-color);
　　padding: var(--main-padding);
}
#div3　{
　　background-color: var(--main-bg-color);
　　color: var(--main-txt-color);
　　padding: var(--main-padding);
}
</style>
</head>
<body>
<h1>var() Funktion</h1>
<div id="div1">Grundlagen-Tutorial oldtoolbag.com　-　Lernen Sie die Grundlagen, um weiter zu gehen!‹/div>
<br>
<div id="div2">Grundlagen-Tutorial oldtoolbag.com　-　Lernen Sie die Grundlagen, um weiter zu gehen!‹/div>
<br>
<div id="div3">Grundlagen-Tutorial oldtoolbag.com　-　Lernen Sie die Grundlagen, um weiter zu gehen!‹/div>
</body>
</html>
Testen Sie heraus, ob ‹/›

CSS Funktion

CSS @charset-RegelCSS-Funktionen (Functions)