http://www.biancheng.net/

運(yùn)行效果如下圖所示：

因?yàn)閮?nèi)嵌樣式表需要將 CSS 樣式定義在 HTML 文檔的內(nèi)部，所以會(huì)導(dǎo)致文檔的體積變大，而且當(dāng)有其它文檔也需要使用內(nèi)嵌樣式表中同樣的樣式時(shí)，無(wú)法引入到其他文檔，必須在其它文檔中重新定義，會(huì)導(dǎo)致代碼冗余，不利于后期維護(hù)。

2. 內(nèi)聯(lián)樣式

內(nèi)聯(lián)樣式就是將樣式信息直接定義在 HTML 標(biāo)簽的 style 屬性中，由于內(nèi)聯(lián)樣式定義在標(biāo)簽內(nèi)部，所以它只對(duì)所在的標(biāo)簽有效。示例代碼如下：

    
        
      
    
        
編程幫
        
http://www.biancheng.net/
    

運(yùn)行效果如下圖所示：

內(nèi)聯(lián)樣式雖然可以很方便的為 HTML 標(biāo)簽賦予 CSS 樣式，但它的缺點(diǎn)也非常明顯，不推薦過(guò)多使用。

• 定義內(nèi)聯(lián)樣式需要在每個(gè) HTML 標(biāo)簽中定義 style 屬性，很不方便；
• 在內(nèi)聯(lián)樣式中使用雙引號(hào)或單引號(hào)時(shí)要特別小心，因?yàn)?HTML 標(biāo)簽的屬性通常都會(huì)使用雙引號(hào)來(lái)包裹屬性的值，例如 ；
• 在內(nèi)聯(lián)樣式中定義的樣式不能再其它任何地方重用；
• 內(nèi)聯(lián)樣式在后期維護(hù)時(shí)很不方便，因?yàn)橐粋€(gè)網(wǎng)站通常有很多頁(yè)面組成，當(dāng)修改頁(yè)面樣式時(shí)需要對(duì)頁(yè)面逐個(gè)修改；
• 添加過(guò)多的內(nèi)聯(lián)樣式會(huì)導(dǎo)致 HTML 文檔的體積增大。

3. 外部樣式表

外部樣式表是最常見(jiàn)也是最推薦的引用 CSS 的方式，您只需要將 CSS 樣式定義在一個(gè) .css 格式的文件中，然后使用 HTML 的
標(biāo)簽將這個(gè) .css 格式的樣式文件應(yīng)用到 HTML 文檔中。

下面通過(guò)具體的示例來(lái)演示外部樣式表的使用。首先，需要定義一個(gè) .css 格式的樣式文件（例如 style.css），如下所示：

body {
    background-color: linen;
}
h1 {
    color: maroon;
    margin-left: 40px;
}

然后我們?cè)?HTML 文檔中引入這個(gè) style.css 文件，如下所示：

    
        
        
      
    
        
編程幫
        
http://www.biancheng.net/
    

運(yùn)行效果如下圖所示：

因?yàn)?CSS 樣式定義在單獨(dú)的 .css 格式的文件中，所以可以在多個(gè)頁(yè)面之間引用，若要修改網(wǎng)頁(yè)的樣式，只需要修改這個(gè) CSS 樣式文件即可，很方便。

4. 導(dǎo)入樣式表

您同樣可以使用
@import 來(lái)引用外部樣式表，這一點(diǎn)與使用
標(biāo)簽比較相似。使用
@import 引用外部樣式表的語(yǔ)法格式如下：

@import "URL";
或者
@import url("URL");

其中 URL 為外部樣式表的存放路徑。

假如還使用上面定義的 style.css 樣式表，通過(guò)
@import 將其引用到 HTML 文檔的代碼如下：

    
        
        
      
    
        
編程幫
        
http://www.biancheng.net/
    

運(yùn)行效果如下圖所示：

在使用
@import 引用 CSS 時(shí)有以下幾點(diǎn)需要注意：

• 在 HTML 文檔中使用 @import 時(shí)，@import 需要定義在