link和Import区别

本篇文章重点:

link引用CSS时,在页面载入时同时加载;

import需要页面完全载入后加载;

link支持使用javascript控制DOM去改变样式,而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:老祖宗的差别:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事物;@import就只能加载CSS

区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。

区别3:link是XHTML标签,无兼容性问题;@import是在CSS提出的,低版本的浏览器不支持。

区别4:当使用javascript控制dom区改变样式的时候,只能用Link标签,因为@import不是dom可以控制的。

区别5:@import可以在css中再次引入其他样式表,比如可以创建一个主样式表,在主样式表中再引入其他样式表,如:main.css

———————- 
@import “sub1.css”; 
@import “sub2.css”; 
sub1.css 
———————- 
p {color:red;} 
sub2.css 
———————- 
.myclass {color:blue}
这样做有一个缺点,会对网站服务器产生过多的HTTP请求,以前是一个文件,而现在却是两个或更多文件了,服务器的压力增大,浏览量大的网站还是谨慎使用。有兴趣的可以观察一下像新浪等网站的首页或栏目首页代码,他们总会把css或js直接写在html里,而不用外部文件。
原文地址:https://www.cnblogs.com/greatluoluo/p/6293252.html