本文出自：http://gaolizhong666.blog.163.com/blog/static/11561504220098110101672/
<link>元素所參考的樣式用戶可以自由的選擇加以改變，而導入的樣式表單就自動的與剩下的樣式表融合在一起了
CSS與HTML文檔結合的4中方法：
1 使用<link>元素鏈接到外部的樣式文件
2 在<head>元素中使用"style"元素來指定
3 使用CSS "@import"標記來導入樣式表單
4 在<body>內部的元素中使用"style"屬性來定義樣式
一個例子:
<html>
<head>
<title>css demo</title>
<link rel=stylesheet type="text/css" href="css/name.css" title="cool">
<style>
@import url(css/name2.css);
H1 {color:red}
<style>
</head>
<body>
<H1>CSS demo by JET</H1>
<p style="color:blue">good luck.
</body>
</html>
1 用link進行引用
<link rel="stylesheet" type="text/css" href="my.css">
2 用import進行引用
<style type="text/css">
@import url(my.css);
</style>
第一種是直接在html頁面上進行css書寫，而第二種和第三種是採用外部引用樣式單獨提取文件。
問題1.到底link和@import有什麼區別？
我們先來看看他們的定義
link元素
HTML和XHTML都有一個結構，它使網頁作者可以增加於HTML文檔相關的額外信息。這些額外資源可以是樣式化信息（CSS）、導航助手、屬於另 外形式的信息（RSS）、聯繫信息等等。
@import
指定導入的外部樣式表及目標設備類型。
其實link和@import的最根本區別就是，link是一個html的一個標籤，而@import是css的一個標籤,
link除了調用css外還可以有其他作用譬如聲明頁面鏈接屬性，聲明目錄，rss等等，而@import就只能
調用css。如果單獨從外部引用css來說，他們的作用是基本一樣，只不過上面的老大不一樣而已。：）
問題2.link合import到底那個更好？
上面說了因爲上面的老大不一樣，所以在使用上就會有一些細節的區別，不能說總體誰好誰壞，
只能說具體情況具體分析。
1）我要用javascript進行樣式選擇；
這個時候就要用link,因爲link是html元素，可用javascript去控制dom元素最後達到改變樣式的效果。
看下列代碼
<link rel="stylesheet" href="/css/styles.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/css/orange.css" type="text/css" media="screen" title="orange" />
<link rel="alternate stylesheet" href="/css/blue.css" type="text/css" media="screen" title="blue" />
<link rel="alternate stylesheet" href="/css/pink.css" type="text/css" media="screen" title="pink" />
<link rel="alternate stylesheet" href="/css/slate.css" type="text/css" media="screen" title="slate" />
這是一段很經典的改變頁面風格的代碼，因爲我們今天主要講的是link和import，所以我這裏只列出了引用css部分。
我們先來看看link裏面個個屬性都是表達了什麼意思：
[1]rel:用來聲明鏈接對象的作用或者類型。
譬如上面的的代碼："stylesheet"表示鏈接一個默認的css,而"alternate stylesheet"折表示備選的css
[2]href:這個就不用我說了吧，引用css的文件路徑。
[3]tyle:文件類型
[4]media:應用的設備，"screen"是說明應用在屏幕上。
[5]title:是css的名稱。
這段代碼中一共有5個css,第一個是基本樣式，而其他四個是風格樣式,利用javascript去控制默認顯示的樣式title就ok了。
2）我要在應用打印樣式；
打印樣式顧名思義就是打印頁面時候的樣式。
這個樣式在普通瀏覽下是沒有效果的，只有在打印的時候生效。
如果要爲頁面單獨引用打印樣式的話，link和@import都可以的。
link代碼
<link rel="stylesheet" href="/css/styles.css" type="text/css" media="print" />
@import代碼
<style type="text/css">
@import url(foo.css) print;
</style>
另外對於css來說還有一種方式@media：
@media print {
@import "print.css"
}
用@media先制定設備爲 print,然後再用@impor鏈接
3）我要引用多個樣式；
如果要在一個頁面上引用多個樣式組合產生效果的話，永link和@import也是都可以的。
link代碼
<link rel="stylesheet" href="/css/styles.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/css/orange.css" type="text/css" media="screen" />
@import代碼
<style type="text/css">
@import url(../css/base/my.layout.css);
@import url(../css/base/my.typo.css);
</style>
不過個人覺得，用@import引用多文件的時候更加清晰一些
另外對於多樣式還有一種link於@import的組合用法。
先用link引用一個css文件
<link rel="stylesheet" href="/css/styles.css" type="text/css" media="screen" />
然後在這個css文件裏面再引用。
<style type="text/css">
@import url(../css/base/my.layout.css);
@import url(../css/base/my.typo.css);
</style>
這樣做的好處是，如果你一個站點所有頁面引用的樣式都是一樣的，
而有又多個css，如果你每個頁面都加4,5個一樣的css樣式，卻是浪費代碼和精力，
所以莫不如這樣做，所有一個頁面都引用一個css，然後一個css在引用多個css，方便
管理和維護。
加載css link與@import的區別：其實 link 與 @import 在顯示效果上還是有很大區別的，基本上來看 link 的加在會在頁面顯示之前全部加在完全，而 @import 會是讀取完文件之後加在，所以如果網速很好或很快的情況下，會出現先開始無css定義，而後加載css定義。@import加載頁面時開始的瞬間會有閃爍（無樣式表的頁面），然後才恢復正常（加載樣式後的頁面），Link沒有這個問題。
他們從方法上是一樣的，只是在瀏覽器識別上有點差距，link在支持CSS的瀏覽器上都支持而@import只在5.0一行的版本有效，而且還能用於瀏覽器過濾也就是hack的使用，兼容一些老版本的瀏覽器。所以最好還是使用link通用型更強，但是對於高版本的瀏覽器，也就是現在的瀏覽器來說，其實都一樣，這是個沒有太大意義的區分 。
@import最優寫法：@import的寫法一般有下列幾種：
@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識別
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不識別
@import url(style.css) //Windows NS4, Macintosh NS4不識別
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識別
@import url("style.css") //Windows NS4, Macintosh NS4不識別
由上分析知道，@import url(style.css) 和@import url("style.css")是最優的選擇，兼容的瀏覽器也是最多了。而從字節優化的角度來看@import url(style.css)無愧於最值得推薦的寫法。
CSS代碼格式可以縮減樣式表文件的大小
在編寫CSS樣式表的時候，爲了能夠方便以後閱讀樣式定義代碼，我們會將每一條代碼寫在一行上。但是我發現這樣寫似乎並不好，因爲CSS代碼畢竟不像程序代碼有很強的邏輯性，它主要以名稱和值的對應方式寫的。所以寫在同一行上不會特別影響閱讀。反而會減少樣式表文件的尺寸，因爲減少了很多換行符和間隔符。我測試了一下發現文件的尺寸可以減少12%左右。如果樣式表文件比較大或者文件比較多的時候就會明顯減少客戶端的下載量，提高了網頁的打開速度。
注意樣式名稱的冒號和後面的值之間不要寫空格，只是在兩個樣式之間用空格分割。
具體格式如下：
程序代碼：
div {margin:20px; padding:10px; background-color:#F00;}