外部css需用引入，路径须相对html文件、置于靠前位置防fouc；按职责拆分文件（reset/layout/components/pages），避免内联样式失控与缓存问题。
为什么 <style></style> 块塞在 HTML 里容易失控
内联样式或 <style></style> 标签写在 里，短期改得快，但项目一超过 3 个页面、20 个组件，就会出现：样式重复定义、改一处漏三处、!important 泛滥、审查元素时找不到样式来源。更麻烦的是，HTML 文件体积膨胀，浏览器无法缓存 CSS，每次刷新都重载样式逻辑。
用 <link rel="stylesheet"> 引入外部 CSS 的实操要点
这不是简单把样式剪切粘贴过去就完事——路径、加载时机、作用域都得对上：
-
href路径必须相对于 HTML 文件位置，不是相对于 CSS 文件本身。比如 HTML 在/pages/index.html，CSS 放在/css/main.css，那就写href="css/main.css"，别写href="../css/main.css"（除非 HTML 在子目录） - 务必加
rel="stylesheet"，否则浏览器当普通资源下载，不解析为样式 - 建议放在
内靠前位置，避免页面先闪白再渲染样式（FOUC） - 如果用了构建工具（Vite / Webpack），路径可能走别名（如
@/styles/main.css），那是构建时处理的，原始 HTML 里不能直接这么写
<head> <meta charset="UTF-8"> <title>首页</title> <link rel="stylesheet" href="css/main.css"> </head>
多个 CSS 文件怎么组织才不乱
一个 main.css 从头写到尾，和一堆内联样式一样难维护。按职责拆分更可持续：
-
reset.css或base.css：统一默认样式（margin/padding、字体继承、盒模型） -
layout.css：全局容器、栅格、header/footer 固定结构 -
components.css：按钮、卡片、表单控件等可复用模块 -
pages/home.css、pages/user.css：仅当前页需要的样式，按需引入
注意：不要为每个小模块建一个 <link>，HTTP/1.1 下请合并；HTTP/2+ 可适度拆，但优先用 @import 或构建时打包，而非 HTML 里堆 10 个 <link>。
立即学习“前端免费学习笔记（深入）”；
改完外部 CSS 后页面没反应？常见卡点
不是代码写错了，往往是环境或缓存问题：
- 浏览器缓存了旧 CSS：强制刷新（
Ctrl+Shift+R或Cmd+Shift+R），或在 DevTools 的 Network 面板勾选 “Disable cache” - CSS 文件 404：检查浏览器控制台报的
Failed to load resource: net::ERR_ABORTED，点开链接看是否路径拼错，特别注意大小写（Linux 服务器区分大小写） - 样式被覆盖：外部 CSS 里规则优先级可能低于内联
或<style></style>中的同名选择器，先删光所有内联样式再调试 - 字符编码不一致：CSS 文件保存为 UTF-8 无 BOM，否则中文注释或字体名可能乱码，导致整条规则失效
外部样式表不是银弹——它让结构清晰，但也意味着你得管好路径、加载顺序和缓存行为。最常出问题的地方，永远是开发者以为“路径看着对”，结果少了个 ../ 或多写了斜杠。
