2015-11-26 08:00:16
導入樣式表和外部樣式表都是把樣式表中的<style></style>標簽對中的樣式規則定義語句，放置在一個單獨的外部文件中，擴展名為.css, 然后將獨立的css樣式文件引用到網頁中來。但又有以下幾個方面的不同：
1、具體的應用方法不同：
導入樣式表：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <!--定義導入樣式表--> <style type="text/css"> @import linked.css </style> <title>imported</title> </head> <body> <p>這個段落應用了導入樣式表 </body> </html>
外部樣式表：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <!--定義外部樣式表--> <link rel="StyleSheet" href=linked.css type="text/css"> <title>linked</title> </head> <body> <p>這個段落應用了外部樣式表 </body> </html>
link：用於當前文檔引用外部文檔的
rel：說明鏈接進來的對象是什么；rel="StyleSheet"：表示在網頁中使用外部樣式表；
href：指定文件地址； href=linked.css：這里鏈接的樣式表文件是linked.css
type：定義文檔的類型 ; type=“text/css”：表示文本類型的樣式.
其中linked.css:
p{ style="color:black; font-family:System; font-size:30px" }
2、
使用link鏈接的css，客戶端瀏覽網頁時，先將外部的css文件加載到網頁中（下載到html里面），是一種並行加載方式，然后再編譯顯示，顯示出來的網頁和我們預期的效果一樣，即使一個網頁鏈接多個css，網速再慢也是一樣的效果。
使用@import導入的css，是將css代碼寫在樣式表里面，客戶端瀏覽時先將html的結構顯示出來，再把外部的css文件加載到網頁中，即@import是在整個html頁面加載完成后才加載css，最終顯示出來的網頁也和預期的效果一樣，不過，當網速較慢時，會先顯示沒有外部css統一布局的html文件。
此外，@import可以避免過多的頁面指向一個css文件，當網站的頁面數達到一定程度，如果采用鏈接的方式就可能會使得由於多個頁面調用同一個css而造成速度下降，但能達到這種程度的網站一般也有資本用更好的硬盤來彌補不足。
3、link標簽屬於xhtml范疇，除了加載css外，還可以做其他事情，如定義RSS,定義rel鏈接屬性，
@import是css2.1特有的，import只能加載css了，而且對於不兼容css2.1的瀏覽器（如IE5之前的版本）來說是無效的。
4、當用javascript控制dom去改變樣式時，只能用link標簽，@import無能為力。
綜上所述，一般網站在調用外部樣式表時，還是使用link標簽。