Html引入外部css ＜link＞标签 @import

Html引入外部css

方法1: <link rel="stylesheet" href="x.css">

<link rel="stylesheet" href="x.css" />

<link rel="stylesheet" href="x.css" type="text/css" />

<link rel="stylesheet" type="text/css" href="x.css" />

<link href="./xxx.css" rel="stylesheet" />

<link href="./xxx.css" rel="stylesheet" type="text/css" />

type=“text/css” 可以不写

方法2: @import

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

@import 要写在 <style> 标签内

<style type="text/css"> @import url("./xxx.css"); </style>

type=“text/css” 可以不写

<style> @import url("./xxx.css"); </style>

可以用单引号

<style> @import url('./xxx.css'); </style>

也可以不要引号

<style> @import url(./xxx.css); </style>

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

<style>
	@import url(./xxx.css);
    body>header{color:goldenrod; font-size:66px;}
</style>

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

<style>
    body>header{color:goldenrod; font-size:66px;}
    @import url(./xxx.css);
</style> 写在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 属性

<link rel="value"> : 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	相关文档。