.jpg)
在HTML中，
解決方案
-
嵌入式樣式： 直接在HTML文檔的
部分使用
-
鏈接外部樣式表： 使用標(biāo)簽鏈接到外部CSS文件。這種方式適用于樣式規(guī)則較多，且需要在多個(gè)頁面共享樣式的情況。
首先，創(chuàng)建一個(gè)名為style.css的CSS文件，并在其中編寫CSS規(guī)則：
/* style.css */ body { background-color: #f0f0f0; font-family: Arial, sans-serif; } h1 { color: blue; text-align: center; } p { color: green; }然后，在HTML文檔的
部分使用標(biāo)簽鏈接到這個(gè)CSS文件：
<!DOCTYPE html> <html> <head> <title>鏈接外部樣式表示例</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>這是一個(gè)標(biāo)題</h1> <p>這是一個(gè)段落。</p> </body> </html>
這里，rel="stylesheet"屬性指定鏈接的資源是樣式表，type="text/css"屬性指定樣式表的MIME類型，href="style.css"屬性指定CSS文件的路徑。
為什么推薦使用外部樣式表而不是嵌入式樣式？
從代碼組織和維護(hù)的角度來看，外部樣式表更勝一籌。想象一下，如果你的網(wǎng)站有幾十個(gè)頁面，每個(gè)頁面都嵌入相同的CSS代碼，一旦需要修改某個(gè)樣式，你就得修改所有頁面。這簡直是噩夢。而使用外部樣式表，你只需要修改一個(gè)CSS文件，所有頁面都會(huì)自動(dòng)更新。另外，瀏覽器會(huì)對外部樣式表進(jìn)行緩存，這意味著用戶訪問多個(gè)頁面時(shí)，只需要下載一次CSS文件，可以提高頁面加載速度。
如何使用媒體查詢在
媒體查詢允許你根據(jù)設(shè)備的特性（如屏幕尺寸、分辨率、方向等）應(yīng)用不同的樣式。你可以在
<!DOCTYPE html> <html> <head> <title>媒體查詢示例</title> <style> body { font-family: Arial, sans-serif; } /* 默認(rèn)樣式 */ .container { width: 90%; margin: 0 auto; } /* 當(dāng)屏幕寬度小于768px時(shí)應(yīng)用的樣式 */ @media (max-width: 768px) { .container { width: 100%; padding: 10px; } h1 { font-size: 1.5em; } } /* 當(dāng)屏幕寬度大于768px時(shí)應(yīng)用的樣式 */ @media (min-width: 769px) { .container { max-width: 1200px; } } </style> </head> <body> <div class="container"> <h1>響應(yīng)式設(shè)計(jì)示例</h1> <p>這個(gè)頁面會(huì)根據(jù)屏幕尺寸調(diào)整布局。</p> </div> </body> </html>
在這個(gè)例子中，我們定義了三種不同的樣式：默認(rèn)樣式、屏幕寬度小于768px時(shí)的樣式和屏幕寬度大于768px時(shí)的樣式。@media (max-width: 768px)表示當(dāng)屏幕寬度小于768像素時(shí)，應(yīng)用其中的樣式規(guī)則。@media (min-width: 769px)表示當(dāng)屏幕寬度大于768像素時(shí)，應(yīng)用其中的樣式規(guī)則。這種方式可以讓你輕松地創(chuàng)建響應(yīng)式網(wǎng)頁，適應(yīng)不同的設(shè)備。
CSS預(yù)處理器如Sass和Less，可以讓你使用變量、嵌套規(guī)則、混合（Mixins）等高級特性來編寫CSS代碼，提高代碼的可維護(hù)性和可重用性。雖然你不能直接在
例如，假設(shè)你有一個(gè)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編譯器將這個(gè)文件編譯成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文檔中使用標(biāo)簽鏈接到這個(gè)CSS文件：
<!DOCTYPE html> <html> <head> <title>使用Sass示例</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <button class="btn">點(diǎn)擊我</button> </body> </html>
通過這種方式，你可以充分利用CSS預(yù)處理器的強(qiáng)大功能，編寫更高效、更易于維護(hù)的CSS代碼。
.png)
