这是一个红色的div
```
这种方式简单易用，但只对当前标签有效，且不利于维护和扩展。
2. 内部样式（Internal Styles）
内部样式是将CSS代码放在HTML文档的``部分，使用`
这是一个红色的div
```
这种方式适用于小型的项目或页面，但同样不利于维护和扩展。
3. 外部样式（External Styles）
外部样式是将CSS代码保存为一个单独的文件，然后在HTML文档中通过``标签引入。例如：
```html
```
在`style.css`文件中定义样式：
```css
.red {
color: red;
}
```
这种方式是最佳实践，因为它将HTML和CSS分离，便于维护和扩展，同时还可以利用浏览器缓存，提高页面加载速度。
4. 导入样式（Import Styles）
导入样式是CSS3提供的一种引入外部样式的方法，通过在CSS文件中使用`@import`规则来实现。例如：
```css
@import url("style.css");
```
这种方式与外部样式类似，但需要在每个需要引入样式的CSS文件中重复`@import`规则，不够灵活。
二、选择合适的引入CSS方式
1. 对于简单的页面，可以使用内联样式或内部样式。
2. 对于需要维护和扩展的页面，推荐使用外部样式。
3. 如果需要在多个CSS文件中引入外部样式，可以使用导入样式。
三、总结
HTML引入CSS的方式有内联样式、内部样式、外部样式和导入样式。选择合适的方式可以提高网站的可维护性和扩展性。在实际开发中，根据项目需求和团队习惯选择合适的引入方式即可。
## 文末QA问答
Q：什么是内联样式？
A：内联样式是指直接在HTML标签中使用style属性来设置样式，适用于简单页面的样式设置。
Q：内部样式和外部样式有什么区别？
A：内部样式是将CSS代码放在HTML文档的``部分，外部样式是将CSS代码保存为一个单独的文件，并在HTML文档中通过``标签引入。
Q：为什么推荐使用外部样式？
A：外部样式将HTML和CSS分离，便于维护和扩展，同时可以利用浏览器缓存，提高页面加载速度。