CSS是创建网页样式的重要元素之一，它可以通过将样式从HTML文档中分离出来，帮助我们更好地维护网站。在这篇文章中，我们将介绍如何将CSS从HTML文档中分离出来。
首先，可以将CSS代码放置在HTML文档的头部区域。通过使用内联样式或嵌入式样式，我们可以在文档中直接添加样式规则。例如：
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>此时，在HTML代码中直接定义了p标签的样式，文档加载后就会直接应用这些样式。但是，这种方式的缺点是不适合大规模的网站，如果有多个页面需要应用同样的样式，就需要在每个页面都复制一份CSS代码，这会导致代码冗余，不利于维护。
因此，更好的办法是将CSS代码从HTML文档中分离开来，可以将CSS代码放置在一个单独的CSS文件中。在HTML文档中使用标签将其引入。例如：<head> <link rel="stylesheet" href="style.css"> </head>这里的style.css是我们单独创建的一个样式表文件，可以使用任何文本编辑器编写，例如：
p {
color: blue;
font-size: 16px;
}此时，在每个HTML文档中，我们只需要将标签引入这个样式表文件即可，可以避免代码冗余，便于维护。
此外，还可以使用@import方式将外部样式表引入到另一个样式表中。例如：@import url("style.css");这样可以使样式表更加灵活，方便组件化开发。需要注意的是，@import方式并不推荐使用，因为它会增加样式表的下载时间，可能会导致性能问题。
在这篇文章中，我们介绍了如何将CSS代码从HTML文档中分离，避免代码冗余，从而更好地维护网站。无论是内联样式、嵌入式样式、外部样式表，还是使用@import方式，都有各自的适用场景，我们应该根据实际情况进行选择。