从这四点了解css的link和@import使用和区别，以后别再乱用了！

悉前端的小伙伴都知道网站的性能和网页代码有很大的关系，这里指网页代码主要是指前端代码(html、css、js代码)，而css合理使用很大关系上影响网站页面各种性能，今天主要给大家分析下css中@import和link使用和区别？

css中的@import和link

在css中@import 导入指定的的外部样式表及目标媒体，css导入外部文件主要是通过link和@import实现的，它们都各自的语法结构。如果不清楚css基础知识可翻看之前发的文章。

@import代码示例如下：

@import url(路径地址/test.css);

</style>

link的代码示例如下：

css中@import和link的区别

1、属性不同

link是html提供的标签，不仅可以加载css文件，还能定义 RSS、rel 连接属性等。而

@import是css中的语法规则

2、加载顺序不同

页面打开时，link引用的css文件被加载。而@import引用的CSS等页面加载完后最后加载。

3、兼容性

@import是css2.1后提出的，而link是不存在兼容问题。

4、DOM控制性

js操作DOM，可以使用link改变样式，无法使用@import的方式使用样式。

使用@import和link的注意事项？

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中的link和@import引用”先聊到这，大家有什么更好想法欢迎评论。每天学习一个知识点，每天进步一点点。每日寄语”志不立，如无舵这舟，无衔之马，漂荡奔逸，终亦何所底乎。”下一期咱们接着聊。

头条创作挑战赛#

无论是link或者是@import，两者都是外部引用 CSS 的方式。那么这两种方式是怎么引入外部CSS文件的呢？

link

HTML文件的head标签中使用link标签引用CSS文件，其中，rel属性指定引用的是一个样式表文件，href属性指定文件的路径和文件名。

@import

在HTML文件中使用@import规则引用CSS文件

区别

link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务；而@import 属于 CSS 范畴，只能加载 CSS。
link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。
link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持。可能会存在兼容问题。
link 支持使用 Javascript 控制 DOM 去改变样式；而@import 不支持。

#如何学习编程##前端##头条创作挑战赛##暑期创作大赛##编程语言#

点赞关注加收藏，每天都会更新一个JavaScript知识！！！！！！！！！

Web 开发的浩瀚海洋中，CSS 犹如点睛之笔，为网页增光添彩。而引入 CSS 样式的方式，也决定了网页渲染的效率和代码的可维护性。 link 和 @import 作为两种常见的 CSS 引入方式，今天就来一场正面对决，看看谁才是你的最佳选择！

Round 1：身份揭秘，从出身说起

link ：HTML 的正牌标签，身兼多职，不仅能引入 CSS，还能定义 RSS、rel 链接属性等。可谓是 HTML 家族中的“多面手”。
@import ：CSS 语法规则的忠实守护者，专注于导入样式表，是 CSS 世界的“专业选手”。

Round 2：速度之争，加载顺序大比拼

link ：与 HTML 标签并肩作战，页面加载时同步加载，赢在起跑线。
@import : 姗姗来迟，页面加载完毕后才开始加载，容易造成页面闪烁，用户体验稍逊一筹。

Round 3：兼容性考验，谁更胜一筹？

link : HTML 元老级标签，不存在兼容性问题，稳如泰山。
@import ：CSS2.1 语法，存在一定的兼容性问题，在老旧浏览器中可能会出现样式加载失败的情况。

Round 4：控制权争夺，DOM 操作谁更强？

link ：受 JavaScript 和 DOM 的绝对控制，可以通过修改 link 标签属性动态改变样式，灵活多变。
@import ：游离于 DOM 之外，无法通过 JavaScript 直接控制，显得有些“高冷”。

Round 5：权重较量，谁的影响力更大？

link ：在样式层叠中拥有更高的权重，其定义的样式会覆盖 @import 引入的样式。

终极 PK：示例代码大 showdown

<!DOCTYPE html>
<html>
<head>
  <title>link vs @import</title>
  <link rel="stylesheet" href="style.css"> 
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

/* style.css */
@import url("other-style.css");

源码解析

在浏览器解析 HTML 文件时，会依次解析 link 标签和 style 标签，并下载相应的 CSS 文件。@import 规则会在 CSS 文件解析时被执行，浏览器会再次发送请求下载 other-style.css 文件。

总结：link更胜一筹

综上所述，link 标签凭借其加载速度快、兼容性好、可控性强等优势，在 CSS 引入方式的较量中更胜一筹，是大多数场景下的最佳选择。

当然，@import 也并非一无是处，在某些特殊情况下，它也能发挥作用。例如，当我们需要根据不同的条件加载不同的样式表时，可以使用 @import 结合 JavaScript 实现动态加载。

#头条创作挑战赛#

在线咨询

上一篇：HTML框架分层设计
下一篇：HTML5(九)-超强的 SVG 动画

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

从这四点了解css的link和@import使用和区别，以后别再乱用了！

link

@import

区别

Round 1：身份揭秘，从出身说起

Round 2：速度之争，加载顺序大比拼

Round 3：兼容性考验，谁更胜一筹？

Round 4：控制权争夺，DOM 操作谁更强？

Round 5：权重较量，谁的影响力更大？

终极 PK：示例代码大 showdown

源码解析

总结：link更胜一筹

您的项目需求