CSS var() functie

Definitie en gebruik

CSS var() Functie om de waarde van CSS variabelen in te voegen.

Voorbeeld

Voorbeeld 1

Eerst, declareer een globale variabele genaamd --main-bg-color, en gebruik deze vervolgens in de stijltafel. var() Functie om de waarde van de variabele in te voegen:

:root {
  --main-bg-color: koraal;
}
#div1 {
  background-color: var(--main-bg-color);
}
#div2 {
  background-color: var(--main-bg-color);
}

Probeer het zelf uit

Voorbeeld 2

Een ander gebruik var() Voorbeeld van functie invoegen van meerdere CSS variabelenwaarden:

:root {
  --main-bg-color: koraal;
  --main-txt-color: blauw;
  --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);
}

Probeer het zelf uit

CSS syntaxis

var(--name, value)

Technische details

Browserondersteuning

Tafelnummers geven de browserversie aan die de functie volledig ondersteunt.

Gerelateerde pagina's

Tutorial:CSS variabelen