link标签href路径必须正确,否则CSS不加载;rel必须为“stylesheet”;多个link按顺序覆盖;media属性可条件加载。

link标签的href属性必须写对路径,否则CSS根本不会加载
浏览器看到 <link> 标签后,会立刻发起一次HTTP请求去获取 href 指向的文件。如果路径错了一级、少了个点、大小写不匹配(尤其在Linux服务器上),返回的就是404——但页面完全不报错,你只看到样式没生效。
- 相对路径以当前HTML文件位置为基准,比如HTML在
/blog/post.html,想引用同级的style.css,就写href="style.css";若CSS在/css/main.css,就得写href="css/main.css" - 绝对路径从域名根目录开始,比如
href="/assets/css/theme.css",注意开头的/不能漏 - 开发时用浏览器开发者工具的 Network 面板看
style.css请求状态码,不是200就说明路径或服务器配置有问题
rel="stylesheet" 是强制要求,写成其他值CSS会被忽略
rel 属性告诉浏览器这个外部资源的类型。如果写成 rel="style"、rel="css" 或干脆漏掉,现代浏览器一律当普通链接处理,不会解析里面的选择器和声明。
- 唯一被广泛支持且有效的取值是
rel="stylesheet",大小写敏感,必须全小写 - 不要加多余空格,比如
rel=" stylesheet "在某些旧版IE中可能失效 - 别跟
<link rel="icon">混在一起写,每个<link>只做一件事
加载顺序影响样式覆盖,多个link标签按HTML中出现顺序生效
CSS层叠规则里,“后加载的样式表”可以覆盖“先加载的同名规则”。这和 @import 不同,<link> 是并行下载、按文档流顺序解析。
- 通用重置样式(如
reset.css)应该放在最前面 - 框架样式(如
bootstrap.css)放中间 - 项目自定义样式(如
app.css)放最后,确保能覆盖前面的规则 - 避免在
<head>里穿插JS脚本,它会阻塞后续<link>的解析,拖慢样式应用
媒体查询写在link标签上比写在CSS内部更早生效
把 media 属性直接加在 <link> 标签上,浏览器在下载前就能判断是否需要请求该文件。而写在CSS内部的 @media 规则,文件仍会被完整下载和解析。
立即学习“前端免费学习笔记(深入)”;
- 响应式场景下推荐:
<link rel="stylesheet" href="print.css" media="print">,打印时才加载 - 条件加载暗色模式:
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)"> - 注意:IE9及以下不支持
media属性的动态切换,改用JS监听更稳妥











