全国服务热线:4008-888-888

技术知识

link和@import的差别深层次讨论

网页页面中应用CSS的方法关键有3种:行内加上界定style特性值,网页页面头顶部嵌入启用和外面连接启用,在其中外面引入有两种:link和@import。外界引入CSS两种方法link和@import的方法各自是:

XML/HTML编码

拷贝编码
编码以下:

<link rel="stylesheet" rev="stylesheet" href="CSS文档" type="text/css" media="all" />

XML/HTML编码

拷贝编码
编码以下:

<style type="text/css" media="screen">
@import url("CSS文档");
</style>

二者全是外界引入CSS的方法,可是存在1定的差别

  差别1:link是XHTML标识,除载入CSS外,还能够界定RSS等别的事务管理;@import属于CSS范围,只能载入CSS。

  差别2:link引入CSS时,在网页页面加载时另外载入;@import必须网页页面网页页面彻底加载之后载入。

  差别3:link是XHTML标识,无适配难题;@import是在CSS2.1提出的,低版本号的访问器不适用。

  差别4:ink适用应用Javascript操纵DOM去更改款式;而@import不适用。

填补:@import最佳写法
@import的写法1般有以下几种:

@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中 link与@import的差别

这两天刚写完XHTML载入CSS的几种方法,在其中外界引入CSS分成两种方法link和@import。
实质上,这两种方法全是以便载入CSS文档,但還是存在着微小的区别。
区别1:老祖宗的区别。link属于XHTML标识,而@import彻底是CSS出示的1种方法。
link标识除能够载入CSS外,还能够做许多其它的事儿,例如界定RSS,界定rel联接特性等,@import就只能载入CSS了。
区别2:载入次序的区别。当1个网页页面被载入的情况下(便是被访问者访问的情况下),link引入的CSS会另外被载入,而@import引入的CSS会直到网页页面所有被免费下载完再被载入。因此有时访问@import载入CSS的网页页面时刚开始会沒有款式(便是闪动),网速慢的情况下还挺显著(梦之都载入CSS的方法便是应用@import,我1边免费下载1边访问梦之都网页页面时,就会出現上述难题)。
区别3:适配性的区别。因为@import是CSS2.1提出的因此老的访问器不适用,@import仅有在IE5以上的才可以鉴别,而link标识无此难题。
区别4:应用dom操纵款式时的区别。当应用javascript操纵dom去更改款式的情况下,只能应用link标识,由于@import并不是dom能够操纵的。
大概就这几种区别了(假如也有甚么区别,大伙儿告知我,我再填补上去),其它的都1样,从上面的剖析看来,還是应用link标识较为好。
规范网页页面制做载入CSS文档时,还应当选定要载入的新闻媒体(media),例如screen,print,或所有all等。这个我到CSS高級实例教程中再给大伙儿详细介绍。
注:
1,网友comehope在留言中提出了另外一种差别。
区别5:@import能够在css中再度引进别的款式表,例如能够建立1个主款式表,在主款式表格中再引进别的的款式表,如:
main.css

拷贝编码
编码以下:

———————-
@import “sub1.css”;
@import “sub2.css”;
sub1.css
———————-
p {color:red;}
sub2.css
———————-
.myclass {color:blue}

这样更利于改动和拓展.
小猴子提醒:这样做有1个缺陷,会对网站服务器造成过量的HTTP恳求,之前是1个文档,而如今确是两个或更多文档了,服务器的工作压力增大,访问量大的网站還是慎重应用。有兴趣爱好的能够观查1下像新浪等网站的主页或栏目主页编码,她们总会把css或js立即写在html里,而无需外界文档。


在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服