1.行内式
行内式是在标記的style屬性中設定CSS樣式.
<p style="color:red;background-color: yellow">hello world</p> 這種方式沒有展現出CSS的優勢.是以不推薦使用.
2.嵌入式
嵌入式是将.CSS樣式集中寫在網頁的
<head></head>
下的
<style></style>
标簽對裡.
格式如下:
<head>
<meta charset="utf-8">
<title>
index
</title>
<style>
s1 {
color: red;
background-color: yellow
}
</style>
</head>
<body>
</body> 3.連結式
将一個.css檔案引入HTML檔案中
<link rel="stylesheet" href="index.css" type="text/css"/> 4.導入式
将一個獨立的CSS檔案引入HTML檔案中,導入式使用CSS規則引入外部CSS檔案,style标記也是寫在
<head>
标記中.
使用文法如下:
<style type="text/css">
<!--index.css指的是CSS檔案的路徑-->
@import "index.css";
</style> 注意:
導入式會在整個網頁裝載完成後再裝載CSS檔案,是以如果網頁比較大則會出現先顯示CSS無樣式的頁面,
閃爍一下之後,再出現網頁的樣式的問題.這是導入式固有的一個缺陷.
使用連結式則會在網頁檔案主體裝載前裝載CSS檔案,是以顯示出來的網頁從一開始就是帶CSS樣式的效果的.
它不會像導入式那樣先顯示無樣式的網頁,然後再顯示有樣式的網頁,這是連結式的優點.
![一位經驗豐富的前端開發人員因未能通過算法面試題而受人嘲笑[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)