外部CSS文件必须在<head>中<title>后、<script>前用<link rel="stylesheet" href="...">引入，路径需正确、Content-Type须为text/css，加载顺序影响层叠效果。
在 <head> 中用 <link> 引入 CSS 文件
必须把 <link> 标签写在 <head> 里，且放在 <title> 之后、<script> 之前（如果有的话）。浏览器按顺序解析，放错位置会导致样式延迟加载或被覆盖。
最简写法是：
<link rel="stylesheet" href="style.css">
-
rel="stylesheet"是强制的，漏掉就当普通链接处理，样式不会生效 -
href值支持相对路径（如css/main.css）、绝对路径（如/assets/css/theme.css）和完整 URL（如https://cdn.example.com/normalize.css） - 不要加
type="text/css"—— HTML5 已废弃该属性，加了反而冗余
遇到 404 或样式不生效时先查这三处
外部 CSS 加载失败很常见，错误往往不在代码结构，而在路径或服务器配置。
- 打开浏览器开发者工具（F12），切到
Network标签页，刷新页面，看style.css对应的请求状态码是不是404或403 - 检查
href路径是否相对于当前 HTML 文件位置 —— 比如 HTML 在/blog/post.html，而href="css/style.css"就会去找/blog/css/style.css，不是网站根目录下的/css/style.css - 确认文件权限和 MIME 类型：服务器返回的响应头中
Content-Type必须是text/css，否则 Chrome 等浏览器会拒绝解析
需要控制加载行为？慎用 media 和 disabled
这两个属性看起来灵活，但容易引发意料外的行为。
立即学习“前端免费学习笔记（深入）”；
-
media="print"只在打印预览时生效，屏幕浏览完全不可见；media="(max-width: 768px)"是响应式常用写法，但注意它只影响是否「应用」样式，不阻止下载 -
disabled="true"会让样式表立即失效，但 DOM 中仍存在，且无法通过 JS 直接设为false来启用 —— 必须改用sheet.disabled = false操作底层 CSSStyleSheet 对象 - 想实现「条件加载」，更可靠的方式是用 JavaScript 动态创建
<link>，而不是依赖disabled
多个样式表的加载顺序直接影响最终效果
CSS 层叠规则依赖声明顺序，后引入的样式能覆盖前面同优先级的规则。这点容易被忽略，尤其在多人协作或 CMS 插件混入额外 <link> 时。
- 通用重置（如
reset.css）应放在最前 - 框架样式（如 Bootstrap）紧随其后
- 项目自定义样式（
main.css）必须放在最后，否则会被前面的规则覆盖 - 避免在
<body>里插入<link>—— 不仅语义错误，部分浏览器会阻塞渲染并重新计算样式
路径拼错、顺序颠倒、MIME 类型不对——这三个点占了外部样式表失败原因的八成以上。其他问题大多能顺着 Network 面板里的请求细节直接定位。
