前端夯实基础（八）--- link与@import-CSDN博客

本文链接：https://blog.csdn.net/WRian_Ban/article/details/100073397

本文详细探讨了CSS中link和@import的区别，包括它们的来源、加载顺序、兼容性、JavaScript操作性和权重。link是HTML标签，用于引入CSS文件及其他资源，其加载与解析同步进行；而@import是CSS2.1引入的语法，加载在页面加载完成后，且不支持JS动态插入。在权重方面，link引入的样式高于@import。

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

1、来源

@import是 CSS 提供的语法规则，只有导入样式表的作用；
语法：
```
@import url;
@import url list-of-media-queries;
```
url：这个 URL 可以是绝对路径或者相对路径。
list-of-media-queries：是一个逗号分隔的媒体查询条件列表，决定通过URL引入的 CSS 规则在什么条件下应用。如果浏览器不支持列表中的任何一条媒体查询条件，就不会引入URL指明的CSS文件。

示例：
```
@import url("fineprint.css") print; // 打印
@import url("bluish.css") projection, tv; // 投影或电视
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;  //屏幕或投影
@import url('landscape.css') screen and (orientation:landscape); // 屏幕且横屏
```

<link>是HTML外部资源链接元素，是HTML提供的标签，规定了当前文档与外部资源的关系。
不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
其中，rel属性表示“关系 (relationship) ”，它可能是<link>元素其中一个关键的特性——属性值表示<link>项的链接方式与包含它的文档之间的关系。

<link rel="icon" href="favicon.ico"> // 网站图标的链接，没错，就是你存书签时那个链接。
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png">// 还可以在不同的移动设备上加载不同的图标，sizes属性表示图标大小，type属性包含了链接资源的MIME类型。

<link href="print.css" rel="stylesheet" media="print">// 在media属性内部进行查询；这种资源将只在满足媒体条件的情况下才被加载进来。
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">

<link rel="preload" href="myFont.woff2" as="font"  type="font/woff2" crossorigin="anonymous">// 将rel设定为preload，表示浏览器应该预加载该资源，crossorigin属性表示该资源是否应该使用一个CORS请求来获取。