Html中引入css的主要方式有四種，分別是外部樣式、內(nèi)部樣式、內(nèi)聯(lián)樣式、導(dǎo)入式。

一、外部樣式

(一) 使用外部樣式的好處

1.減少代碼量 ，網(wǎng)站中相同部分的樣式只需要編寫(xiě)一次，我們只需要把css文件引入到不同的html頁(yè)面中即可實(shí)現(xiàn)展示效果。

2.更改網(wǎng)站風(fēng)格方便，我們可以通過(guò)修改一個(gè)css文件就可以實(shí)現(xiàn)整個(gè)網(wǎng)站的外觀(guān)修改。

3.Html頁(yè)面渲染時(shí)，css文件能夠被同時(shí)加載。

4.結(jié)構(gòu)與表現(xiàn)分離，便于后期維護(hù)。

(二) 適用于多個(gè)頁(yè)面需要相同樣式內(nèi)容的時(shí)候使用

(三) 書(shū)寫(xiě)位置：新建單獨(dú)的后綴名為.css文件，使用link標(biāo)簽引入到html頁(yè)面中，將link標(biāo)簽放到Html頁(yè)面的head標(biāo)簽中

例：

rel:規(guī)定當(dāng)前文檔與被連接文檔之間的關(guān)系.

href:規(guī)定為連接文檔的位置

type:規(guī)定被連接文檔的MIME類(lèi)型

二、內(nèi)部樣式

(一) 使用內(nèi)部樣式的好處

1.結(jié)構(gòu)與表現(xiàn)分離，便于后期維護(hù)。

2.所有的CSS控制都是針對(duì)單獨(dú)的面，沒(méi)有多余的CSS代碼。

3.同樣頁(yè)面中相同的樣式可以重復(fù)使用。

(二) 使用內(nèi)部樣式的缺點(diǎn)

1.只能在一個(gè)頁(yè)面中使用

2.網(wǎng)站更換風(fēng)格麻煩

3.Css在html頁(yè)面中,頁(yè)面顯得臃腫

(三) 適用于個(gè)別頁(yè)面需要特殊樣式時(shí)

(四) 書(shū)寫(xiě)位置：寫(xiě)在html頁(yè)面的head標(biāo)簽之間，在head標(biāo)簽之間書(shū)寫(xiě)style標(biāo)簽

例:

三、行間樣式

(一) 使用內(nèi)部樣式的好處

1. 單獨(dú)修改單個(gè)標(biāo)簽的樣式

(二) 使用內(nèi)部樣式的缺點(diǎn)

1. 結(jié)構(gòu)與表現(xiàn)沒(méi)有分類(lèi)，不利于后期維護(hù)。

2. 只能修改單個(gè)標(biāo)簽的樣式，代碼重復(fù)利用率不高，代碼冗長(zhǎng)。

(三) 適用于個(gè)別標(biāo)簽需要特殊樣式時(shí)

(四) 書(shū)寫(xiě)位置：在標(biāo)簽的開(kāi)始標(biāo)簽內(nèi)部書(shū)寫(xiě)style=””

例:

四. 導(dǎo)入式

(一) 使用導(dǎo)入的好處

1.減少代碼量，網(wǎng)站中相同的部分的樣式只需要書(shū)寫(xiě)一次，后續(xù)只需要把css文件引入到不同的Html頁(yè)面中即可。

2.更改網(wǎng)站風(fēng)格方便，我們可以通過(guò)修改一個(gè)css文件，就可以修個(gè)整個(gè)網(wǎng)站的外觀(guān)。

3.結(jié)構(gòu)與表現(xiàn)分離，便于后期維護(hù)。

(二) 使用導(dǎo)入的缺點(diǎn)

1.需要等Html頁(yè)面全部加載完才能加載css文件。

(三) 適用于多個(gè)頁(yè)面需要展示相同樣式的時(shí)候

(四) 書(shū)寫(xiě)位置:寫(xiě)在Html頁(yè)面的head標(biāo)簽中的style表現(xiàn)中，用@import導(dǎo)入css文件