Html引入外部css <link>标签 @import
创始人
2024-05-27 06:47:39
0

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相关文档。

相关内容

热门资讯

沪江材料7月1日获融资买入49... 7月1日,沪江材料涨0.55%,成交额8830.46万元。两融数据显示,当日沪江材料获融资买入额49...
奕东电子7月1日获融资买入74... 7月1日,奕东电子跌1.05%,成交额9568.04万元。两融数据显示,当日奕东电子获融资买入额74...
通鼎互联7月1日获融资买入15... 7月1日,通鼎互联涨0.53%,成交额1.63亿元。两融数据显示,当日通鼎互联获融资买入额1548....
恺英网络7月1日获融资买入1.... 7月1日,恺英网络涨3.47%,成交额22.41亿元。两融数据显示,当日恺英网络获融资买入额1.73...
汤臣倍健7月1日获融资买入16... 7月1日,汤臣倍健涨0.80%,成交额1.10亿元。两融数据显示,当日汤臣倍健获融资买入额1610....
四方股份7月1日获融资买入87... 7月1日,四方股份涨0.98%,成交额1.43亿元。两融数据显示,当日四方股份获融资买入额871.6...
长源电力7月1日获融资买入28... 7月1日,长源电力涨2.89%,成交额3.56亿元。两融数据显示,当日长源电力获融资买入额2876....
广汇能源7月1日获融资买入30... 7月1日,广汇能源涨0.00%,成交额1.89亿元。两融数据显示,当日广汇能源获融资买入额3090....
陕建股份7月1日获融资买入30... 7月1日,陕建股份涨0.00%,成交额3810.67万元。两融数据显示,当日陕建股份获融资买入额30...
川能动力7月1日获融资买入10... 7月1日,川能动力跌0.10%,成交额8604.47万元。两融数据显示,当日川能动力获融资买入额10...