link 标签引入外部 CSS 是最常用也最推荐的方式
浏览器能并行下载、支持缓存、不影响渲染阻塞（配合 rel="stylesheet"），而且便于维护。别用 @import 在 CSS 里套 CSS，它会串行加载，拖慢首屏。
- 必须写在
里，否则可能触发重绘或 FOUC（内容闪动） -
rel="stylesheet"不能漏，少了就当普通链接处理，样式不生效 - 路径写错时浏览器控制台报
Failed to load resource: net::ERR_ABORTED，检查href是否拼错或路径不对（比如少了个./或多了一层../） - 如果用构建工具（如 Vite/Webpack），
link仍可用，但通常走 JS 动态注入，此时实际是 JS 控制加载时机，不是纯 HTML 行为
style 标签写内联 CSS 适合小项目或临时调试
直接把 CSS 写进 HTML 的 <style></style> 里，不用发额外请求，但无法复用、不好维护，也不利于浏览器缓存。
- 必须放在
，放底部可能导致样式延迟应用，尤其页面内容多时明显 - 注意不要和外部 CSS 冲突：同名选择器下，
<style></style>里的规则优先级等同于外部文件，靠“后定义胜出” - 如果用了 CSS-in-JS 或框架（如 React），
<style></style>里写全局样式容易污染，慎用
style 属性写行内样式只该用于动态覆盖，别当主力
style 属性写在标签上，比如 <div style="color: red; margin: 0">，它的优先级最高，但可维护性最差，而且没法写伪类、媒体查询这些。
<ul>
<li>JS 操作 DOM 时动态改样式，用 <code>element.style.xxx = "value" 是合理的；但手写大量 style="..." 就是在给自己埋雷
margin: 10 不行，得写 margin: "10px"）background-color 在 JS 中要写成 backgroundColor，不然无效:hover？也不行。这类需求必须回到 <style></style> 或外部 CSS遇到样式不生效？先查这三件事
不是代码写错了，就是加载或优先级没理清。别急着重写，按顺序快速验证。
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器开发者工具，看 Elements 面板里目标元素上有没有你写的样式——没有？说明选择器没匹配上，或 CSS 根本没加载（检查 Network 选项卡里 CSS 文件状态码是不是 404）
- 样式显示为灰色带横线？说明被更高优先级的规则覆盖了，点开旁边的“Computed”面板，看最终生效的是哪条
- 改了 CSS 文件但页面没变？可能是缓存，试试硬刷新（
Ctrl+Shift+R或Cmd+Shift+R），或者给<link>加个版本参数：href="style.css?v=1.0.1"
link 标签少了个 rel，或者路径里大小写错了——HTML5 不区分标签大小写，但文件系统可能区分。
