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