Html引入外部css

方法1:

type=“text/css” 可以不写

方法2: @import

@import url("./xxx.css");

@import 要写在

type=“text/css” 可以不写

可以用单引号

也可以不要引号

还可以和css写在一起(在同一个style标签内), 但@import必须写在开头, 必须在css之前, 否则无效

👆会生效(chrome110), 写在css后面不会有效果 , 👇不会生效(chrome110)

 写在css后面不会有效果

对比 link 和 @import url()

1、link属于html标签，而@import是css提供的，只能加载CSS
2、加载顺序，link在页面加载时被加载，@import在页面加载完之后再加载
3、link是html标签，因此没有兼容性，而@import只有IE5以上才能识别
4、link是可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使

差别 1：

本质的差别：link 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式。

差别 2：

加载顺序的差别： 当一个页面被加载的时候（就是被浏览者浏览的时候) ，link 引用的 CSS 会同时被加载，而 @import 引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览 @import 加载 CSS 的页面时开始会没有样式(就是闪烁)，网速慢的时候还挺明显。

差别 3：

兼容性的差别: @import 是 CSS2.1 提出的，所以老的浏览器不支持，@import 只有在 IE5 以上的才能识别，而 link 标签无此问题。

差别 4：

使用 dom(document object model文档对象模型 )控制样式时的差别：当使用 javascript 控制 dom 去改变样式的时候，只能使用 link 标签，因为@import 不是 dom 可以控制的。

link标签的 rel 属性

: rel是Relations的缩写,大概是关联关系的意思

除了本次用到的stylesheet, 其它可选值还有

https://www.runoob.com/tags/att-link-rel.html

https://www.w3school.com.cn/tags/att_link_rel.asp