Open artdong opened 4 years ago
css导入外部文件主要是通过link和@import实现的,它们都各自的语法结构。
在css中@import 导入指定的的外部样式表及目标媒体。
@import代码示例如下:
<style type="text/css">@import url(路径地址/test.css);</style>
<link href="路径地址/test.css" rel="stylesheet" type="text/css" />
1、属性不同
link是html提供的标签,不仅可以加载css文件,还能定义 RSS、rel 连接属性等。而 @import是css中的语法规则。
2、加载顺序不同
页面打开时,link引用的css文件被加载。而@import引用的CSS等页面加载完后最后加载。
3、兼容性
@import是css2.1后提出的,而link是不存在兼容问题。
4、DOM控制性
link支持使用Javascript控制DOM去改变样式;而@import不支持。
1、css中避免过多使用@import。
如果了解了@import原理,你就会明白它的性能并不高,过多使用它会延长浏览器渲染页面的时间。
2、@import可以在css中引入其他样式表利于修改和扩展。
代码示例如下:
index.css
@import “test1.css”;
@import “test2.css”;
test1.css
p {color:blue;}
test2.css
.mystyle {color:red}
css中@import和link有什么区别?