Können Variablen in CSS verwendet werden?

css kann Variablen verwenden. In CSS ist eine Variable eine vom CSS-Autor definierte Entität, die einen bestimmten Wert enthält, der im gesamten Dokument wiederverwendet werden soll. Verwenden Sie benutzerdefinierte Eigenschaften, um den Variablennamen festzulegen, und verwenden Sie die Funktion var(), um ihn zu lesen.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer.

CSS-Variablen haben derzeit zwei Formen:

• Variablen haben zulässige Bezeichner und zulässige Werte. Überall einsetzbar. Variablen können mit der Funktion var() verwendet werden. Beispiel: var(--example-variable) gibt den Wert zurück, der dem Attribut --example-variable

• custom entspricht. Diese Eigenschaften verwenden als Namen das spezielle Format --*where*. Zum Beispiel --example-variable: 20px; sogar eine CSS-Deklarationsanweisung. Das bedeutet, dass der Variablen --example-varibale 20 Pixel zugewiesen werden.

Drei wichtige Dinge, die Sie bei der Verwendung von CSS-Variablen wissen sollten: Benutzerdefinierte Attribute: var()-Funktion: Root-Pseudoklasse: 1. Anpassungsattribute

Wir kann wiederverwendete Attribute als benutzerdefinierte Attribute definieren, sodass wir, wenn wir sie in Zukunft ändern müssen, nur die Attributwerte in den benutzerdefinierten Attributen ändern müssen.

:root {
　　--textColor: #444;
}

• Der obige Code ist ein benutzerdefiniertes Attribut. Beim Schreiben, Es ist zu beachten, dass benutzerdefinierte Attribute mit -- beginnen.

3. Funktion var()
Wir müssen die Funktion var() verwenden, um Variablen zu lesen, sonst weiß der Browser nicht, was Ihr benutzerdefiniertes Attribut ist. Was für ein Zeug . Die Funktion

• var() kann auch ein zweites Attribut angeben, das den Standardwert des Attributs

  p {
  　　color: var(--textColor);
  }

darstellt. Um die Schriftfarbe des p-Tags festzulegen, können Sie es wie den obigen Code schreiben

Es ist dasselbe als Dies

3. Root-Pseudoklasse

Bevor wir über die Root-Pseudoklasse sprechen, müssen wir zunächst über das Umfangsproblem von benutzerdefinierten CSS-Attributen sprechen. Das gleiche benutzerdefinierte CSS-Attribut kann mehrfach deklariert und gelesen werden Selektoren, das Attribut mit der höchsten Priorität wird wirksam.

body {
　　--bgColor: red;
}
.content {
　　--textColor: blue;
}

Im obigen Code ist der Bereich von -bgColor der Bereich body und der Bereich von --textColor ist .content. Aus diesem Grund ist es am besten, das benutzerdefinierte Attribut einzufügen auf dem Root-Element: root Im Inneren wird dadurch sichergestellt, dass jeder Selektor sie lesen kann.
(Lernvideo-Sharing:

CSS-Video-Tutorial

)

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