原生 css 基础变量

最新推荐文章于 2022-12-19 15:58:31 发布

前端-文龙刚

最新推荐文章于 2022-12-19 15:58:31 发布

阅读量323

点赞数

分类专栏： scss 文章标签： css css3 javascript

本文链接：https://blog.csdn.net/qq_17211063/article/details/123252551

版权

scss 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>原生CSS加变量</title>
	<style type="text/css">
		/*作用域：在最外层定义一个变量，这个标签里面的所有元素都可以用
		这里的这个:root 是属于页面最外层的一个标签*/
		:root{--fontSize:50px;}
		*{list-style-type:none;}
		.div1{
			/*1、声名变量 关键字 "--变量名"  */
			--bgColor:red;
			--borderWidth:5px;
			
			/*2、使用变量 var(--bgColor) */
			background-color:var(--bgColor);
			border:var(--borderWidth) solid;
		}
		.div2{
			/*如果有声名的变量，就用声名的变量，如果没有就用默认的
			var(声名的变量,默认的)
			*/
			background-color:var(--bgColor2,green);
		}
		.div2::after{
			/*变量拼接*/
			--msg:'你好讨厌哦！';
			content:var(--msg)  '我心里也有你哦';
		}
		.div3{
			--h:6;
			--bgColor3:yellow;
			/*利用calc 计算*/
			width:calc(50% - 100px);
			/*在calc里面运用定义变量计算*/
			height:calc(var(--h) * 50px);
			background-color:var(--bgColor3);}
			
		.div4{height:600px;background-color:red;}	
		.div4 li{height:calc(600px / 3);}
		.div4 li:nth-child(1){background-color:blue;}
		.div4 li:nth-child(2){background-color:yellow;}
		.div4 li:nth-child(3){background-color:green;}
		.div5{font-size:var(--fontSize);}
	</style>
</head>
<body>
	<div class="div1">我每次过安检都会被拦下来</div>
	<div class="div2">因为心里装了一个你</div>
	<div class="div3">LESS计算属性</div>
	
	<div class="div4">
		<ul>
			<li>我是li-1</li>
			<li>我是li-1</li>
			<li>我是li-1</li>
		</ul>
	</div>
	<div class="div5">测试作用域</div>
	
</body>
</html>

前端-文龙刚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生 css 基础变量

<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>原生CSS加变量</t.
复制链接

扫一扫