jsp中@import導入外部樣式表與link鏈入外部樣式表的區別

時間 2019-11-20

標籤 jsp import 導入外部樣式 link 區別欄目 JSP 简体版

原文原文鏈接

昨天碰到同事問了一個問題，@impor導入外部樣式與link鏈入外部樣式的優先級是怎樣的，爲何實驗的結果是按照樣式表導入後的位置來決定優先級。今天就這個問題具體總結以下：javascript

先解釋一下網頁添加css樣式的方法，一共有四種，分別是：

1、內嵌樣式——直接在頁面的標籤里加<div style="border:1px red solid;">測試信息</div>

2、內部樣式表——在head部分加入 <style type="text/css">div{margin: 0;padding: 0;border:1px red solid;}</style>

3、鏈入外部樣式表——在head部分加入<link rel="stylesheet" type="text/css" href="my.css" media="all" />，引入外部的CSS文件

4、導入外部樣式表——在head部分加入<style type="text/css">@import url(my.css);</style>

樣式表的優先級順序從高到低依次爲：內嵌樣式 > 內部樣式表 > 導入外部樣式表（實際上是屬於內部樣式表）

鏈入外部樣式表與內部樣式表之間的優先級取決於所處位置的前後，最後定義的優先級最高。

本文主要是作@import導入樣式表與link鏈入樣式表的區別探討，因此其餘的不作詳談。

1. 鏈入外部樣式表

鏈入外部樣式表是把樣式表保存爲一個樣式表文件，而後在頁面中用<link>標記連接到這個樣式表文件，這個<link>標記必須放到頁面的<head>區內，以下：

<head>

……

……

</head>

上面這個例子表示瀏覽器從mystyle.css文件中以文檔格式讀出定義的樣式表。rel=」stylesheet」是指在頁面中使用這個外部的樣式表。type=」text/css」是指文件的類型是樣式表文本。href=」mystyle.css」是文件所在的位置。media是選擇媒體類型，這些媒體包括：屏幕，紙張，語音合成設備，盲文閱讀設備等。

2.導入外部樣式表

導入外部樣式表是指在內部樣式表的<style>裏導入一個外部樣式表，導入時用@import，看下面這個實例：

<head>

……

<!--

@import 「mystyle.css」

其餘樣式表的聲明

-->

</style>

……

</head>

例中@import 「mystyle.css」表示導入mystyle.css樣式表，注意使用時外部樣式表的路徑。方法和鏈入樣式表的方法很類似，實質上它至關於存在內部樣式表中的。

注意：導入外部樣式表必須在樣式表的開始部分，在其餘內部樣式表上面。

綜合度孃的多篇文章和我的理解，二者的區別總結以下：

1：老祖宗的差異。link屬於XHTML標籤，而@import徹底是CSS提供的一種方式。

link標籤除了能夠加載CSS外，還能夠作不少其它的事情，好比定義RSS，定義rel鏈接屬性，等，@import就只能加載CSS了。

2：加載時間及順序不一樣。使用link連接的css是客戶端瀏覽你的網頁時先將外部的CSS文件加載到網頁當中，而後再進行編譯顯示，因此這種狀況下顯示出來的網頁跟咱們預期的效果同樣，即便一個頁面link多個css文件，網速再慢也是同樣的效果；而使用@import導入的CSS就不一樣了，客戶端在瀏覽網頁時是先將html的結構呈現出來，再把外部的CSS文件加載到網頁當中，固然最終的效果也是跟前者是同樣的，只是當網速較慢時會出現先顯示沒有CSS統一佈局時的html網頁，這樣就會給閱讀者很很差的感受。這也是如今大部分網站的CSS都採用連接方式的最主要緣由。

3：兼容性不一樣。因爲@import是CSS2.1提出的因此老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標籤無此問題。

4：使用dom控制樣式時出現問題。當使用javascript控制dom去改變樣式的時候，只能使用link標籤，由於@import不是dom能夠控制的。

5：導入樣式能夠避免過多頁面指向一個css文件。當網站中使用同一個CSS文件的頁面不是很是多時，這兩種方式在效果方面幾乎是沒有不一樣的，但網站的頁面數達到必定程度時（好比新浪等門戶），若是採用連接的方式可能就會使得因爲多個頁面調用同一個CSS文件而形成速度降低，可是通常頁面能達到這種程度的網站也會有資本用最好的硬盤，因此這方面的因素也不用怎麼擔憂。

綜上所述，通常普通的站點在調用外部樣式表的時候，仍是 儘可能選擇link鏈入外部樣式表比較好。關於區別中第二點的加載順序的差異中，找到一個國外的參考文章做爲補充資料：http://www.stevesouders.com/blog/2009/04/09/dont-use-import/