【W(wǎng)eb前端基礎(chǔ)知識】html中如何引用css

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

一、外部樣式

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

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

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

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

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

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

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

例：

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

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

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

二、內(nèi)部樣式

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

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

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

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

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

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

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

3.Css在html頁面中,頁面顯得臃腫

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

(四) 書寫位置：寫在html頁面的head標(biāo)簽之間，在head標(biāo)簽之間書寫style標(biāo)簽

例:

三、行間樣式

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

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

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

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

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

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

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

例:

四. 導(dǎo)入式

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

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

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

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

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

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

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

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