html @import与＜link＞的区别

最新推荐文章于 2025-01-06 16:31:25 发布

原创最新推荐文章于 2025-01-06 16:31:25 发布 · 444 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css文件引入

html 专栏收录该内容

8 篇文章

订阅专栏

HTML的@import和<link>都是引入CSS文件的方法，但有显著区别：@import是CSS特性，只能导入CSS，且在老版本浏览器中可能不被支持，而<link>在浏览器加载时会并发下载；<link>可方便地通过DOM动态控制样式，常置于<head>中，<style>@import则位于<style>内，并需明确声明类型。

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

两者都可以用与引入CSS文件，但两者有着一下几种区别

来源
<link> 是 XHTML 的标签，除了可以引用CSS文件外，还可以做其他事情。例如引入RSS、定义rel连接属性等。
@import 是CSS提供的一种引入CSS文件的方式，只能用于引入CSS文件。
兼容性
<link> 一般无兼容性问题
@import 是CSS2.1提出的，所以老版本的浏览器可能不支持
加载顺序
<link> 在浏览器加载到 <link> 标签时，会并发地下载所需资源，与浏览器的解析渲染同时进行。
@import 会等到页面其他内容加载完毕后才会开始下载所需资源。所以偶尔会看到一些使用 @import 的页面出现闪烁
使用DOM动态控制样式
<link> 可以方便地使用Javascript动态控制DOM并引入新CSS文件来控制页面样式
@import 不是DOM可以控制的

使用方法不同
<link> 常位于头部 <head> 中
@import 位于 <style> 顶部

<html>
    <head>
    	<link href='demo.css' rel="stylesheet" type="text/css" />
    </head>
    <body>
    </body>
    <style>
    	@import "demo.css";
    </stype>
</html>