使用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文件导入到网页中。这种方法实现了内容与样式的完全分离。
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);。
此方法适用于根据用户行为或设备类型动态切换主题。