您的位置:首页 > 汽车 > 新车 > 专业建设规划目标与标准_竞价托管服务公司_网站优化排名工具_网络营销的种类

专业建设规划目标与标准_竞价托管服务公司_网站优化排名工具_网络营销的种类

2025/3/16 14:14:37 来源:https://blog.csdn.net/qq_44704740/article/details/146274926  浏览:    关键词:专业建设规划目标与标准_竞价托管服务公司_网站优化排名工具_网络营销的种类
专业建设规划目标与标准_竞价托管服务公司_网站优化排名工具_网络营销的种类

在 CSS 中,变量(Custom Properties) 允许你定义可重用的值,方便在整个样式表中使用和修改。CSS 变量的基本语法如下:

1. 定义 CSS 变量

CSS 变量通常在 :root 伪类中定义,以便它们可用于整个文档:

:root {--main-color: #3498db;--secondary-color: #2ecc71;--font-size: 16px;
}
  • 变量名称以 -- 开头,比如 --main-color
  • :root 选择器相当于 html,使变量全局可用

2. 使用 CSS 变量

在 CSS 规则中使用 var() 函数引用变量:

语法:var(自定义属性, 回退值)

body {color: var(--main-color);font-size: var(--font-size);
}button {background-color: var(--secondary-color);border: 2px solid var(--main-color);
}

回退值用法:

/* 回退值 *//* 在 component 的样式中:*/
.component .header {/* header-color 没有被设置,将使用回退值 blue */color: var(--header-color, blue);
}.component .text {color: var(--text-color, black);
}/* In the larger application's style: */
.component {--text-color: #080;
}

使用自定义属性作为回退值

:root {--backup-bg-color: teal;
}body {/* main-bg-color 没有被设置,将使用回退值 backup-bg-color。如果 backup-bg-color 没有被设置,将使用回退值 white。 */color: var(--main-bg-color, var(--backup-bg-color, white));
}

3. 变量的作用域

  • 变量可以定义在 :root 作用域,全局可用
  • 也可以在特定的元素中定义,仅该元素及其子元素可以使用
.card {--card-bg: #f5f5f5;background-color: var(--card-bg);
}

4. 提供默认值

如果变量未定义,可以使用 var() 提供默认值:

p {color: var(--text-color, black); /* 如果 --text-color 未定义,则使用 black */
}

5. 在 JavaScript 中操作 CSS 变量

CSS 变量可以通过 JavaScript 动态修改:

document.documentElement.style.setProperty('--main-color', 'red');

6. CSS 变量 vs 预处理器变量

特性CSS 变量 (var())预处理器变量 (SASS/LESS)
作用域运行时可变编译时确定
JavaScript 操作可以修改不能修改
计算可与 calc() 结合使用预计算

7. 使用场景:

- 动态主题切换

动态主题切换

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>:root {--bg-color: white;--text-color: black;}.dark-theme {--bg-color: black;--text-color: white;}body {background-color: var(--bg-color);color: var(--text-color);}</style>
</head>
<body>
<button onclick="handleClick(event)">深色主题</button>
<script>let isDeep = false;function handleClick(e) {document.body.classList.toggle('dark-theme');isDeep = !isDeep;e.target.innerHTML = isDeep ? '浅色主题' : '深色主题';}
</script>
</body>
</html>
- 动态hover

动态hover

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div {width: 100px;height: 100px;background-color: #ccc;}div:hover {background-color: var(--hover-bg);}</style>
</head>
<body><div id="box" style="--hover-bg: none">hello</div><select id="select"><option value="red"></option><option value="green">绿</option><option value="blue"></option></select><script>const select = document.getElementById('select');const box = document.getElementById('box');box.style.setProperty('--hover-bg', select.value);const handleChange = (e) => {const value = e.target.value;box.style.setProperty('--hover-bg', value);}select.addEventListener('change', handleChange);</script>
</body>
</html>

CSS 变量非常适合 主题切换、响应式设计、动态样式调整 等场景。 🚀

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com