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

manual de referência CSS

regras CSS @

大全 de Atributos CSS

Função var() do CSS

A função var() pode ser usada como valor de qualquer atributo do elemento. A função var() não pode ser usada como nome de atributo, seletor ou qualquer coisa além do valor de atributo. (Isso geralmente resulta em erro de sintaxe ou valor não relacionado a variáveis).

Função CSS

Exemplo online

Definir um nome para "--main-bg-definir a propriedade "color", e depois usar a função var() para chamar essa propriedade:

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Tutorial básico(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>função var()‹/h1>
<div id="div1">Tutorial básico oldtoolbag.com　-　Aprender os fundamentos, só assim você pode ir mais longe!‹/div>
<br>
<div id="div2">Tutorial básico oldtoolbag.com　-　Aprender os fundamentos, só assim você pode ir mais longe!‹/div>
<br>
<div id="div3">Tutorial básico oldtoolbag.com　-　Aprender os fundamentos, só assim você pode ir mais longe!‹/div>
</body>
</html>
Testar e ver ‹/›

Definição e uso

A função var() é usada para inserir valores de propriedades personalizadas, o que é útil se um valor de atributo for usado em várias partes.

Versão suportada: CSS3

Compatibilidade do navegador

Os números na tabela representam a primeira versão do navegador que suporta essa função.

função




var()49.015.031.09.136.0

Sintaxe CSS

var(custom-property-name, value)
ValorDescrição
custom-property-nameObrigatório. O nome da propriedade personalizada, deve começar com -- 　começa com.
valueOpcional. Valor alternativo, usar quando o atributo não existir.

Mais exemplos

Exemplo online

Usar a função var() para chamar vários valores personalizados:

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Tutorial básico(oldtoolbag.com)</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>função var()‹/h1>
<div id="div1">Tutorial básico oldtoolbag.com　-　Aprender os fundamentos, só assim você pode ir mais longe!‹/div>
<br>
<div id="div2">Tutorial básico oldtoolbag.com　-　Aprender os fundamentos, só assim você pode ir mais longe!‹/div>
<br>
<div id="div3">Tutorial básico oldtoolbag.com　-　Aprender os fundamentos, só assim você pode ir mais longe!‹/div>
</body>
</html>
Testar e ver ‹/›

Função CSS

Regra @charset CSSFunções CSS (Functions)