1.外部樣式
使用 link 標籤引入外部樣式文件，需要注意以下幾點。
- link 標籤放在
head標籤內部 - 樣式文件要以
.css爲擴展名 - 一個頁面往往需要引入多個樣式文件
| 屬性 | 說明 |
|---|---|
| rel | 定義當前文檔與被鏈接文檔之間的關係 |
| href | 外部樣式文件 |
| type | 文檔類型 |
<link rel="stylesheet" href="my.css" type="text/css">
2.嵌入樣式
使用 style 標籤可以在文檔內部定義樣式規則。
<style>
body {
background: red;
}
</style>
3.內聯樣式
可以爲某個標籤單獨設置樣式。
<h1 style="color:green;">行內樣式</h1>
4.導入樣式
使用 @import 可以在原樣式規則中導入其他樣式表，可以在外部樣式（.css文件中）、style標籤中使用。
但導入樣式一定要放在樣式規則前面定義，否則不生效。
<style>
@import url("my.css");
body {
background: red;
}
</style>
5.@import與link的區別
加載順序上的區別
-
當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，
-
而@import引用的CSS會等到頁面全部被下載完再被加載。
-
所以有時候瀏覽
@import加載CSS的頁面時開始會沒有樣式,後面樣式加載出來後網頁會閃爍。
dom支持上的區別
-
link支持使用Javascript控制DOM去改變樣式 -
而
@import不支持。