English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
La funzione var() può essere utilizzata come valore di qualsiasi attributo dell'elemento. La funzione var() non può essere utilizzata come nome dell'attributo, selettore o qualsiasi cosa al di fuori del valore dell'attributo (fare così di solito causerebbe errori di sintassi o valori non correlati alle variabili).
Definisci un attributo chiamato "--main-bg-color", quindi utilizza la funzione var() per chiamare l'attributo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial di base(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>Funzione var()</h1>
<div id="div1">Tutorial di base oldtoolbag.com - Impara le basi per andare più lontano!</div>
<br>
<div id="div2">Tutorial di base oldtoolbag.com - Impara le basi per andare più lontano!</div>
<br>
<div id="div3">Tutorial di base oldtoolbag.com - Impara le basi per andare più lontano!</div>
</body>
</html>Prova a vedere ‹/›La funzione var() viene utilizzata per inserire valori di attributi personalizzati. Se un valore di attributo viene utilizzato in più luoghi, questo metodo è molto utile.
Versioni supportate: CSS3
I numeri nella tabella rappresentano la versione del browser che supporta la funzione per la prima volta.
| Funzione | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
var(custom-property-name, value)
| Valore | Descrizione |
|---|---|
| custom-property-name | Obbligatorio. Nome dell'attributo personalizzato, deve iniziare con --. |
| value | Opzionale. Valore di riserva, utilizzato quando l'attributo non esiste. |
Usa la funzione var() per chiamare più valori personalizzati:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial di base(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>Funzione var()</h1>
<div id="div1">Tutorial di base oldtoolbag.com - Impara le basi per andare più lontano!</div>
<br>
<div id="div2">Tutorial di base oldtoolbag.com - Impara le basi per andare più lontano!</div>
<br>
<div id="div3">Tutorial di base oldtoolbag.com - Impara le basi per andare più lontano!</div>
</body>
</html>Prova a vedere ‹/›