在网页开发中，把样式和结构分离是基本规范。HTML引入外部CSS样式最标准的方式是使用link标签，它能在不改动页面结构的前提下，加载独立的样式文件并作用于整张网页。
一、link标签的基本写法
link标签属于空元素，通常放在<head>区域中。最核心的属性是href、rel和type。其中rel="stylesheet"告诉浏览器这是一个样式表链接，href填写CSS文件的路径。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>引入外部CSS示例</title> <!-- 使用link标签连接外部样式表 --> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>欢迎访问我的网站</h1> <p>这是一个使用外部样式的页面</p> </body> </html>
二、常用属性说明
除了基础属性，link标签还有一些实用配置，能让样式加载更合理。
| 属性 | 作用 |
|---|---|
| href | 指定CSS文件的URL，可以是相对路径或绝对路径 |
| rel | 定义当前文档与链接资源的关系，样式表固定为stylesheet |
| type | 声明资源类型，如text/css，HTML5中可省略 |
| media | 规定样式适用的设备，如screen或print |
1. 使用media属性做响应式区分
如果希望在打印时换一套样式，可以写两个link标签，用media分开控制。
<link rel="stylesheet" href="screen.css" media="screen"> <link rel="stylesheet" href="print.css" media="print">
2. 路径写法注意
当CSS放在子目录时，href要写清楚层级。比如文件在css文件夹里，就写成<code>href="css/style.css"</code>。若填错路径，页面将丢失样式。
三、为什么推荐外部引入
使用link标签引入外部CSS有几点明显好处：
- 多个HTML页面可共用一个CSS文件，减少重复代码
- 浏览器会缓存样式文件，加快后续页面打开速度
- 结构与表现分离，后期改版只动CSS即可
注意：link标签必须放在head里，若放在body中虽部分浏览器能识别，但不符合标准且可能引起闪烁。
四、完整示例
下面演示一个最简单的外部样式连接，style.css中写基础修饰，HTML只管结构。
/* style.css 文件内容 */
body {
font-family: "Microsoft YaHei", sans-serif;
background-color: #f5f5f5;
}
h1 {
color: #333;
}
<!-- index.html 文件内容 --> <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>标题</h1> </body> </html>
掌握link标签连接样式表的方法后，就能轻松实现HTML引入外部CSS样式，让页面维护变得更简单。