今天小編給大家分享的是怎么在html頁(yè)面中調(diào)用外部樣式，相信很多人都不太了解，為了讓大家更加了解，所以給大家總結(jié)了以下內(nèi)容，一起往下看吧。一定會(huì)有所收獲的哦。

專(zhuān)注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)貴陽(yáng)免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了近1000家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

兩種調(diào)用方法：1、使用link標(biāo)簽調(diào)用，語(yǔ)法“”；2、利用“@import”關(guān)鍵字調(diào)用，語(yǔ)法“”。

CSS外部樣式表

如果 CSS 樣式被放置在網(wǎng)頁(yè)文檔外部的文件中，則稱(chēng)為外部樣式表，一個(gè) CSS 樣式表文檔就表示一個(gè)外部樣式表。

實(shí)際上，外部樣式表也就是一個(gè)文本文件，擴(kuò)展名為.css。當(dāng)把CSS樣式代碼復(fù)制到一個(gè)文本文件中后，另存為.css文件，則它就是一個(gè)外部樣式表。

html頁(yè)面中調(diào)用外部樣式表的兩種方法

外部樣式表必須導(dǎo)入到網(wǎng)頁(yè)文檔中，才能夠被瀏覽器識(shí)別和解析。外部樣式表文件可以通過(guò)兩種方法導(dǎo)入到 HTML 文檔中。

1、使用 標(biāo)簽調(diào)用（鏈接式）

使用 標(biāo)簽調(diào)用外部樣式表文件：

對(duì)各個(gè)屬性的說(shuō)明：

• href 屬性設(shè)置外部樣式表文件的地址，可以是相對(duì)地址，也可以是絕對(duì)地址。

• rel 屬性定義關(guān)聯(lián)的文檔，這里表示關(guān)聯(lián)的是樣式表。

• type 屬性定義導(dǎo)入文件的類(lèi)型，同 style 元素一樣，text/css表明為 CSS 文本文件。

一般在定義 標(biāo)簽時(shí)，應(yīng)定義 3 個(gè)基本屬性，其中 href 是必須設(shè)置屬性。

通過(guò) HTML 的 標(biāo)簽，將外部樣式表文件鏈接到 HTML 文檔中，是網(wǎng)絡(luò)上網(wǎng)站應(yīng)用最多的方式，同時(shí)也是最實(shí)用的方式。這種方法將 HTML 文檔和 CSS 文件完全分離，實(shí)現(xiàn)結(jié)構(gòu)層和表示層的徹底分離，增強(qiáng)網(wǎng)頁(yè)結(jié)構(gòu)的擴(kuò)展性和 CSS 樣式的可維護(hù)性。

示例：使用鏈接式為 HTML 代碼應(yīng)用樣式，書(shū)寫(xiě)、更改方便。

    
我是被 lianjie-2.css 文件控制的，樓下的你呢？？
    
樓上的，lianjie.css 文件給我穿的花衣服。

在上面示例中，通過(guò) link 鏈接兩個(gè) CSS 文件，且都有效，這也是網(wǎng)站制作者將公共部分放入一個(gè) CSS 文件，當(dāng)前頁(yè)面樣式編寫(xiě)新的樣式文件。

lianjie.css 文件代碼：

h4{
    font-weight: normal;  /*取消標(biāo)題默認(rèn)加粗效果*/
    background-color: #66CC99;  /* 設(shè)置背景色 */
    height: 50px;  /*設(shè)置標(biāo)簽的高度*/
    line-height:50px;  /* 設(shè)置標(biāo)簽的行高 */
}
span{
    color: #FFOOOO;  /* 字體顏色 */
    font-weight:bold;  /* 字體加粗 */
}

lianjie-2.css 文件代碼：

p{
    color: #FF3333;  /*字體顏色設(shè)置*/
    font-weight: bold;  /* 字體加粗 */
    border-bottom: 3px dashed #009933;  /* 設(shè)置下邊框線 */
    line-height: 30px;  /* 設(shè)置行高 */
}

鏈接式樣式使 CSS 代碼和 HTML 代碼完全分離，達(dá)到結(jié)構(gòu)與樣式的分開(kāi)，使 HTML 代碼專(zhuān)門(mén)構(gòu)建頁(yè)面結(jié)構(gòu)，而美化工作由 CSS 完成。

鏈接式導(dǎo)入 CSS 樣式的好處：

• CSS 文件可以放在不同的 HTML 文件中，使網(wǎng)站所有頁(yè)面樣式統(tǒng)一；

• 再者將 CSS 代碼放入一個(gè) CSS 文件中便于管理、減少代碼以及維護(hù)時(shí)間；

• 當(dāng)修改 CSS 文件時(shí)，所有應(yīng)用此 CSS 文件的 HTML 文件都將更新，而不必從服務(wù)器上將所有的頁(yè)面取回再修改完畢后上傳。

2、使用 @import 關(guān)鍵字調(diào)用（導(dǎo)入式）

@import指令是CSS語(yǔ)言的一部分，使用時(shí)把這個(gè)指令添加到HTML的一個(gè)

在 @import 關(guān)鍵字后面，利用 url() 函數(shù)包含具體的外部樣式表文件的地址。

示例：導(dǎo)入樣式表 lianjie.css 和 daoru.css 以及書(shū)寫(xiě) 標(biāo)簽的背景色，注意導(dǎo)入樣式表和 標(biāo)簽樣式的前后不可顛倒。

    @import url(lianjie.css);
    @import url(daoru.css);
    body { background-color: #e4e929; }



    

        
我是被 lianjie-2.css 文件控制的，樓下的你呢？？
        
褸上的，lianjie.css文件給我穿的花衣服。
    

在上面示例中，必須是@import url("lianjie-2.css"); p{text-indent: 3em;}，而不能是p{text-indent:3em;} @import url("lianjie-2.css");，否則將導(dǎo)入效果無(wú)效。在 CSS 文件中也需要將 @import 放在前面，后面加入 CSS 樣式，否則也是無(wú)效。

lianjie.css 文件代碼，同上一個(gè)示例即鏈接式。

daoru.css 文件代碼：

@import url("lianjie-2.css");
p { text-indent: 3em; }

兩種方式（link和@import）的區(qū)別

標(biāo)簽屬于html標(biāo)簽，而@import是css提供的一種方式，標(biāo)簽不僅可以引入css，還可以做其他事，而@import只能引入css；

加載順序的區(qū)別：當(dāng)一個(gè)頁(yè)面被瀏覽時(shí)，link引入的css會(huì)被同步加載，而@import引用的css是等到其他元素全被下載完之后才被加載；

兼容性的不同：@import是CSS2.1才提出的，所以只有在IE5以上才支持，低版本的瀏覽器不支持，而標(biāo)簽無(wú)此問(wèn)題；

當(dāng)使用javascript控制DOM去改變樣式時(shí)，只能使用標(biāo)簽，因?yàn)锧import不是DOM可以控制的。

關(guān)于怎么在html頁(yè)面中調(diào)用外部樣式就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的參考價(jià)值，可以學(xué)以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。