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

相关内容

热门资讯

为什么创业需要组成创业团队?答... 首段: “单打独斗”还是“团队作战”?这是很多创业者在初创业时都会面临的问题。那么,为什么创业需要...
【国家扶贫农村创业项目】助力乡... 首段: 随着我国经济的快速发展,农村地区的发展也成为了国家关注的焦点。在这个大背景下,国家扶贫农村...
今年有什么好生意 今年有什么好... 今年有什么好生意?这个问题一直困扰着很多创业者。随着市场的不断变化和消费需求的不断升级,今年的好生意...
养殖创业赚钱吗?揭秘养殖业赚钱... 首段: 养殖创业赚钱吗?相信这是许多想要投身养殖业的创业者心中的疑问。近年来,随着我国经济的快速发...
唐七公子的《三生三世,枕边书》... 唐七公子的《三生三世,枕边书》大概情节是怎样的?有没有谁知道?凤九和东华帝君的故事。枕上书不是枕边书...
我想请高人解签-一世姻缘岂偶然... 我想请高人解签-一世姻缘岂偶然,贵人扶助力为先,丝罗结就宾人语,伉俪谐和到百年.是什么意思?这个签是...
中国传媒大学数字媒体艺术专业本... 中国传媒大学数字媒体艺术专业本科生的教材有哪些?最好告诉我书名和作者。版本。谢啦!我是大一学生 广告...
我是电子商务专业的大学生,现在... 我是电子商务专业的大学生,现在的我很迷茫,我想努力,可是真不知道自己该学些什么充实自己的大脑,求救你...
中大门国际物流集团加密“郑州-...   炒股就看金麒麟分析师研报,权威,专业,及时,全面,助您挖掘潜力主题机会! (来源:大象新闻)大...
水利部针对广东、广西、海南启动... 转自:央视网央视网消息:据预报,受第6号台风“韦帕”影响,7月19日至21日,华南大部、江南东南部及...