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方式，都有各自的適用場景，我們應該根據實際情況進行選擇。