在网页开发过程中，CSS外部样式表能够将样式规则与HTML结构分离，方便多个页面复用相同的样式，也便于后续样式维护和修改。正确使用外部样式表的引入方法和相关技巧，是前端开发者的基础必备能力。
基础引入方法
HTML中引入外部CSS样式表最核心的方式是使用<link>标签，该标签需要放置在<head>标签内部，用于建立当前HTML文档和外部样式文件的关联。
基础的引入语法如下：
<!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" href="style.css">
</head>
<body>
<div class="content">这是一段测试文本</div>
</body>
</html>
上述代码中，<link>标签的核心属性说明：
- rel：必须设置为stylesheet，表明当前链接的资源是样式表
- href：指定外部CSS文件的路径，支持相对路径和绝对路径
- type：早期规范中需要设置为text/css，HTML5中已经可以省略该属性
路径配置技巧
href属性的路径配置直接影响样式表能否正确加载，常见的路径类型有以下两种：
相对路径
相对路径是相对于当前HTML文件的位置来定位CSS文件，适合本地项目开发：
- 如果CSS文件和HTML文件在同一目录，直接写文件名即可，如
href="style.css" - 如果CSS文件在HTML文件的上一级目录，使用
../前缀，如href="../css/style.css" - 如果CSS文件在HTML文件的下一级css目录中，使用
css/前缀，如href="css/style.css"
绝对路径
绝对路径是从网站根目录开始定位文件，适合线上项目部署：
<!-- 从网站根目录引入css目录下的样式文件 --> <link rel="stylesheet" href="/static/css/global.css"> <!-- 引入其他域名的样式文件 --> <link rel="stylesheet" href="https://ipipp.com/css/reset.css">
高级应用技巧
媒体查询适配不同设备
可以在引入外部样式表时添加media属性，指定样式表生效的设备场景，实现响应式适配：
<!-- 仅屏幕宽度小于等于768px的设备加载该样式表 --> <link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)"> <!-- 打印时加载打印专用样式 --> <link rel="stylesheet" href="print.css" media="print">
样式加载优先级控制
外部样式表的加载顺序会影响最终样式表现，后引入的样式表会覆盖前面同优先级的选择器样式：
<head>
<!-- 基础样式先引入 -->
<link rel="stylesheet" href="base.css">
<!-- 主题样式后引入，可覆盖基础样式中的同名规则 -->
<link rel="stylesheet" href="theme.css">
</head>
备用样式表设置
通过设置rel="alternate stylesheet"和title属性，可以提供多个可选的样式表，用户可以在浏览器中选择切换：
<!-- 默认样式表 --> <link rel="stylesheet" href="default.css" title="默认主题"> <!-- 备用样式表 --> <link rel="alternate stylesheet" href="dark.css" title="暗黑主题">
常见问题排查
如果外部样式表没有生效，可以按照以下步骤排查：
- 检查
<link>标签是否放在<head>标签内部，避免放在<body>中导致加载异常 - 核对href路径是否正确，可以通过浏览器开发者工具的Network面板查看样式文件是否成功加载
- 检查CSS文件内部是否存在语法错误，错误的CSS规则可能导致整个文件解析失败
- 确认是否存在更高优先级的样式规则覆盖了外部样式表的规则，比如内联样式或者
!important标记