外部样式引用link和@import

最新推荐文章于 2024-10-10 16:14:10 发布

前端大厨

最新推荐文章于 2024-10-10 16:14:10 发布

阅读量739

点赞数

CC 4.0 BY-SA版权

文章标签： link和import的区别

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/kennsand/article/details/53453609

本文介绍了两种常见的CSS加载方法：link标签和@import。link属于XHTML标签，支持加载多种资源类型，如CSS样式表、RSS等；@import则是CSS2.1提供的特性，仅用于加载CSS。两者的主要区别在于加载时机不同，link会在页面加载时同步加载CSS，而@import则会在页面完全加载后再加载CSS，这可能导致页面初次显示时不带样式。此外，它们还存在浏览器兼容性和DOM操作方面的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于外部css样式，一共有两种方法

方法一：

<link rel="stylesheet" type="text/css" href="目标文件">

方式二：（不推荐使用）

<style type="text/css">
@import url(目标文件)
</style>

link 和 import导入外部的区别：

link属于XHTML标签，@import是CSS的提供的方式，link可除了加载css外部样式，也可以定义RSS,定义rel连接属性，@import只能是css
加载顺序的差别：当一个页面被加载时，link引用css时同时被加载，而@import引用css会等到页面全部下载完时再被加载，所以有时浏览@import加载css的页IE5面初时会没有样式。
兼容性的差别：@import是css2.1提出的，老浏览器不支持，只在IE5+才能识别而link无此问题
使用dom控制样式时的差别，当使用javaScript控制dom去改变样式时，只能用link标签，因为@import不是dom可控制的

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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