css变量

最新推荐文章于 2024-02-03 22:52:34 发布

加油，铁子！

最新推荐文章于 2024-02-03 22:52:34 发布

阅读量95

点赞数 1

分类专栏： web前端 css HTML 文章标签： css html5 前端

本文链接：https://blog.csdn.net/weixin_51264427/article/details/119488653

版权

web前端同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

HTML

16 篇文章 0 订阅

订阅专栏

css

15 篇文章 0 订阅

订阅专栏

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、简化代码

加油，铁子！

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
css变量

1、什么是css变量自定义属性的通俗叫法2、如何定义?大小写敏感:root{}:root{ /* --my-color:tomato; --public-width:100px; --zlt-color:gold; */}3、如何使用?p{color:var(--color);}var(c...
复制链接

扫一扫