HTML 中引入 CSS 有内联、内部（）和外部（）三种方式，推荐外链；CSS 变量以 – 开头，在：root 或选择器中声明，用 var()函数调用并可设回退值，JS 需用 setProperty 修改。
HTML 里怎么引入 CSS 样式代码
直接写在 HTML 里最简单，但只适合小项目或临时调试。用
标签包住 CSS 规则，放在 里就行：
更推荐外链方式，把样式抽成 style.css 文件，用 引入——避免重复、方便复用、利于缓存。
注意：内联样式（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 规则来生效。比如：
这段文字会变白然后在 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 的值。
