link和@import都是HTML中引入CSS的语法单词。
两者的基本语法
link语法结构
<link href="外部CSS文件的URL路径" rel="stylesheet" type="text/css" />
link标签通过URL路径引入外部的CSS文件到HTML中,是一种HTML标签,属于书写HTML的语法,只能放在HTML源代码中使用。
@import语法结构
<style type="text/css">
@import + 空格 + url(外部CSS文件URL路径地址);
</style>
@import是在样式表定义中再引入外部的CSS文件,相当于一种样式,属于书写CSS的语法。
两者的区别
两者都是外部引用CSS的方式,但是存在一定的区别。
区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
区别2:link引用CSS时,在页面载入时同时加载;@import需要页面完全载入后才加载。
区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1中提出的,低版本的浏览器不支持。
区别4:link支持使用JavaScript控制DOM去改变样式;@import不支持这样的操作(JavaScript可以获取link标签元素,但获取不到@import,因为@import只是一种CSS语法)。
本质上,两者使用选择区别不大,但为了软件中编辑布局网页HTML代码,一般使用link较多,也推荐使用link。