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

原创 已于 2025-06-15 14:32:18 修改 · 237 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #面试

于 2025-06-15 12:35:29 首次发布

link和@import都是用来引入外部样式表的方式，主要区别如下：

一. link

  • 所属层面： HTML标签，在HTML的<head>中引入外部样式表，如：
  <link rel="stylrsheet" href="style.css" media="screen">
  • 加载时机：浏览器会并行加载link引入的样式表，不会阻塞页面的渲染。 在页面解析阶段就会被处理，优先于@import
  • 兼容性：没有兼容性问题
  • 动态操作：可以在JavaScript中动态创建link标签（如document.creatElement('link')），实时改变样式

二、@import

  • 所属层面：CSS语法，在css样式表或<style>标签中引入外部样式表，如：
  @import url("print.css");
  • 加载时机：串行加载，需要等当前的css样式加载完成之后，再加载@import的样式表。可能延迟页面渲染，影响性能
  • 兼容性：IE5+支持，但老版本IE中可能存在加载顺序问题
  • 动态操作：无法通过JavaScript直接操作@import，需要通过修改CSSOM间接处理，灵活性低

三、总结

所属层面加载时机兼容性动态操作
linkHTML标签并行加载，不会阻塞页面渲染无兼容性问题支持动态操作
@importCSS语法串行加载，会影响页面渲染、影响性能IE5以下可能会有兼容性问题不支持动态操作
页面导入样式时，使用link和@import有什么区别？
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
07-03 836
原文链接 1. 区别 link是XHTML标签,它不仅可以引入css文件，还可以引入网站图标或者设置媒体查询。 @import是CSS提供的语法规则，只能用来加载css。 @import一定要写在除@charset外的其他任何 CSS 规则之前，如果置于其它位置将会被浏览器忽略。而且，在@import之后如果存在其它样式，则@import之后的分号是必须书写，不可省略的。 //引入css ...
href和src、link和@import的区别详解
09-24
在HTML和CSS的世界里，`href` 和 `src`、`link` 和 `@import` 是两个关键的概念，它们在创建动态和静态网页时扮演着重要角色。理解这些概念的区别对于优化网页性能和布局至关重要。 首先，让我们来看一下 `href` 和...
link和@import的区别
weixin_30950887的博客
12-31 121
转自：http://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html 页面中使用CSS的方式主要有3种：行内添加定义style属性值，页面头部内嵌调用和外面链接调用，其中外面引用有两种：link和@import。 两者都是外部引用CSS的方式，但是存在一定的区别： 区别1：link是XHTML标签，除了加载C...
link与@import区别
田兴的博客
10-20 4661
应用场景： <head> <!-- link是标签，引入外部样式表 --> <link rel="stylesheet" href="./a.css"> <style> /* @import 在css环境中 导入外部css */ @import url('./b.css'); .box{ width: 100px; height: 100px;
学习随笔-Link和@import的区别
最新发布
qq_75112481的博客
09-30 240
由于它是XHTML标签，除了可以加载CSS文件外，还可以定义rel连接属性，定义RSS等。link可以在页面加载的同时，加载CSS文件。可以在网页页面中导入CSS文件，也可以在一个CSS文件里导入多个CSS文件。使用@import只能等待全部页面下载完之后，再加载CSS文件（此时就可能会导致页面出现白屏）。由于@import是在css2.1的时候提出的，所以它只支持在IE5以上的浏览器才能被识别。----【希望可以帮助到大家，如有缺漏或者错误的知识点，欢迎大神们在评论区帮忙补充指正】-----
link和@import的区别？
weixin_47450807的博客
04-17 3499
一、link和@import的区别？ 1.1、link属于html标签，而@import是css提供的。 1.2、页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载的。 1.3、兼容性问题：@import只在IE5以上才能识别，而link是html标签，无兼容性问题。 1.4、权重问题:@import的权重要高于link。 1.5、DOM操作:DOM可以操作link中的样式，而不可以操作@import中的样式。 ...
link和@import的区别：
weixin_52474888的博客
03-02 5103
link和@import的区别： 1、从属关系区别 @import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。 2、加载顺序区别 加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。 3、兼容性区别 @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。 4、DOM
css中link和@import的区别分析详解
01-19
同时，浏览器处理这两种方式也有所区别： 使用link方式，浏览器会先装载完CSS文件再装载HTML的主体部分，所以显示出来的页面从开始就是带样式效果的。 而采用@import方式，浏览器则会先装载完整个H
Link和@import的区别
wstomc的博客
02-21 249
1. 本质区别：link由html提供；@import由css提供 2. 加载方式：link与html页面结构同时加载；@import是等待html页面结构加载完成后再加载，会造成也面的重绘和回流 3. 兼容性：link不存在兼容性问题；@import需要IE5以上浏览器才能识别 4. 操作DOM：@import方式引入无法操作DOM；link方式可以 ...
css引入 link @import的区别
BigDaddy233333的博客
11-11 879
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。 区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。 区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。 区别4：ink支持使用Javascript控制DOM去改变样...
css引入的方式有哪些，link和@import的区别是什么
GrowingRick的博客
06-06 653
css引入的方式有哪些，link和@import的区别是什么 有四种形式: 1.链入外部样式表,就是把样式表保存为一个样式表文件,然后在页面中用 <link rel="stylesheet" type="text/css" href="*.css"> 链接这个样式表文件. 2.内部样式表,就是把样式表放到页面的区里. <style type="text/css"> div {height: 600px;} </style> 3.导入外部样式表,用@import,在与
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值