在Web开发里，把CSS样式表关联到HTML文档是最基础的操作之一。正确的链接方式能让浏览器在解析页面结构的同时并行加载样式，避免内容裸奔；错误的写法轻则样式错乱，重则产生阻塞渲染的性能问题。理解不同链接方式的机制，是写出可维护页面的前提。
一、使用link标签外链CSS
最常见也最推荐的方式是在HTML的<head>部分使用<link>标签指向外部.css文件。这种方式让样式与结构彻底分离，浏览器可缓存CSS文件，多个页面能共用同一份样式，后期改版只需调整一个文件。
标准写法必须包含rel="stylesheet"和href属性，type在HTML5中可省略，因为浏览器默认按CSS解析。下面是一段正确示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>示例页面</title>
<!-- 外链CSS，放在head中 -->
<link rel="stylesheet" href="css/base.css">
</head>
<body>
<p>这是一个段落</p>
</body>
</html>
如果把link放到<body>末尾，虽然现代浏览器也能应用样式，但会造成页面先无样式渲染再重绘，用户看到闪动。此外，href路径要相对于当前HTML文档，使用绝对路径或正确的相对路径才能命中文件。
常见外链错误
新手常把rel写成rel="style"或漏写，浏览器会拒绝应用样式。还有人把CSS放在子目录却写href="style.css"，导致404。另一类错误是在link里加type="text/css"以为更规范，其实HTML5已不需要，留着也无妨但不必要。
若需适配不同屏幕，可加media属性，例如media="screen and (max-width: 600px)"，让特定样式仅在小屏生效，减少不必要样式解析。
二、style标签内联样式
在文档内部用<style>标签写CSS，适合单页临时调整或邮件模板。它不需额外请求，但无法被多页面缓存，体量变大后拖慢首屏。
示例写法如下，同样应置于head中：
<head>
<style>
body { font-size: 14px; }
p { color: #333; }
</style>
</head>
内联样式优先级高于外链，但低于元素style属性。缺点是耦合度高，项目大了难维护。一般仅用于demo或极小页面。
与外链的取舍
当站点有多页且风格统一，外链能利用缓存显著降低带宽。内联仅建议在不支持外链的环境（如某些富文本容器）使用。不要用JS动态写style标签去替代外链，那会阻塞渲染且难调试。
三、@import导入方式
在CSS文件或style标签里用@import url("other.css");可引入其他样式表。但它必须写在最前面，且会串行请求，拖慢渲染，不如多个link并行高效。
/* main.css */
@import url("reset.css");
@import url("layout.css");
body { margin: 0; }
上述写法让浏览器先下载main.css，再发两个请求，形成关键路径延长。现代构建工具如打包器会合并文件，手工@import应尽量避免。
对比总结
| 方式 | 请求数 | 缓存 | 推荐度 |
|---|---|---|---|
| link外链 | 并行 | 优 | 高 |
| style内联 | 无 | 差 | 低 |
| @import | 串行 | 一般 | 避免 |
表中可见，link在绝大多数场景都是首选。掌握这些差异，就能在HTML中稳定、高效地链接CSS，不再被样式失踪问题困扰。