HTML调用外部CSS的五种方式：一、link标签引入；二、@import在CSS中导入；三、JavaScript动态创建link；四、HTTP响应头声明Content-Type；五、data URL内联小型CSS。

如果您希望在HTML文件中应用样式，但不想将CSS代码直接写入HTML内部，则需要通过外部CSS文件进行样式控制。以下是实现HTML调用外部CSS的几种常用方式：

一、使用link标签引入外部CSS文件

这是最标准、最推荐的方式，通过标签在HTML文档的

1、在HTML文件的

2、设置rel属性为stylesheet，表明该链接资源为样式表。

3、设置href属性为CSS文件的相对或绝对路径，例如css/style.css或https://example.com/style.css。

4、确保CSS文件编码与HTML一致（通常为UTF-8），避免中文注释或字符显示异常。

二、使用@import在CSS中导入其他CSS文件

该方法适用于在一个CSS文件中引用另一个CSS文件，常用于模块化管理样式，但必须注意其加载时机晚于link方式，可能引发FOUC（无样式内容闪烁）。

1、在已通过link引入的主CSS文件中编写@import语句。

2、语法格式为：@import url("common.css");或@import "reset.css";。

3、@import语句必须位于CSS文件最顶部，在任何实际样式规则之前。

4、不支持在HTML的

三、通过JavaScript动态创建link标签加载CSS

该方法适用于需要根据用户行为、设备类型或运行时条件动态加载特定样式表的场景，具有高度灵活性。

1、在HTML中添加一段

2、创建link元素：const link = document.createElement("link");。

3、设置属性：link.rel = "stylesheet"; link.href = "theme-dark.css";。

4、将link元素追加至document.head：document.head.appendChild(link);。

四、使用HTTP响应头Content-Type声明CSS MIME类型

当通过服务器端脚本（如PHP、Node.js）输出CSS内容时，需确保响应头正确声明MIME类型，否则浏览器可能拒绝解析或应用样式。

1、若CSS文件由PHP生成，需在输出前添加：header("Content-Type: text/css; charset=utf-8");。

2、若使用Nginx，检查配置中是否包含对.css后缀的正确type映射，例如types { text/css css; }。

3、可通过浏览器开发者工具的Network面板查看CSS请求的Response Headers，确认Content-Type值为text/css。

五、使用data URL内联小型CSS资源

对于极小的样式片段（如重置基础样式或主题变量），可将其Base64编码后作为data URL嵌入link的href中，避免额外HTTP请求。

1、将CSS内容（如body{margin:0}）进行UTF-8编码后Base64转换。

2、构造href值：href="data:text/css;base64,Ym9keXttYXJnaW46MH0="。

3、该方式仅适用于不超过几KB的样式，过长会导致HTML体积膨胀及解析延迟。

4、注意Base64字符串中不能包含换行符，且需确保编码过程未损坏原始字节序列。