使用 link 标签在 html 的 head 中引入外部 css，通过 rel=”stylesheet” 和href 指定路径实现样式分离；2. 利用 @import 规则在 CSS 或 style 标签中导入其他 CSS 文件，但会 延迟加载 影响性能；3. 通过javaScript 动态创建 link 元素并插入头部，可按需加载样式，适用于条件性应用主题。
如果您希望将样式与 HTML 结构分离，使网页更易于维护和提升加载效率，可以通过链接外部 CSS 文件来实现。以下是实现 HTML 嵌入外部 CSS 的具体操作步骤：
一、使用 link 标签引入外部 CSS 文件
通过在 HTML 文档的 <head> 部分添加 <link> 标签，可以将一个或多个外部 CSS 文件导入到网页中。这种方法实现了内容与样式的完全分离。
1、在 html 文件 的 <head> 区域插入 <link> 标签。
2、设置 rel 属性为 ”stylesheet”，表明链接的是 样式表 文件。
立即学习 “ 前端免费学习笔记（深入）”；
3、使用 href 属性指定 CSS 文件的路径，例如：styles.css。
确保路径正确，否则样式将无法加载。
二、使用 @import 指令导入外部 CSS
@import 是 CSS 提供的规则，允许在一个 CSS 文件中导入另一个 CSS 文件。也可在 HTML 的 <style> 标签内使用，但性能不如 link 标签。
1、在 HTML 文件的 <style> 标签内或另一个 CSS 文件中输入 @import 语句。
2、后接 URL 括号，括号内写入目标 CSS 文件的路径，如：@import url(“styles.css”);。
注意：@import 会延迟样式加载，影响页面渲染速度。
三、通过 javascript 动态加载外部 CSS
利用 JavaScript 创建新的 <link> 元素并插入到页面中，可以在需要时按条件加载特定样式表。
1、编写 JavaScript 代码，创建一个新的 link 元素：const link = document.createElement(“link”);。
2、设置 link.rel = “stylesheet”; link.href = “styles.css”;。
3、将该元素添加到 document.head 中：document.head.appendChild(link);。
此方法适用于根据用户行为或设备类型动态切换主题。
