本文目錄導(dǎo)讀：
如何將已寫(xiě)好的CSS加入網(wǎng)頁(yè)
內(nèi)部樣式表
內(nèi)部樣式表是將CSS代碼寫(xiě)在HTML文檔的<head>標(biāo)簽中，使用<style>標(biāo)簽將其包裹起來(lái)，這種方法適用于單個(gè)頁(yè)面的樣式定義，且樣式代碼不會(huì)被其他頁(yè)面重復(fù)使用。
以下是一個(gè)簡(jiǎn)單的內(nèi)部樣式表示例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
font-size: 2em;
}
</style>
</head>
<body>
<h1>歡迎來(lái)到我的網(wǎng)站！</h1>
<p>這是一個(gè)示例頁(yè)面，展示了如何添加CSS樣式。</p>
</body>
</html>在上面的示例中，我們定義了頁(yè)面的背景顏色、字體家族以及標(biāo)題的字體顏色和大小。
外部樣式表
外部樣式表是將CSS代碼寫(xiě)在單獨(dú)的.css文件中，然后通過(guò)HTML文檔的<link>標(biāo)簽將其引入，這種方法適用于多個(gè)頁(yè)面重復(fù)使用相同的樣式代碼。
假設(shè)我們有一個(gè)名為styles.css的外部樣式表文件，我們可以這樣引入：
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>歡迎來(lái)到我的網(wǎng)站！</h1> <p>這是一個(gè)示例頁(yè)面，展示了如何添加CSS樣式。</p> </body> </html>
在上面的示例中，我們通過(guò)styles.css文件來(lái)引入外部樣式表，這種方法可以使得樣式代碼更加模塊化和可維護(hù)。
內(nèi)聯(lián)樣式表
內(nèi)聯(lián)樣式表是將CSS代碼直接寫(xiě)在HTML元素的style屬性中，這種方法適用于單個(gè)元素的樣式定義，且樣式代碼不會(huì)被其他元素重復(fù)使用。
我們可以這樣為一個(gè)段落添加樣式：
<p style="color: #333; font-size: 16px;">這是一個(gè)示例段落，展示了如何添加CSS樣式。</p>
在上面的示例中，我們?yōu)槎温湓靥砑恿俗煮w顏色和大小的內(nèi)聯(lián)樣式，這種方法可以使得樣式更加***和靈活。
版權(quán)聲明：除非特別標(biāo)注，否則均為本站原創(chuàng)文章，轉(zhuǎn)載時(shí)請(qǐng)以鏈接形式注明文章出處。
