3、外部样式表

外部样式表是将CSS代码写在一个单独的文件中，然后在HTML文件中引用这个文件，这种方法的优点是可以将样式与HTML代码分离，便于维护和重用，这是最常用的一种方法。

创建一个CSS文件，例如styles.css：

p {
  color: red;
  fontsize: 20px;
}

在HTML文件中引用这个CSS文件：

这是一个红色的段落。

4、导入样式表（CSS3新增）

导入样式表是将一个CSS文件中的样式导入到另一个CSS文件中，这种方法的优点是可以减少HTTP请求，提高页面加载速度，这种方法需要浏览器支持CSS3。

创建一个CSS文件，例如styles.css：

p {
  color: red;
  fontsize: 20px;
}

在另一个CSS文件中导入这个样式：

@import url("styles.css");

在HTML文件中引用这个CSS文件：

这是一个红色的段落。

5、使用预处理器（如Sass、Less等）编写CSS代码并编译成CSS文件，这种方法可以提高CSS代码的可维护性和可读性，但是需要安装预处理器编译器和相应的插件或工具，使用Sass编写的代码如下：

$color: red;
$fontsize: 20px;
p {
  color: $color;
  fontsize: $fontsize;
}

使用Sass编译器将Sass代码编译成CSS文件：

sass input.scss output.css r sourcemap=none style=compressed precision=6 nodebuginfo quiet sourcemap=none sourcemapembed=false loadpath=node_modules/bootstrap/scss,node_modules/bootstrap/scss/_functions,node_modules/bootstrap/scss/mixins,node_modules/bootstrap/scss/variables,node_modules/bootstrap/scss/utilities,node_modules/bootstrap/scss/forms,node_modules/bootstrap/scss/buttons,node_modules/bootstrap/scss/nav,node_modules/bootstrap/scss/reboot,node_modules/bootstrap/scss/type,node_modules/bootstrap/scss/images,node_modules/bootstrap/scss/containers,node_modules/bootstrap/scss/grid,node_modules/bootstrap/scss/table,node_modules/bootstrap/scss/carousel,node_modules/bootstrap/scss/breadcrumb,node_modules/bootstrap/scss/card,node_modules/bootstrap/scss/listgroup,node_modules/bootstrap/scss/modal,node_modules/bootstrap/scss/navbar,node_modules/bootstrap/scss/transition,node_modules/bootstrap/scss/tooltip,node_modules/bootstrap/scss/popover,node_modules/bootstrap/scss/scrollspy,node_modules/bootstrap/scss/dropdown,node_modules/bootstrap/scss/badge,node_modules/bootstrap/scss/pills,node_modules/bootstrap/scss