如何在index.html中引入CSS样式表？

时间：2026-06-08 09:58:53 编辑：袖梨来源：一聚教程网

link标签必须放在head中，否则因流式解析导致样式延迟加载、页面闪动（FOUC）或被忽略；rel="stylesheet"不可省略，href路径须准确，且应置于title之后、script之前以确保优先加载与正确覆盖。

link 标签必须放在 head 里，不是 body 里

浏览器解析 HTML 是从上到下顺序执行的，<link> 如果写在 <body> 中，可能导致样式加载延迟、页面闪动，甚至被某些严格模式的浏览器忽略。实际开发中常见错误是把 <link rel="stylesheet" href="style.css"> 直接丢在 <body> 开头或结尾，结果样式没生效，但控制台又不报错。

正确做法是确保它出现在 <head> 内，且最好在 <title> 之后、其他资源（如 <script>）之前：

<head>  <meta charset="UTF-8">  <title>My Page</title>  <link rel="stylesheet" href="style.css"></head>

href 路径写错会导致 404，但控制台可能不显眼

路径错误是最常踩的坑：用相对路径时，href 的基准是当前 HTML 文件位置，不是 CSS 文件位置，也不是服务器根目录。比如 index.html 在项目根目录，而 style.css 在 css/style.css，就必须写 href="css/style.css"，而不是 href="/css/style.css"（除非你明确配置了服务器根路径）。

检查方式很简单：打开浏览器开发者工具 → Network 标签页 → 刷新页面 → 找 style.css 这一行，看状态码是不是 200。如果是 404，点开它看 “Initiator” 和请求的完整 URL，就能反推路径该怎样改。

立即学习“前端免费学习笔记（深入）”；

href="style.css" → 同目录
href="css/style.css" → 子目录
href="../assets/style.css" → 上级再进子目录
href="/style.css" → 仅当部署在域名根路径（如 https://example.com/style.css）才可靠

rel="stylesheet" 不能省略或拼错

有些人在复制代码时漏掉 rel="stylesheet"，或者误写成 rel="style"、rel="css"，浏览器就完全不会把它当样式表处理，也不会报错，只是静默忽略。这个属性是告诉浏览器“这个链接指向的是层叠样式表”，没有它，<link> 就只是一个普通外部资源引用。

另外，不要混用 <style> 标签和 <link>：前者用于内联样式，后者才是引入外部 CSS 文件的唯一标准方式。如果看到有人写 <link href="style.css">（缺 rel），务必补全。

加载顺序影响样式覆盖，@import 更慢更不可控

多个 <link> 按 HTML 中出现顺序加载和应用，后引入的 CSS 规则会覆盖前面同名选择器的声明。这点和 @import 不同：@import 必须写在 CSS 文件开头，且会阻塞并延迟后续样式加载，还无法被多数打包工具（如 Webpack）静态分析，容易引发 FOUC（Flash of Unstyled Content）。

所以，除非有特殊架构需求（比如主题切换依赖 CSS 层级），否则别在 CSS 里用 @import 引入另一个 CSS；所有外部样式都统一用 <link> 放在 <head> 里，按优先级从低到高排列。

真正容易被忽略的是：CSS 加载是异步的，但渲染是同步阻塞的 —— 浏览器会等所有 <link rel="stylesheet"> 下载并解析完才开始绘制页面。所以一个大而慢的 CSS 文件，会让白屏时间变长，这点比 JS 阻塞更隐蔽。

推荐专题

最新下载

热门教程

如何在index.html中引入CSS样式表？

link 标签必须放在 head 里，不是 body 里

href 路径写错会导致 404，但控制台可能不显眼

rel="stylesheet" 不能省略或拼错

加载顺序影响样式覆盖，@import 更慢更不可控

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程