外部css不生效主因是link标签位置错误、rel="stylesheet"缺失或拼错、href路径基准计算错误；必须置于head内，rel值严格小写且完整，href用根相对路径可避免404。
直接用在线编辑器（如 CodePen、CodeSandbox）写 HTML + CSS，右侧实时渲染，根本不用手动“运行”——它本身就是运行环境。 本地双击打开 HTML 文件也能看到效果，但前提是 CSS 真正被浏览器加载并解析了。问题往往不出在“怎么写”，而出在“怎么连上”。
link 标签引入外部 CSS 为什么没生效？
这是最常卡住的地方：HTML 文件里写了 <link rel="stylesheet" href="style.css">，但页面还是白的或没样式。
- 检查浏览器开发者工具（F12）→ Network 标签页，看
style.css请求是否返回404—— 路径错是最常见原因 -
href是相对路径，必须相对于当前 HTML 文件位置：如果 HTML 在/blog/index.html，而href="style.css"，浏览器就会去找/blog/style.css，不是网站根目录下的/style.css -
rel="stylesheet"缺失或拼错（比如写成rel="style"），浏览器直接忽略该标签，不发请求也不报错 - 别把
<link>塞到底部——它得在里，否则可能触发 FOUC（无样式闪屏）
用
适合快速验证、单页小项目或教学演示，但不是“临时救急”的万能解。
-
<style></style>必须放在内，不能塞进—— 语义错误，某些 SSR 或预渲染场景会出布局错乱 - 它比外部 CSS 优先级高（同属性下后加载覆盖先加载），但如果和行内
style属性冲突，style属性仍赢 - 别复制整份 Bootstrap 或 Tailwind 的 CSS 进去：
<style></style>不参与 HTTP 缓存，体积膨胀，DevTools 里也难定位具体规则来源
行内 style 属性不是“引入 CSS”的方式
它只是覆盖单个元素样式的最后手段，不是组织样式的方案。
-
<p style="color: red; margin: 0"></p>这种写法优先级最高，但无法复用、不可继承、不支持媒体查询、没法用选择器批量控制 - 如果你发现自己在多个标签上重复写同一组
style值，说明该抽成 class，然后用外部或内部 CSS 定义 - JS 动态改样式时用
element.style.xxx = "value"没问题；但手写一堆带分号的字符串拼接，就是自找麻烦
真正容易被忽略的是加载顺序和 MIME 类型：多个 <link> 的顺序决定层叠结果，而服务器返回的 Content-Type: text/css 缺失，Chrome 会直接拒解析——哪怕文件存在、路径正确、控制台也没报 404。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
