行內式(內聯樣式)
是通過標簽的style屬性來設置元素的樣式,其基本語法格式如下:
<標簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標簽名>
語法中style是標簽的屬性,實際上任何HTML標簽都擁有style屬性,用來設置行內式。其中屬性和值的書寫規范與CSS樣式規則相同,行內式只對其所在的標簽及嵌套在其中的子標簽起作用。
內部樣式表(內嵌式)
內嵌式是將CSS代碼集中寫在HTML文檔的head頭部標簽中,並且用style標簽定義,其基本語法格式如下:
<head>
<style type="text/CSS">
選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}
</style>
</head>
語法中,style標簽一般位於head標簽中title標簽之后,也可以把他放在HTML文檔的任何地方。
外部樣式表(外鏈式)
鏈入式是將所有的樣式放在一個或多個以.CSS為擴展名的外部樣式表文件中,通過link標簽將外部樣式表文件鏈接到HTML文檔中,其基本語法格式如下:
<head>
<link href="CSS文件的路徑" type="text/CSS" rel="stylesheet" />
</head>
注意: link 是個單標簽哦!!!
該語法中,link標簽需要放在head頭部標簽中,並且必須指定link標簽的三個屬性,具體如下:
href:定義所鏈接外部樣式表文件的URL,可以是相對路徑,也可以是絕對路徑。
type:定義所鏈接文檔的類型,在這里需要指定為“text/CSS”,表示鏈接的外部文件為CSS樣式表。
rel:定義當前文檔與被鏈接文檔之間的關系,在這里需要指定為“stylesheet”,表示被鏈接的文檔是一個樣式表文件。
三種樣式表總結
樣式表 | 優點 | 缺點 | 使用情況 | 控制范圍 |
---|---|---|---|---|
行內樣式表 | 書寫方便,權重高 | 沒有實現樣式和結構相分離 | 較少 | 控制一個標簽(少) |
內嵌樣式表 | 部分結構和樣式相分離 | 沒有徹底分離 | 較多 | 控制一個頁面(中) |
外部樣式表 | 完全實現結構和樣式相分離 | 需要引入 | 最多,強烈推薦 | 控制整個站點(多) |