最常看見的CSS的使用方式有三種
1. 在span, div 等標籤上直接使用 style 屬性定義CSS
-
<span style="color:blue">This is Blue.</span>
2. 在當前的html 文件中定義class, 在html 標籤中用class 的屬性設置。
-
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-
<HTML>
-
<HEAD>
-
<TITLE> New Document </TITLE>
-
<META NAME="Author" CONTENT="oscar999">
-
<style type="text/css">
-
.blue{
-
color:blue
-
}
-
</style>
-
</HEAD>
-
-
<BODY>
-
<span class="blue">This is Blue.</span>
-
</BODY>
-
</HTML>
3. 第三種方式就是把CSS 的定義單獨到一個文件中， html 文件中使用link 引入css文件
-
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-
<HTML>
-
<HEAD>
-
<TITLE> New Document </TITLE>
-
<META NAME="Author" CONTENT="oscar999">
-
<link href="blue.css" rel="stylesheet" type="text/css" />
-
</HEAD>
-
-
<BODY>
-
<span class="blue">This is Blue.</span>
-
</BODY>
-
</HTML>
4. 除了以上方式之外， 還有一種方式就是使用 @import
-
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-
<HTML>
-
<HEAD>
-
<TITLE> New Document </TITLE>
-
<META NAME="Author" CONTENT="oscar999">
-
<style type="text/css">
-
@import url(blue.css);
-
</style>
-
</HEAD>
-
-
<BODY>
-
<span class="blue">This is Blue.</span>
-
</BODY>
-
</HTML>
前兩種方式自不必多說， 這裏比較一下 link 和 @import 的方式？
Link 與 @import 差異
1. 來源與作用。 link 屬於 XHTML 標籤， 除了可以加載CSS外， 還可以定義RSS, 定義rel 連接屬性等其他作用；
而@import 完全是CSS提供的一種方式， 只能加載CSS。
2. 加載順序不同。 link 引用的CSS會在頁面被加載的時候同時加載；
而@import 引用的CSS會等到頁面全部被下載完再被加載， 所以有時候會出現開始沒有樣式，之後頁面閃爍一下出現樣式（在網速慢的時候會更明顯）。
3. 兼容性的差別。 @import 是CSS2.1 提出的，老的瀏覽器不支持，IE5 以上的才能識別（不過現在來說，已經不是問題了，應該很少有使用IE5及以下的瀏覽器了）。
link 瀏覽器都支持。
4. 使用javascript 可以控制到 link, 但@import 卻無法控制。
-
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-
<HTML>
-
<HEAD>
-
<TITLE> New Document </TITLE>
-
<META NAME="Author" CONTENT="oscar999">
-
<link id="linkId" href="" rel="stylesheet" type="text/css" />
-
</HEAD>
-
-
<BODY>
-
<span class="blue">This is Blue.</span>
-
-
<script>
-
document.getElementById("linkId").href = "blue.css";
-
</script>
-
-
</BODY>
-
</HTML>
5. @import 可以在CSS 中再此引入其他樣式表。可以創建一個主樣式表， 在主樣式表中引入其他的樣式表。
這樣的好處是便於修改和擴展。
CSS拆分成文件, 雖然對於開發和維護來說比較方便和清晰， 但是有一個缺點是會對網站服務器產生較多的HTTP請求。瀏覽量大的網站還是謹慎使用，像一些大型訪問量大的網站的首頁，會直接把CSS或js 直接寫在html 中。
如果你想樣式表並行載入，以使頁面更快，請使用LINK 替代@import。
