歡迎來到我的個(gè)人網(wǎng)站。

3. 外部鏈接（External Link）

最常用的方法是將CSS規(guī)則寫在一個(gè)獨(dú)立的.css文件中，并通過HTML文檔的標(biāo)簽將其鏈接到HTML文檔，這樣做的好處是可以在多個(gè)頁面間共享同一個(gè)樣式表，有助于保持整體風(fēng)格的一致性，并方便管理和維護(hù)。

創(chuàng)建一個(gè)名為styles.css的文件：

body {
    backgroundcolor: lightblue;
}
h1 {
    color: white;
    textalign: center;
}
p {
    fontfamily: verdana;
    fontsize: 20px;
}

在HTML文檔中使用標(biāo)簽引入該CSS文件：

    


    
我的網(wǎng)站
    
歡迎來到我的個(gè)人網(wǎng)站。

確保href屬性中的路徑正確指向了CSS文件的位置，如果CSS文件位于與HTML文件相同的目錄中，則可以直接使用文件名；如果在不同的目錄中，需要指定相對(duì)路徑或絕對(duì)路徑。

4. @import 導(dǎo)入

除了使用標(biāo)簽外，還可以使用CSS的@import規(guī)則在樣式表中導(dǎo)入其他樣式表，這通常用在嵌套樣式表中，但也可以用于外部樣式表，需要注意的是，@import必須在樣式表的開頭使用，而且它可能會(huì)導(dǎo)致性能問題，因?yàn)樗鼤?huì)延遲瀏覽器加載樣式表的時(shí)間。

在styles.css文件中導(dǎo)入另一個(gè)樣式表typography.css：

@import url('typography.css');
body {
    backgroundcolor: lightblue;
}
h1 {
    color: white;
    textalign: center;
}
p {
    fontfamily: verdana;
    fontsize: 20px;
}

然后在HTML中使用：

    


    
我的網(wǎng)站
    
歡迎來到我的個(gè)人網(wǎng)站。

最佳實(shí)踐建議：

組織和維護(hù)：對(duì)于大型項(xiàng)目，推薦使用外部鏈接的方式引入CSS，這樣更易于管理和更新樣式。

性能優(yōu)化：避免使用@import，因?yàn)樗赡軙?huì)導(dǎo)致額外的HTTP請(qǐng)求和加載延遲，使用標(biāo)簽可以并行加載資源，提高性能。

響應(yīng)式設(shè)計(jì)：考慮使用媒體查詢來創(chuàng)建適應(yīng)不同設(shè)備屏幕大小的樣式，這通常在外部CSS文件中實(shí)現(xiàn)。

瀏覽器兼容性：確保你的CSS代碼兼容目標(biāo)瀏覽器，可以使用工具如Autoprefixer來自動(dòng)添加必要的瀏覽器前綴。

通過以上方法，你可以有效地在HTML中引入和使用CSS，創(chuàng)建出既美觀又功能豐富的網(wǎng)頁。