免費(fèi)AI編程助手
HTML引入CSS的常見方法及解析
我們都知道 HTML 和 CSS 是作用不相同的兩種語言，但是它們對一個(gè)網(wǎng)頁能夠同時(shí)產(chǎn)生作用，網(wǎng)頁（webPage）= 內(nèi)容（html） + 表現(xiàn)（css） + 行為（javascript）。因此需要把 CSS 引入 HTML 一起使用。要想在瀏覽器中顯示出預(yù)期的 CSS 樣式表效果，就要讓瀏覽器識(shí)別并正確調(diào)用 CSS。當(dāng)瀏覽器讀取樣式表時(shí)，要依照文本格式來讀，而且當(dāng) CSS 樣式表放在不同的地方，所產(chǎn)生的作用范圍也是不同的。在 HTML 中，主要用四種方法引入 CSS：行內(nèi)式、內(nèi)嵌式、導(dǎo)入式和鏈接式。
（1）行內(nèi)式
<p style=”color:red”>網(wǎng)頁中css的導(dǎo)入方式</p>
即在標(biāo)記的style屬性中設(shè)定CSS樣式，這種方式本質(zhì)上沒體現(xiàn)出CSS的優(yōu)勢，因此不推薦使用。
（2）嵌入式
<style type=”text/css”>
p{ color:red }
</style>
（3）導(dǎo)入式
<!-- 導(dǎo)入外部樣式：在內(nèi)部樣式表的<style></style>標(biāo)記之間導(dǎo)入一個(gè)外部樣式表，導(dǎo)入時(shí)用@import。 -->
<style type="text/css">
@import "jisuan.css";
</style>
（4）鏈接式
<link href="jisuan.css" rel=”stylesheet” type=”text/css” />
導(dǎo)入式和鏈接式差不多，都是從外部引入 CSS 文件。但是鏈接式對于客戶端用戶瀏覽網(wǎng)站時(shí)，效果會(huì)好些。
鏈接式可以說是現(xiàn)在占統(tǒng)治地位的引入方法。如同 IE 與瀏覽器。這也是最能體現(xiàn) CSS 特點(diǎn)的方法；最能體現(xiàn) DIV+CSS 中的內(nèi)容與顯示分離的思想，也最易改版維護(hù)，代碼看起來也是最美觀的一種。
如果希望用 javascript 來動(dòng)態(tài)決定引入哪個(gè) css 文件，則必須使用連接式才能實(shí)現(xiàn)。大多數(shù)的網(wǎng)站還是比較喜歡使用鏈接的方式引用外部 CSS 的。
采用導(dǎo)入式和鏈接式的區(qū)別：
1、導(dǎo)入式：會(huì)在整個(gè)頁面裝載完成后再裝載 CSS 文件，對于有的瀏覽器來說，在一些情況下，如果網(wǎng)頁文件的體積比較大，則會(huì)出現(xiàn)先顯示無樣式的頁面，閃爍一下之后再出現(xiàn)設(shè)置樣式后的效果，從瀏覽者的感受來說，這是導(dǎo)入式的一個(gè)缺陷。
2、鏈接式：會(huì)在裝載頁面主體部分之前裝載 CSS 文件，這樣顯示出來的網(wǎng)頁從一開始就是帶有樣式效果的。
對于一些比較大的網(wǎng)站，為了便于維護(hù)，可能會(huì)希望把所有的 CSS 樣式分類別放到幾個(gè) CSS 文件中，這樣如果使用連接式引入，就需要幾個(gè)語句分別導(dǎo)入 CSS 文件。如果要調(diào)整 CSS 文件的分類，就需要同時(shí)調(diào)整 HTML 文件，這對于維護(hù)工作來說，是一個(gè)缺陷，如果使用導(dǎo)入式，則可以只引進(jìn)一個(gè)總的 CSS 文件，在這個(gè)文件中再導(dǎo)入其他獨(dú)立 CSS 文件；而鏈接式則不具備這個(gè)特性。
因此給大家的建議是：如果僅需要引入一個(gè) CSS 文件，則使用鏈接方式，如果需要引入多個(gè) CSS 文件，則首先用鏈接方式引入一個(gè)“目錄”CSS 文件，這個(gè)“目錄”CSS 文件中再使用導(dǎo)入式引入其他 CSS 文件。
link 和@import 的區(qū)別
HTML 和 XHTML 都有一個(gè)結(jié)構(gòu)，它使網(wǎng)頁作者可以增加于 HTML 文檔相關(guān)的額外信息。這些額外資源可以是樣式化信息（CSS）、導(dǎo)航助手、屬于另外形式的信息（RSS）、聯(lián)系信息等等。
Quote @import 的定義
指定導(dǎo)入的外部樣式表及目標(biāo)設(shè)備類型。其實(shí) link 和@import 的最根本區(qū)別就是，link 是一個(gè) HTML 的一個(gè)標(biāo)簽，而@import 是 CSS 的一個(gè)標(biāo)簽,link 除了調(diào)用 CSS 外還可以有其他作用譬如聲明頁面鏈接屬性，聲明目錄，rss等等，而@import 就只能調(diào)用 CSS。如果單獨(dú)從外部引用 CSS 來說，他們的作用是基本一樣，只不過上面的老大不一樣而已。
link和import哪個(gè)更好些？
1、如果要用 javascript 進(jìn)行樣式選擇：
這個(gè)時(shí)候就要用 link,因?yàn)閘 ink 是 html 元素，可用 javascript 去控制 dom 元素最后達(dá)到改變樣式的效果。
打印樣式顧名思義就是打印頁面時(shí)候的樣式。
這個(gè)樣式在普通瀏覽下是沒有效果的，只有在打印的時(shí)候生效。
如果要為頁面單獨(dú)引用打印樣式的話，link 和@import 都可以的。
3、如果要引用多個(gè)樣式；
如果要在一個(gè)頁面上引用多個(gè)樣式組合產(chǎn)生效果的話，link 和@import 也是都可以的。
更多建議：