Html引入外部css ＜link＞标签 @import
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, 其它可选值还有
| 值 | 描述 |
|---|---|
| alternate | 链接到该文档的替代版本（比如打印页、翻译或镜像）。 |
| author | 链接到该文档的作者。 |
| help | 链接到帮助文档。 |
| icon | 导入表示该文档的图标。 |
| license | 链接到该文档的版权信息。 |
| next | 表示该文档是集合中的一部分，且集合中的下一个文档是被引用的文档。 |
| prefetch | 规定应该对目标资源进行缓存。 |
| prev | 表示该文档是集合中的一部分，且集合中的上一个文档是被引用的文档。 |
| search | 链接到针对文档的搜索工具。 |
| stylesheet | 要导入的样式表的 URL。 |
https://www.runoob.com/tags/att-link-rel.html
https://www.w3school.com.cn/tags/att_link_rel.asp
| 值 | 描述 |
|---|---|
| alternate | 文档的替代版本（比如打印页、翻译或镜像）。 |
| stylesheet | 文档的外部样式表。 |
| start | 集合中的第一个文档。 |
| next | 集合中的下一个文档。 |
| prev | 集合中的上一个文档。 |
| contents | 文档的目录。 |
| index | 文档的索引。 |
| glossary | 在文档中使用的词汇的术语表（解释）。 |
| copyright | 包含版权信息的文档。 |
| chapter | 文档的章。 |
| section | 文档的节。 |
| subsection | 文档的小节。 |
| appendix | 文档的附录。 |
| help | 帮助文档。 |
| bookmark | 相关文档。 |