在HTML页面开发中，我们经常会把CSS样式单独写在一个.css文件里，再通过特定方式引入到HTML中，这种分离结构和样式的做法能大幅提升开发效率。下面先给大家展示外部样式表引入的核心操作，之后再展开讲解细节。
HTML引入外部样式表的标准方法
HTML引入外部样式表最常用、最标准的方式是使用<link>标签，这个标签需要放在HTML文档的<head>区域内，浏览器会在解析页面前先加载对应的CSS文件，避免页面出现样式闪烁的问题。
link标签的基础用法
一个完整的外部样式表引入标签结构如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式表引入示例</title>
<!-- 引入外部CSS文件 -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="content">这是应用了外部样式的文本</div>
</body>
</html>link标签各属性说明
我们逐一拆解link标签的核心属性作用：
- rel：必须设置为stylesheet，用来告诉浏览器当前引入的文件是样式表文件。
- type：指定引入文件的MIME类型，CSS文件对应的值是text/css，不过在HTML5规范中这个属性可以省略不写。
- href：填写外部CSS文件的路径，可以是相对路径也可以是绝对路径，这个属性是必填项。
路径填写注意事项
href属性的路径填写错误是最常见的引入失败原因，大家可以根据文件位置正确填写：
| CSS文件位置 | href填写示例 | 说明 |
|---|---|---|
| 和HTML文件同目录 | style.css | 直接写文件名即可 |
| 在HTML文件的上一级目录 | ../style.css | ../表示返回上一级目录 |
| 在HTML文件的css子目录下 | css/style.css | 先写子目录名再写文件名 |
| 网络上的CSS文件 | https://ipipp.com/style.css | 填写完整的网络地址 |
常见引入问题排查
如果引入之后页面没有应用样式，可以按照以下步骤排查：
- 检查link标签是否放在
<head>区域内，不要放在<body>里。 - 打开浏览器开发者工具，查看网络面板是否有对应的CSS文件请求，状态码是不是200。
- 检查href路径是否正确，是否有拼写错误，注意文件名的大小写，部分服务器对大小写敏感。
- 确认CSS文件里的选择器是否和HTML里的元素、类名、id匹配，避免样式写错导致不生效。
补充：@import方式引入（不推荐）
除了link标签，还可以通过CSS的@import规则引入外部样式表，不过这种方式有很多弊端，实际开发中不推荐使用：
/* 在HTML的style标签里或者另一个CSS文件里写 */
@import url("other_style.css");
/* 注意@import必须放在CSS文件的最顶部，否则不会生效 */
body {
margin: 0;
padding: 0;
}@import方式的缺点是浏览器会等到页面全部下载完才会加载CSS，容易导致页面无样式闪烁，而且无法使用JavaScript动态控制样式表的加载，所以优先选择link标签引入外部样式表。