CSS文件未正确导入会导致网页样式失效，解决方法有四种：一、用<link>标签在<head>中引入；二、用@import在CSS中导入其他CSS；三、用<style>标签嵌入内部样式；四、用JavaScript动态创建link标签加载。
如果您在编写HTML页面时希望应用样式，但网页未显示预期的视觉效果，则可能是CSS文件未被正确导入。以下是将外部CSS文件导入HTML页面的具体步骤：
一、使用link标签在head中引入CSS文件
这是最标准且推荐的方式，通过在HTML文档的<head>部分插入<link>标签，浏览器会在加载HTML的同时获取并应用CSS样式表。
1、打开HTML文件，在<head>标签内部添加<link>元素。
2、设置rel属性为"stylesheet"，表示该链接资源为样式表。
立即学习“前端免费学习笔记（深入）”；
3、设置href属性为CSS文件的相对或绝对路径，例如"style.css"或"./css/main.css"。
4、可选地添加type属性为"text/css"（HTML5中可省略）。
5、确保CSS文件与HTML文件路径关系正确，若路径错误，浏览器控制台将显示404错误。
二、使用@import在CSS文件中导入其他CSS文件
该方法适用于将多个CSS模块合并为一个主样式表，需在已导入的CSS文件内部使用@import规则引入其他CSS资源。
1、在已通过<link>引入的主CSS文件顶部添加@import语句。
2、语法格式为：@import url("path/to/other.css");
3、可使用单引号或双引号包裹路径，支持相对路径和URL。
4、@import必须出现在CSS文件最前面，不能位于任何样式规则之后。
三、直接在HTML中嵌入style标签定义CSS
当样式仅用于单个页面且无需复用时，可在HTML文件内使用<style>标签声明内部样式，避免额外HTTP请求。
1、在HTML文件的<head>部分插入<style>标签。
2、在<style>标签内部编写CSS规则，如body { margin: 0; }。
3、确保<style>标签闭合正确，不嵌套其他HTML标签。
4、此方式不支持CSS文件复用，大型项目中不推荐作为主要方案。
四、使用JavaScript动态创建link标签导入CSS
适用于需要根据用户行为、设备类型或运行时条件按需加载样式的场景，通过脚本操作DOM实现CSS注入。
1、在HTML中添加一段<script>代码，通常置于<head>底部或<body>末尾。
2、创建link元素：const link = document.createElement("link");
3、设置link属性：link.rel = "stylesheet"; link.href = "theme.css";
4、将link元素追加至document.head：document.head.appendChild(link);
5、动态插入后，CSS会立即生效，但可能引发FOUC（Flash of Unstyled Content）。
