外部CSS加载失败90%是路径问题，需按顺序检查控制台404错误、路径写法（相对路径用./../，绝对路径分根目录/和完整URL）、服务器响应状态码及排查技巧。
外部 CSS 文件加载失败，90% 是路径问题。先确认浏览器控制台是否报 404 错误，再按顺序检查路径写法、文件位置和服务器响应。
一、相对路径怎么写才对
相对路径以当前 HTML 文件所在目录为起点，用 ./（当前目录）、../（上一级目录）来跳转。
- 如果 CSS 文件和 HTML 在同一目录：
- 如果 CSS 在
css/子目录： - 如果 HTML 在
pages/，CSS 在根目录： - 不要写成
href=".\css\style.css"（Windows 反斜杠在网页中无效）
二、绝对路径的两种写法及区别
绝对路径分「根目录绝对路径」和「完整 URL 绝对路径」，别混用。
-
根目录绝对路径：以
/开头，从网站根目录算起。
例如站点部署在https://example.com/myapp/，CSS 放在/myapp/css/style.css，就写：href="/myapp/css/style.css" -
完整 URL 路径：带协议和域名，适合 CDN 或跨域资源。
例如：href="https://cdn.example.com/css/style.css" - 错误写法：
href="/css/style.css"（实际指向https://example.com/css/style.css，不是项目子目录）
三、快速排查步骤
打开浏览器开发者工具（F12），看 Network 标签页里 CSS 请求的状态码和实际请求地址。
立即学习“前端免费学习笔记（深入）”；
- 看到 404：说明路径不对，点开该请求，看 “Request URL” 是什么，对照文件真实位置调整
- 看到 403：服务器拒绝访问，检查文件权限或 Web 服务器配置（如 Nginx 是否禁止了 .css 文件）
- 看到 blocked:mixed-content：HTTP 页面里用了 HTTPS 的 CSS 链接，或反过来，协议要一致
- 没出现在 Network 列表里：可能是
标签写错位置（比如放在里但没加rel属性）或拼写错误（如rel="stylsheet"）
四、小技巧帮你少踩坑
- 在浏览器地址栏直接粘贴 CSS 的 href 路径（比如
http://localhost:3000/css/style.css），看能否正常打开文件 - 用 VS Code 等编辑器，按住 Ctrl（Win）或 Cmd（Mac）点击 href 值，它会自动跳转到对应文件——跳转成功说明路径语法没问题
- 本地双击 HTML 打开时（file:// 协议），相对路径有效，但
/xxx这种根路径会指向电脑系统根目录，导致失败；开发时尽量用本地服务器（如 Live Server 插件）
基本上就这些。路径看着简单，但大小写、斜杠方向、部署层级一错就白忙活。多看一眼控制台的 Request URL，比猜半小时快得多。
