3、外部样式表

外部样式表是将CSS代码写在一个单独的CSS文件中，然后在HTML文档中使用标签引入，这种方法的优点是可以将样式代码与HTML代码分离，便于维护和复用，浏览器会缓存外部样式表，提高页面加载速度。

创建一个名为style.css的CSS文件：

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

在HTML文档中使用标签引入外部样式表：

  


  
这是一个红色的段落。

4、使用CSS预处理器（如Sass、Less等）

CSS预处理器是一种脚本语言，可以扩展CSS的功能，使编写和维护CSS更加方便，使用CSS预处理器时，需要先安装相应的编译器，将预处理器代码编译成普通的CSS代码，将编译后的CSS文件引入到HTML文档中。

以Sass为例，首先安装Node.js和Sass编译器：https://nodejs.org/en/download/ 和 https://sasslang.com/install，创建一个名为style.scss的Sass文件：

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

接下来，安装Sass编译器：https://sasslang.com/install，在命令行中运行以下命令将Sass文件编译成CSS文件：

sass style.scss style.css watch

在HTML文档中使用标签引入编译后的CSS文件：

  


  
这是一个红色的段落。

在HTML中写入CSS的方法有内联样式、内部样式表、外部样式表和CSS预处理器，外部样式表和CSS预处理器是最常用的方法，因为它们可以使样式代码与HTML代码分离，便于维护和复用。