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

manual de referencia de CSS

reglas de CSS @

大全 de propiedades CSS

Función var() de CSS

La función var() se puede usar como valor de cualquier propiedad del elemento. La función var() no se puede usar como nombre de propiedad, selector o cualquier otra cosa además del valor de propiedad. (Esto generalmente causará errores de sintaxis o valores no relacionados con las variables).

Función CSS

Ejemplo en línea

Definir una propiedad llamada "--main-bg-definir la propiedad, luego usar la función var() para llamar a la propiedad:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutoriales básicos(oldtoolbag.com)</title>/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>Función var() </h1>
<div id="div1">Tutoriales básicos oldtoolbag.com　-　Aprender los fundamentos, ¡es la clave para avanzar más lejos! </div>
<br>
<div id="div2">Tutoriales básicos oldtoolbag.com　-　Aprender los fundamentos, ¡es la clave para avanzar más lejos! </div>
<br>
<div id="div3">Tutoriales básicos oldtoolbag.com　-　Aprender los fundamentos, ¡es la clave para avanzar más lejos! </div>
</body>
</html>
Prueba y observa ‹/›

Definición y uso

La función var() se utiliza para insertar valores de propiedades personalizadas, lo que es útil cuando un valor de atributo se utiliza en varios lugares.

Versión de soporte: CSS3

Compatibilidad del navegador

Los números en la tabla indican la primera versión del navegador que admite la función.

Función




var()49.015.031.09.136.0

Sintaxis de CSS

var(custom-property-name, value)
ValorDescripción
custom-property-nameRequerido. Nombre de la propiedad personalizada, debe comenzar con -- 　Inicio.
valueOpcional. Valor alternativo, utilizado cuando el atributo no existe.

Más ejemplos

Ejemplo en línea

Usar la función var() para llamar a varios valores personalizados:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutoriales básicos(oldtoolbag.com)</title>/title>
<style>
:root {
　　--main-bg-color: coral;
　　--main-txt-color: azul;　　
　　--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>Función var() </h1>
<div id="div1">Tutoriales básicos oldtoolbag.com　-　Aprender los fundamentos, ¡es la clave para avanzar más lejos! </div>
<br>
<div id="div2">Tutoriales básicos oldtoolbag.com　-　Aprender los fundamentos, ¡es la clave para avanzar más lejos! </div>
<br>
<div id="div3">Tutoriales básicos oldtoolbag.com　-　Aprender los fundamentos, ¡es la clave para avanzar más lejos! </div>
</body>
</html>
Prueba y observa ‹/›

Función CSS

Regla @charset CSSFunciones CSS (Functions)