HTML5中引入外部CSS的唯一标准方式是将标签置于内，路径需正确且区分大小写，否则会静默失败。
在
HTML5 中导入外部样式表，唯一标准方式是把 标签写在 内部。浏览器按顺序解析 HTML， 里的 会提前加载 CSS，避免页面先无样式渲染（FOUC）。
-
rel属性必须为"stylesheet"，写成"style"或漏掉都会失效 -
href值是 CSS 文件路径，支持相对路径（如"css/style.css"）、绝对路径（如"/assets/main.css"）、甚至完整 URL（如"https://cdn.example.com/theme.css"） - 不要把
放在里——虽部分浏览器能“凑合”加载，但不符合规范，且可能阻塞后续脚本或导致重绘异常
检查路径是否正确：404 是最常见失败原因
外部 CSS 加载失败，90% 以上是路径写错。浏览器控制台（F12 → Console 或 Network 标签页）会明确报出 Failed to load resource: the server responded with a status of 404 ()。
- 确认 CSS 文件真实存在，且文件名大小写完全匹配（Linux/服务器区分大小写，
"Style.css"≠"style.css"） - 相对路径以 HTML 文件所在目录为基准，不是以当前网页 URL 或项目根目录为准
- 如果 HTML 在
/pages/index.html，想引用/css/base.css，应写href="../css/base.css"，而不是href="/css/base.css"（后者是根对齐，仅当服务器配置了正确路由才有效）
避免内联 style 和
当外部 CSS 没生效时，很多人会临时加 style="color:red" 或写 覆盖，这反而掩盖真实问题。
- 临时注释掉所有内联样式和内部
，专注验证外部 CSS 是否加载成功 - 用浏览器开发者工具的 Elements 面板查看目标元素，看 computed 样式里有没有来自外部 CSS 的规则；如果没有，说明没加载或选择器不匹配
- 注意 CSS 优先级：外部样式表的规则可能被后面加载的样式、
!important或内联样式覆盖，不是“引入了就一定生效”
HTML5 基础结构示例（含正确 link）
我的页面 欢迎
这个例子中，styles/main.css 必须和 HTML 文件在同一级目录下有 styles 子文件夹，且里面包含 main.css。少一个斜杠、多一个点、拼错字母，都会让样式消失——它不报错，只是静默失败。
立即学习“前端免费学习笔记（深入）”；
