CSS中 link 和@import 的区别是？

[问答题]

sherry_yoonjae

1.导入的语法不相同

link （链接式）语法为：

@import （导入式）语法为：

@import url("style.css");

</style>

2. link 和 import 语法结构不同，前者 <link> 是 html 标签，只能放入 html 源代码中使用， link 标签除了可以加载 CSS 外，还可以做很多其它的事情，比如定义 RSS ，定义 rel 连接属性等， @import 看作为 css 的样式，就只能加载 CSS 了；

3.使用 link 方式，浏览器将 CSS 文件和 HTML 的主体部分一同装载，所以显示出来的页面从开始就是带样式效果的；而采用 @import 方式，浏览器则会先装载完整个 HTML 文件后再装载 CSS 文件；

4.当使用 Javascript 控制 DOM 去改变样式的时候，只能使用 link 方式，因为 @import 眼里只有 CSS ，不是 DOM 可以控制的；

5link 是 XHTML 标签，无兼容问题； @import 是在 CSS2.1 提出的，低版本的浏览器不支持

编辑于 2015-09-05 14:57:46 回复(2)

雄起的小巨人

实验得出，@import一定要放在样式表的前面，不管是内部样式还是外部样式，都要放在前面，而且这个在css权威指南上也明确指出了。如果放在末尾就会被浏览器忽略。而如果正确使用这三种类型的样式，只是会产生样式覆盖问题，而没有权重优先问题，测试浏览器Chrome

发表于 2015-11-02 10:49:33 回复(0)

一起来编程

(1) link属于HTML标签，而@import是CSS提供的;

(2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

(4) link方式的样式的权重高于@import的权重.

发表于 2015-07-27 12:05:58 回复(1)

阿珊和她的猫

在大多数情况下，使用`link`比`@import`更好。

1. 性能：`link`标签在页面加载时会并行加载CSS文件，而`@import`会在页面加载完成后再加载CSS文件。因此，使用`link`可以提高页面加载速度和渲染性能。

2. 兼容性：`link`标签是HTML元素，而`@import`是CSS规则。一些古老的浏览器可能不支持`@import`，而`link`被广泛支持。

3. 动态加载：使用JavaScript动态创建`link`标签，可以在运行时动态加载CSS文件，而`@import`则无法在运行时动态加载。

4. 作用域：`link`标签可以在页面的`<head>`中引入CSS文件，而`@import`只能在CSS文件中引入其他CSS文件，限制了作用域的灵活性。

然而，使用`@import`有其应用场景。例如，在需要按需加载CSS时，`@import`可以在CSS文件中根据条件动态引入CSS，从而实现按需加载的效果。

综上所述，使用`link`标签更常见和推荐，它具有更好的性能、更高的兼容性以及更灵活的使用方式。但在特定场景下，使用`@import`也是有其优势的。

发表于 2023-09-02 15:58:04 回复(0)

晴朗的风

Link用来导入css文件@import则是用来导入js文件

发表于 2020-12-17 16:22:54 回复(0)

阿b内推工具人

四点不同： (1) link属于HTML标签，而 @import是CSS提供的; 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; import只在IE5以上才能识别，而link是HTML标签，无兼容问题; link方式的样式的权重高于@import的权重.

发表于 2020-11-04 03:28:42 回复(0)