1、什么是css变量
自定义属性的通俗叫法
2、如何定义?
大小写敏感
:root{
}
:root{
/* --my-color:tomato;
--public-width:100px;
--zlt-color:gold; */
}
3、如何使用?
p{color:var(--color);}
var(css变量名) 调用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css变量</title>
<style type="text/css">
:root{
--my-color:pink;
--public-width:100px;
}
div{
/* width: 100px; */
width: var(--public-width);
height: 100px;
/* background-color: pink; */
background-color: var(--my-color);
}
h1,p{
/* color: pink; */
color: var(--my-color);
}
</style>
</head>
<body>
<h1>css变量</h1>
<div></div>
<p>学习使我快乐</p>
</body>
</html>
calc(计算)
width: calc(var(--public-width) * 2);
具有继承性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css变量</title>
<style type="text/css">
:root{
--my-color:tomato;
--public-width:100px;
--zlt-color:gold;
}
div{
/* width: 100px; */
width: calc(var(--public-width) * 2);
height: 100px;
/* background-color: pink; */
background-color: var(--my-color);
/* 先找父级div的属性,再找span */
/* 具有继承性 */
--zlt-color:skyblue;
}
span{
color: var(--zlt-color);
}
h1,p{
/* color: pink; */
color: var(--my-color);
}
</style>
</head>
<body>
<h1>css变量</h1>
<div>
<span>知了堂</span>
</div>
<p>学习使我快乐</p>
</body>
</html>
4、有什么作用?
1、提取相同的属性值
2、简化代码