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

您所在的位置：网站首页 › html中怎么链接css › Html引入外部css ＜link＞标签 @import

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

2024-01-10 10:40| 来源: 网络整理| 查看: 265

Html引入外部css 方法1:

type=“text/css” 可以不写

方法2: @import @import url("./xxx.css");

@import 要写在标签内

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

type=“text/css” 可以不写

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

可以用单引号

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

也可以不要引号

@import url(./xxx.css);

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

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

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

body>header{color:goldenrod; font-size:66px;} @import url(./xxx.css); 写在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相关文档。

【本文地址】

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

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

今日新闻

推荐新闻