将CSS样式放在独立的.css文件中，然后在HTML文件中使用标签引入。这样可以实现CSS与HTML的分离，提高代码可维护性。
如何分离CSS与HTML
分离CSS与HTML是前端开发中的一项重要技术，可以提高代码的可维护性和重用性，下面是一些常用的方法来分离CSS与HTML：
1、内联样式（Inline Styles）
- 在HTML元素中使用style属性直接定义样式。
- 示例：<p style="color: red;">这是红色文字</p>
2、内部样式表（Internal Style Sheets）
- 在HTML文档头部使用<style>标签定义样式。
- 示例：
```html
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>这是红色文字</p>
</body>
```
3、外部样式表（External Style Sheets）
- 将CSS代码保存在一个独立的文件中，然后在HTML文档中使用<link>标签引入该文件。
- 示例：
```html
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>这是红色文字</p>
</body>
```
- CSS文件（styles.css）：
```css
p {
color: red;
}
```
4、@import 规则（@import Directive）
- 在CSS文件中使用@import规则引入其他CSS文件。
- 示例：
```css
@import url("styles.css");
```
- 注意：@import在IE浏览器中不被支持，建议使用<link>标签代替。
5、CSS预处理器（CSS Preprocessors）
- 使用预处理器如Sass、Less等来编写CSS，可以提供更强大的功能和更好的可维护性。
- 示例（Sass）：
```scss
$color: red;
p {
color: $color;
}
```
- 编译后的CSS：
```css
p {
color: red;
}
```