HTML中引入CSS有内联、内部（）和外部（）三种方式，推荐外链；CSS变量以--开头，在:root或选择器中声明，用var()函数调用并可设回退值，JS需用setProperty修改。
HTML里怎么引入CSS样式代码
直接写在HTML里最简单，但只适合小项目或临时调试。用<style></style>标签包住CSS规则，放在里就行：
<head>
<style>
body { background-color: #f0f0f0; }
.btn { color: blue; }
</style>
</head>
更推荐外链方式，把样式抽成style.css文件，用<link rel="stylesheet" href="style.css">引入——避免重复、方便复用、利于缓存。
注意：内联样式（style="..."）优先级最高，会覆盖<style></style>和外部CSS，慎用；浏览器解析CSS是自上而下、从左到右，顺序会影响最终效果。
CSS变量（custom properties）怎么声明和使用
CSS变量本质是自定义属性，必须以--开头，只能在CSS规则里用:root或选择器中声明，不能直接写在HTML标签里。
立即学习“前端免费学习笔记（深入）”；
声明位置决定作用域：
-
:root里声明 → 全局可用（相当于“CSS里的全局常量”） - 某个选择器里声明 → 只对该元素及其子元素生效
使用时必须配合var()函数，比如color: var(--primary-color);。不支持直接写color: --primary-color;。
:root {
--primary-color: #007bff;
--spacing-md: 16px;
}
.button {
background-color: var(--primary-color);
padding: var(--spacing-md);
}
为什么var()有时不生效？常见踩坑点
不是所有地方都能用CSS变量，也不是所有写法都合法。几个高频翻车场景：
-
var()不能用在@import、@media条件值、选择器名、属性名里——比如@media (min-width: var(--breakpoint))❌ 不行 - 变量未定义时，
var()默认返回unset，可能导致样式断裂；可加回退值：color: var(--text-color, #333); - 变量名区分大小写：
--Color和--color是两个变量 - JS动态修改时，必须用
element.style.setProperty('--my-var', 'red')，不能用element.style.--my-var
HTML标签里怎么“间接”用CSS变量
HTML标签本身不能写var()，但可以通过class触发对应CSS规则来生效。比如：
<div class="theme-dark">这段文字会变白</div>
然后在CSS里：
.theme-dark {
--text-color: white;
--bg-color: #1a1a1a;
}
.theme-dark p {
color: var(--text-color);
background-color: var(--bg-color);
}
真正起作用的是CSS规则的匹配逻辑，而不是HTML“认识”变量。想让变量随数据变化，得靠JS操作style.setProperty或切换class，纯静态HTML做不到动态绑定。
变量嵌套要小心：虽然var(--a, var(--b))语法合法，但浏览器不会递归求值——--b没定义时，整个表达式就失效，不会自动兜底到--b的值。
