正确写法是，必须包含rel="stylesheet"且href路径合法；漏写rel或写错值（如rel="style"）将导致样式静默失效，href支持相对、绝对及完整url路径，type属性已废弃。
link标签引入CSS文件的基本写法
必须用 <link> 标签的 rel="stylesheet" 属性声明样式表关系，href 指向 CSS 文件路径。浏览器只认这个组合，写成 rel="style" 或漏掉 rel 都不会加载样式。
常见写法：
<link rel="stylesheet" href="styles.css">
注意点：
-
href路径支持相对路径（如./css/main.css）、绝对路径（如/assets/css/theme.css）、完整 URL（如https://cdn.example.com/theme.min.css） - 不要加
type="text/css"—— HTML5 已废弃该属性，加上反而可能干扰某些构建工具的自动处理 - 推荐把
<link>放在内，且尽量靠前，避免 FOUC（Flash of Unstyled Content）
定制化样式表常用的 link 属性组合
所谓“定制化”，往往指按设备、主题、用户偏好等条件加载不同样式。核心靠 media 和 title 配合 rel="stylesheet" 或 rel="alternate stylesheet"。
例如启用可切换的暗色主题：
<link rel="stylesheet" href="light.css" title="light" media="all"><br><link rel="alternate stylesheet" href="dark.css" title="dark" media="prefers-color-scheme: dark">
关键说明：
-
rel="stylesheet"是默认激活的样式表；rel="alternate stylesheet"是备用样式表，需 JS 手动切换（通过修改document.styleSheets[i].disabled或<link>的disabled属性） -
media不只是写screen或print，现代用法支持媒体查询，比如media="(max-width: 768px)"或media="prefers-reduced-motion: reduce" -
title属性是启用备用样式表的唯一标识，JS 切换时靠它匹配，不能省略
为什么样式没生效？几个高频踩坑点
引入了 <link> 却看不到效果，大概率不是路径错，而是这些隐性问题：
- 服务器返回 404 或 MIME 类型错误：检查浏览器 Network 面板里 CSS 请求的
Content-Type是否为text/css；Node.js/Express 等后端若静态托管配置不当，可能返回text/plain，导致浏览器直接忽略 - CSS 文件里用了
@import但路径是相对@import所在文件的位置，不是 HTML 文件位置 —— 容易误判路径层级 - 多个
<link>加载顺序反了：后加载的 CSS 会覆盖先加载的同名规则，但如果你把重置样式表（如reset.css）放在自定义样式后面，就白写了 - HTTP/HTTPS 混合内容：本地
file://协议下引入 HTTP 资源会被现代浏览器拦截，报Mixed Content错误
要不要用 preload 提前加载关键样式表？
对首屏强依赖的定制样式（比如主题色、字体、布局栅格），可以用 rel="preload" 提前拉取，但必须配合 as="style"，否则浏览器不会正确处理：
<link rel="preload" href="critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><br><noscript><link rel="stylesheet" href="critical.css"></noscript>
这样做的前提和代价：
- 仅适用于确定会用、体积小、无条件依赖的 CSS；不要对整站
theme.css盲目 preload - 必须手动补上
onload回调把rel改回stylesheet，否则只是下载不应用 - 不支持
media条件判断，所以无法用它做响应式或主题切换的“预加载” - 如果服务端已开启 HTTP/2 Server Push 或使用
<link rel="modulepreload">等新机制，优先级策略会更复杂，得看实际 LCP 数据再决定是否值得加
定制化样式表真正难的不是怎么写 <link>，而是如何让不同主题/尺寸/偏好下的样式不互相污染，又不拖慢首屏 —— 这需要从 CSS 架构（比如用 :root 变量 + JS 切换 class）和加载时机共同设计，单靠 <link> 标签解决不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
