在网页开发过程中，将HTML结构与CSS样式分离是行业通用的规范，这样不仅能让代码更易维护，也方便后续样式的复用和修改。而通过link标签引入外部CSS是最常用的样式关联方式，下面我们就来详细讲解具体操作方法。
link标签的基本语法
link标签是HTML中的空标签，用于定义当前文档与外部资源的关系，引入外部CSS时通常放在<head>标签内部，基本语法如下：
<link rel="stylesheet" href="样式文件路径" type="text/css">
各个属性的作用如下：
- rel：必须属性，设置关联的资源类型，引入CSS时固定值为stylesheet，表示关联的是样式表
- href：必须属性，填写外部CSS文件的路径，可以是相对路径也可以是绝对路径
- type：可选属性，指定资源的MIME类型，CSS对应的类型是text/css，HTML5中该属性可省略
不同路径的引入示例
相对路径引入
如果CSS文件和HTML文件在同一个目录下，直接写文件名即可：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>示例页面</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>这是一段测试文本</p>
</body>
</html>如果CSS文件在HTML文件的上一级目录的css文件夹中，路径写为../css/style.css即可。
绝对路径引入
如果CSS文件是线上资源或者本地绝对路径，直接填写完整路径：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>示例页面</title>
<link rel="stylesheet" href="https://ipipp.com/css/common.css">
</head>
<body>
<p>这是一段测试文本</p>
</body>
</html>常见引入问题排查
如果CSS没有生效，可以按照以下步骤排查：
| 问题现象 | 可能原因 | 解决方法 |
|---|---|---|
| 页面没有应用样式 | href路径填写错误 | 检查路径是否正确，可尝试用绝对路径测试 |
| 部分样式不生效 | CSS文件语法错误 | 打开CSS文件检查语法，比如是否漏写分号、括号不匹配 |
| 样式被覆盖 | 引入顺序靠后 | 调整link标签的顺序，后引入的样式会覆盖前面的同名样式 |
注意事项
首先，link标签必须放在<head>标签内部，虽然放在<body>中部分浏览器也能识别，但不符合规范，可能导致页面加载时出现样式闪烁。
其次，同一个HTML页面可以引入多个外部CSS文件，只需要添加多个link标签即可，不同样式表的优先级按照引入顺序决定，后引入的优先级更高。
最后，如果本地开发使用127.0.0.1或者192.168.0.1作为服务地址，直接使用对应的路径即可，不需要额外修改地址格式。