在HTML中，
解決方案
-
嵌入式樣式： 直接在HTML文檔的
部分使用
-
鏈接外部樣式表： 使用標簽鏈接到外部CSS文件。這種方式適用于樣式規則較多，且需要在多個頁面共享樣式的情況。
首先，創建一個名為style.css的CSS文件，并在其中編寫CSS規則：
/* style.css */ body { background-color: #f0f0f0; font-family: Arial, sans-serif; } h1 { color: blue; text-align: center; } p { color: green; }然后，在HTML文檔的
部分使用標簽鏈接到這個CSS文件：
<!DOCTYPE html> <html> <head> <title>鏈接外部樣式表示例</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>這是一個標題</h1> <p>這是一個段落。</p> </body> </html>
這里，rel="stylesheet"屬性指定鏈接的資源是樣式表，type="text/css"屬性指定樣式表的MIME類型，href="style.css"屬性指定CSS文件的路徑。
為什么推薦使用外部樣式表而不是嵌入式樣式？
從代碼組織和維護的角度來看，外部樣式表更勝一籌。想象一下，如果你的網站有幾十個頁面，每個頁面都嵌入相同的CSS代碼，一旦需要修改某個樣式，你就得修改所有頁面。這簡直是噩夢。而使用外部樣式表，你只需要修改一個CSS文件，所有頁面都會自動更新。另外，瀏覽器會對外部樣式表進行緩存，這意味著用戶訪問多個頁面時，只需要下載一次CSS文件，可以提高頁面加載速度。
如何使用媒體查詢在
媒體查詢允許你根據設備的特性（如屏幕尺寸、分辨率、方向等）應用不同的樣式。你可以在
<!DOCTYPE html> <html> <head> <title>媒體查詢示例</title> <style> body { font-family: Arial, sans-serif; } /* 默認樣式 */ .container { width: 90%; margin: 0 auto; } /* 當屏幕寬度小于768px時應用的樣式 */ @media (max-width: 768px) { .container { width: 100%; padding: 10px; } h1 { font-size: 1.5em; } } /* 當屏幕寬度大于768px時應用的樣式 */ @media (min-width: 769px) { .container { max-width: 1200px; } } </style> </head> <body> <div class="container"> <h1>響應式設計示例</h1> <p>這個頁面會根據屏幕尺寸調整布局。</p> </div> </body> </html>
在這個例子中，我們定義了三種不同的樣式：默認樣式、屏幕寬度小于768px時的樣式和屏幕寬度大于768px時的樣式。@media (max-width: 768px)表示當屏幕寬度小于768像素時，應用其中的樣式規則。@media (min-width: 769px)表示當屏幕寬度大于768像素時，應用其中的樣式規則。這種方式可以讓你輕松地創建響應式網頁，適應不同的設備。
曾經的想法是，使用scoped可以避免樣式沖突，讓組件的樣式更加獨立。但實際上，它并沒有解決所有問題，反而引入了新的復雜性。更好的做法是使用CSS Modules、Shadow DOM或者BEM（Block, Element, Modifier）等技術來管理CSS作用域，避免樣式沖突。這些技術提供了更強大、更可靠的解決方案。
如何使用CSS預處理器（如Sass或Less）來增強
CSS預處理器如Sass和Less，可以讓你使用變量、嵌套規則、混合（Mixins）等高級特性來編寫CSS代碼，提高代碼的可維護性和可重用性。雖然你不能直接在
例如，假設你有一個Sass文件style.scss：
// style.scss $primary-color: #007bff; body { font-family: Arial, sans-serif; background-color: #f8f9fa; } .btn { background-color: $primary-color; color: white; padding: 10px 20px; border: none; border-radius: 5px; &:hover { background-color: darken($primary-color, 10%); } }
你可以使用Sass編譯器將這個文件編譯成CSS文件style.css：
/* style.css */ body { font-family: Arial, sans-serif; background-color: #f8f9fa; } .btn { background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 5px; } .btn:hover { background-color: #0056b3; }
然后，你就可以在HTML文檔中使用標簽鏈接到這個CSS文件：
<!DOCTYPE html> <html> <head> <title>使用Sass示例</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <button class="btn">點擊我</button> </body> </html>
通過這種方式，你可以充分利用CSS預處理器的強大功能，編寫更高效、更易于維護的CSS代碼。
