link标签必须写在head里，否则会触发FOUC；href需用绝对路径、rel="stylesheet"不可省略；CSS应按优先级顺序加载，避免@import和冗余type属性。
link标签必须写在head里，不是body里
浏览器解析HTML是自上而下，CSS需要在渲染前就加载并解析完成，否则会触发FOUC（Flash of Unstyled Content）——页面先闪一下无样式的白板，再突然套上样式。很多新手把<link>塞进末尾，看着能用，但实际布局可能错乱、字体跳变、媒体查询失效。
- 必须放在
内，紧贴<title></title>之后或<meta>之后都行，但不能出 - 不要用
@import在CSS里引入另一个CSS——它会阻塞并串行加载，比<link>慢得多 - 如果用Webpack/Vite等构建工具，
<link>通常由插件自动注入，手动写反而容易重复或路径错
href路径写错是最常见的404原因
浏览器控制台报Failed to load resource: the server responded with a status of 404 ()，八成是href值没对上文件真实位置。相对路径易受当前HTML所在目录影响，尤其嵌套子页面时。
- 推荐用以
/开头的绝对路径：比如CSS在/assets/css/main.css，就写href="/assets/css/main.css"，和HTML文件位置无关 - 避免
href="css/style.css"这种相对路径——如果HTML在/blog/post.html，浏览器就会去找/blog/css/style.css - 开发时打开浏览器Network面板，点开那个404的CSS请求，看“Initiator”就知道是谁发起的，再核对路径
rel="stylesheet"不能省，type="text/css"可以省
HTML5规范里type="text/css"已是默认值，写了不报错但纯属冗余；而rel="stylesheet"才是关键标识——告诉浏览器“这是要应用的样式表”，漏掉它，文件虽能下载，但不会解析生效。
- 正确写法：
<link rel="stylesheet" href="/style.css"> - 错误写法：
<link href="/style.css">（没rel，样式不生效） - 别加
type="text/css"，现代浏览器不需要，还占字节
加载顺序和media属性影响首屏性能
CSS是渲染阻塞资源，浏览器遇到<link rel="stylesheet">会暂停HTML解析，直到CSSOM构建完成。多个CSS文件按<link>出现顺序串行加载，顺序错了可能导致样式覆盖异常或布局抖动。
立即学习“前端免费学习笔记（深入）”；
- 关键CSS（如重置、排版、首屏样式）放前面；非关键（如打印样式、暗色主题）用
media延迟加载：<link rel="stylesheet" href="print.css" media="print"> - 不要把所有CSS拆成十几个
<link>——HTTP/1.1下每个都是独立请求，合并更优；HTTP/2支持多路复用，但过多仍增加解析开销 - 移动端慎用
media="(max-width: 768px)"——它仍会下载并解析CSS，只是不应用；真想条件加载，得用JavaScript动态插入
rel="stylesheet"被删掉或手误写成rel="style"，页面看起来完全没样式，查半天才发现是拼写问题。 
