jsp中@import导入外部样式表与link链入外部样式表的区别
生活随笔
收集整理的這篇文章主要介紹了
jsp中@import导入外部样式表与link链入外部样式表的区别
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
昨天碰到同事問了一個問題，@impor導入外部樣式與link鏈入外部樣式的優(yōu)先級是怎樣的，為什么實驗的結果是按照樣式表導入后的位置來決定優(yōu)先級。今天就這個問題具體總結如下：
先解釋一下網(wǎng)頁添加css樣式的方法，一共有四種，分別是： 一、內嵌樣式——直接在頁面的標簽里加<div style="border:1px red solid;">測試信息</div> 二、內部樣式表——在head部分加入?<style type="text/css">div{margin: 0;padding: 0;border:1px red solid;}</style> 三、鏈入外部樣式表——在head部分加入<link? rel="stylesheet" type="text/css" href="my.css"?media="all"?/>，引入外部的CSS文件 四、導入外部樣式表——在head部分加入<style type="text/css">@import url(my.css);</style> 樣式表的優(yōu)先級順序從高到低依次為：內嵌樣式 > 內部樣式表 > 導入外部樣式表（其實是屬于內部樣式表） 鏈入外部樣式表與內部樣式表之間的優(yōu)先級取決于所處位置的先后，最后定義的優(yōu)先級最高。 本文主要是做@import導入樣式表與link鏈入樣式表的區(qū)別探討，所以其他的不做詳談。 1. 鏈入外部樣式表 鏈入外部樣式表是把樣式表保存為一個樣式表文件，然后在頁面中用<link>標記鏈接到這個樣式表文件，這個<link>標記必須放到頁面的<head>區(qū)內，如下： <head> …… <link href="mystyle.css" rel="stylesheet" type="text/css" media="all"> …… </head> 上面這個例子表示瀏覽器從mystyle.css文件中以文檔格式讀出定義的樣式表。rel=”stylesheet”是指在頁面中使用這個外部的樣式表。type=”text/css”是指文件的類型是樣式表文本。href=”mystyle.css”是文件所在的位置。media是選擇媒體類型，這些媒體包括：屏幕，紙張，語音合成設備，盲文閱讀設備等。 2.導入外部樣式表 導入外部樣式表是指在內部樣式表的<style>里導入一個外部樣式表，導入時用@import，看下面這個實例： <head> …… <style type=”text/css”> <!-- @import “mystyle.css” 其他樣式表的聲明 --> </style> …… </head> 例中@import “mystyle.css”表示導入mystyle.css樣式表，注意使用時外部樣式表的路徑。方法和鏈入樣式表的方法很相似，實質上它相當于存在內部樣式表中的。 注意：導入外部樣式表必須在樣式表的開始部分，在其他內部樣式表上面。 綜合度娘的多篇文章和個人理解，兩者的區(qū)別總結如下： 1：老祖宗的差別。link屬于XHTML標簽，而@import完全是CSS提供的一種方式。 link標簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性，等，@import就只能加載CSS了。 2：加載時間及順序不同。使用link鏈接的css是客戶端瀏覽你的網(wǎng)頁時先將外部的CSS文件加載到網(wǎng)頁當中，然后再進行編譯顯示，所以這種情況下顯示出來的網(wǎng)頁跟我們預期的效果一樣，即使一個頁面link多個css文件，網(wǎng)速再慢也是一樣的效果；而使用@import導入的CSS就不同了，客戶端在瀏覽網(wǎng)頁時是先將html的結構呈現(xiàn)出來，再把外部的CSS文件加載到網(wǎng)頁當中，當然最終的效果也是跟前者是一樣的，只是當網(wǎng)速較慢時會出現(xiàn)先顯示沒有CSS統(tǒng)一布局時的html網(wǎng)頁，這樣就會給閱讀者很不好的感覺。這也是現(xiàn)在大部分網(wǎng)站的CSS都采用鏈接方式的最主要原因。 3：兼容性不同。由于@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標簽無此問題。 4：使用dom控制樣式時出現(xiàn)問題。當使用javascript控制dom去改變樣式的時候，只能使用link標簽，因為@import不是dom可以控制的。 5：導入樣式可以避免過多頁面指向一個css文件。當網(wǎng)站中使用同一個CSS文件的頁面不是非常多時，這兩種方式在效果方面幾乎是沒有不同的，但網(wǎng)站的頁面數(shù)達到一定程度時（比如新浪等門戶），如果采用鏈接的方式可能就會使得由于多個頁面調用同一個CSS文件而造成速度下降，但是一般頁面能達到這種程度的網(wǎng)站也會有資本用最好的硬盤，所以這方面的因素也不用怎么擔心。 綜上所述，一般普通的站點在調用外部樣式表的時候，還是盡量選擇link鏈入外部樣式表比較好。關于區(qū)別中第二點的加載順序的差別中，找到一個國外的參考文章作為補充資料：http://www.stevesouders.com/blog/2009/04/09/dont-use-import/?更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎
總結
以上是生活随笔為你收集整理的jsp中@import导入外部样式表与link链入外部样式表的区别的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTTP协议/RTSP协议/RTMP协议
- 下一篇： HttpServletRequest.g