Heim  >  Artikel  >  Web-Frontend  >  Können Variablen in CSS definiert werden?

Können Variablen in CSS definiert werden?

WBOY
WBOYOriginal
2022-04-27 18:41:342760Durchsuche

Variablen können in CSS definiert werden. Die Syntax für die Variablendefinition lautet „--Variablenname“, und bei den in CSS definierten Variablennamen muss die Groß-/Kleinschreibung beachtet werden. Sie können die Funktion var() zum Lesen von Variablen verwenden. Die Syntax lautet „var(--Variablenname)“. und Sie können auch die Funktion verwenden. Der zweite Parameter stellt den Standardwert der Variablen dar. Wenn die Variable nicht vorhanden ist, wird dieser Standardwert verwendet.

Können Variablen in CSS definiert werden?

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

Können Variablen in CSS definiert werden?

Variablen können in CSS verwendet werden.

Fügen Sie beim Deklarieren einer CSS-Variablen zwei Bindestriche (--) vor dem Variablennamen hinzu. Bei Variablennamen wird die Groß-/Kleinschreibung beachtet und --header-color und --Header-Color sind zwei verschiedene Variablen. Die Funktion

var() wird zum Lesen von Variablen verwendet. Die Funktion

var() kann auch einen zweiten Parameter verwenden, um den Standardwert der Variablen darzustellen. Wenn die Variable nicht existiert, wird dieser Standardwert verwendet.

Der zweite Parameter verarbeitet keine internen Kommas oder Leerzeichen, sie werden als Teil des Parameters betrachtet.

Beispiel für die Verwendung von Variablen in CSS:

    :root{
      --base: yellow;
      --spacing: 10px;
      --blur: 10px;
    }

Der obige Code definiert 3 Variablen, :root macht sie für jeden zugänglich

    img{
      filter: blur(var(--blur));
      padding: var(--spacing);
      background: var(--base);
 
    }

Der obige Code verwendet die zuvor definierten Variablen als Attributwerte.

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonKönnen Variablen in CSS definiert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn