页面导入样式时,使用link和@import的区别

首先,我们引入问题:

页面导入样式时,使用使用link和@import有什么样的区别?

link是我们比较熟悉的一个标签,网页文件不可或缺的,在网页加载过程中引用一个外部样式表。几乎所有浏览器都支持该标签。

定义和用法

标签定义文档与外部资源的关系。 标签最常见的用途是链接样式表。

注:在HTML中link标签不需要被正确的关闭,但是在XHTML中需要被正确的关闭。

具体的属性和用法可以参考W3CSchool

@import

熟悉less和sass的同学一定不陌生,这玩意用于我们引用一个less或者sass文件。所以说在HTML与CSS中有着相同的用法和含义。

在HTML中使用

在CSS中使用

@charset:'utf-8'; @import url(http://zhelin.me/css/css.css); html,body{...}

总结:

从上面可以看出,两者的作用是一样的,都用于引用样式文件。前者是html标签,所以该标签只能放置在html代码中,后者可以放置在HTML和CSS文件中,放置在HTML中相当于直接引用,放置在CSS中相当于扩展(接上集的意思)。但需要注意的是:@import在html使用时候需要