在 HTML 文件中引入 CSS 有以下三种种方式：
1内联样式：
可以直接在 HTML 标签中使用内联样式来添加 CSS。使用 style 属性，并将 CSS 代码写入双引号中。示例：
<h1 style="color: red;">Hello, world!</h1>
2.内部样式表：
可以在 HTML 文件的 <head> 标签中使用 <style> 标签来定义 CSS 样式。在 <style> 标签中编写 CSS 代码。示例：
<head>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
</body>
3.外部样式表：
将CSS代码编写到一个独立的 .css 文件中，并用外部引入的方式将其链接到 HTML 文件中。使用 <link> 标签来引入外部样式表，需要将 rel 属性设置为 "stylesheet"，href 属性设置为 CSS 文件的路径。示例：
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello, world!</h1>
</body>
`styles.css` 文件中的内容：
h1 {
color: red;
}
4.@import 规则：
在 CSS 文件中使用 @import 规则来引入其他 CSS 文件。在 CSS 文件的开头使用 @import 并指定要引入的 CSS 文件的路径。示例：
@import url("reset.css");
@import url("styles.css");
link和@import 引入区别
- 语法差异：
link是HTML标签，使用HTML语法来引入CSS文件；@import是CSS规则，使用CSS语法来引入CSS文件。
- 加载顺序：
link标签在页面加载时同时加载CSS文件，不会阻塞页面的渲染。@import规则会在CSS文件加载完后才会加载该文件引入的CSS文件，可能会导致页面加载时出现闪烁。
- 兼容性：
link标签的兼容性较好，适用于所有主流浏览器。@import规则在旧版的IE浏览器中不被支持。
- 权重差异：
@import规则引入的CSS文件具有较低的权重，比普通的link引入的CSS文件具有较低的优先级。这意味着，如果存在相同选择器的情况下，以@import引入的CSS文件定义的样式会被普通link引入的CSS文件定义的样式覆盖。
- 当使用javascript
当使用javascript 控制DOM去改变样式的时候，只能使用link方式，因为@import只有CSS才能识别，DOM无法控制；
