在HTML中，我们可以通过多种方式导入CSS文件，以下是一些常见的方法：
1、内联样式：在HTML元素中使用"style"属性直接编写CSS代码，这种方式适用于简单的样式需求，但不适合复杂的项目。
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>这是一个红色的段落。</p>
</body>
</html>
2、内部样式表：在HTML文档的<head>部分使用<style>标签编写CSS代码，这种方式适用于较小的项目，因为所有的样式都在一个文件中。
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>这是一个红色的段落。</p>
</body>
</html>
3、外部样式表：将CSS代码保存在一个单独的.css文件中，然后在HTML文档中使用<link>标签引入该文件，这是最常用的方式，因为它允许我们将样式和内容分离，便于维护和管理。
创建一个名为styles.css的CSS文件：
p {
color: red;
font-size: 20px;
}
在HTML文档中使用<link>标签引入该文件：
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <p>这是一个红色的段落。</p> </body> </html>
4、@import规则：在CSS文件中使用@import规则引入其他CSS文件，这种方式与外部样式表类似，但它是一种特殊的语法，只能在CSS文件中使用，需要注意的是，由于浏览器兼容性问题，建议优先使用<link>标签引入外部样式表。
创建一个名为styles.css的CSS文件：
@import url("reset.css");
@import url("typography.css");
@import url("colors.css");
5、CSS预处理器：使用CSS预处理器（如Sass、Less等）编写更高级、更易于维护的CSS代码，这些预处理器提供了许多高级功能，如变量、嵌套、混合等，要使用预处理器，需要先安装相应的编译器，然后将预处理器代码编译成普通的CSS文件，使用Sass预处理器：
创建一个名为styles.scss的Sass文件：
$primary-color: red;
$font-size: 20px;
p {
color: $primary-color;
font-size: $font-size;
}
安装Sass编译器（如node-sass）：npm install -g node-sass，然后运行以下命令将Sass文件编译成CSS文件：node-sass styles.scss styles.css，在HTML文档中使用<link>标签引入生成的CSS文件：<link rel="stylesheet" href="styles.css">。