CSS樣式表的書寫位置


行內式(內聯樣式)

是通過標簽的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”,表示被鏈接的文檔是一個樣式表文件。

三種樣式表總結

樣式表 優點 缺點 使用情況 控制范圍
行內樣式表 書寫方便,權重高 沒有實現樣式和結構相分離 較少 控制一個標簽(少)
內嵌樣式表 部分結構和樣式相分離 沒有徹底分離 較多 控制一個頁面(中)
外部樣式表 完全實現結構和樣式相分離 需要引入 最多,強烈推薦 控制整個站點(多)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM