CSS需通过HTML接入而非直接打开，正确方式是用引入外部文件、嵌入或行内style属性，优先使用外部CSS；路径错误、file://协议限制、缓存及编码问题常导致样式不生效。
CSS 代码怎么嵌入 HTML 页面
纯 CSS 文件不能直接当网页打开，浏览器只认 html 文件作为入口。想让 CSS 生效，必须把它和 HTML 绑定起来——不是“转换”，而是“接入”。
常见错误现象：style.css 双击打开是白屏或源码；用 file:// 直接打开 CSS 文件，控制台报错 Refused to apply style from 'xxx.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type.
- 最稳妥做法：新建一个
index.html，用<link rel="stylesheet" href="style.css">引入外部 CSS - 临时调试可用内联方式：把 CSS 写进
<style></style>标签里，放在中 - 注意路径问题：如果
style.css和index.html不在同级目录，href要写对相对路径，比如css/style.css或../assets/css/main.css
HTML 中写 CSS 的三种位置怎么选
行内、<style></style> 块、外部文件，效果一样，但适用场景和维护成本差别很大。
-
style="color: red;"行内样式：仅用于动态 JS 控制单个元素，比如element.style.display = 'none'；手写时尽量避免，无法复用、不可继承、覆盖优先级太高 -
<style></style>标签：适合页面独有、极简的样式（如首页 banner 动画），或构建流程未介入前的原型阶段；注意它只能作用于当前 HTML 文件 - 外部
.css文件：项目一旦超过 2 个页面，必须用这个；支持缓存、压缩、HTTP/2 复用，且 IDE 能提供完整语法提示和 lint 支持
引入 CSS 后页面没变化？检查这几点
样式不生效，90% 不是 CSS 写错了，而是加载或作用域出了问题。
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器开发者工具（F12），看 Network 面板里
style.css状态是不是200；如果是404，说明路径错了；如果是blocked或net::ERR_FILE_NOT_FOUND，说明用了file://协议但路径含中文或空格 - 看 Elements 面板里目标元素上有没有你写的类名；没有，说明 HTML 没加对
class或 JS 动态删了 - 看 Styles 面板右侧是否显示你的 CSS 规则被划掉；被划掉说明被更高优先级规则覆盖了，比如
!important、ID 选择器、行内样式，或样式表加载顺序靠后 - 确认没漏写
<meta charset="utf-8">—— 编码不对会导致中文注释或字体名解析失败，部分规则静默失效
用 VS Code 快速生成基础 HTML 框架
不用手敲 ，VS Code 自带 Emmet 支持，效率高且不易出错。
- 新建文件，后缀名保存为
.html，输入!然后按 Tab，自动生成标准 HTML5 模板 - 光标放在
里，输入link:css+ Tab，生成<link rel="stylesheet" href="style.css"> - 如果已有 CSS 内容，想快速包进
<style></style>：全选 CSS 文本 → 右键 → “Wrap with Abbreviation” → 输入style→ 回车 - 注意：Emmet 默认不处理 CSS 文件，所以
.css文件里敲!不会生成任何东西，别在这儿浪费时间
file:// 下跨目录加载被拦）、或者浏览器缓存了旧 CSS 却没强制刷新。Ctrl+F5 比清缓存快，但上线前得关掉所有本地调试路径假设。 
