web前端入门到实战:@import和link引入样式的区别
关于@import和link引入样式的区别网上有很多种说法。大致有如下几种,不过这其中会有我存疑的地方,我们可以一起来探讨一下。
“专业、务实、高效、创新、把客户的事当成自己的事”是我们每一个人一直以来坚持追求的企业文化。 创新互联建站是您可以信赖的网站建设服务商、专业的互联网服务提供商! 专注于成都网站设计、网站制作、软件开发、设计服务业务。我们始终坚持以客户需求为导向,结合用户体验与视觉传达,提供有针对性的项目解决方案,提供专业性的建议,创新互联建站将不断地超越自我,追逐市场,引领市场!
区别
1.从属关系区别
@import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。
2.加载顺序区别
加载页面时,link标签引入的 CSS 被同时加载; @import 引入的 CSS 将在页面加载完毕后被加载。
3.兼容性区别
@import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link标签作为 HTML 元素,不存在兼容性问题。
4.DOM可控性区别
可以通过 JS 操作 DOM ,插入link标签来改变样式;由于DOM方法是基于文档的,无法使用 @import 的方式插入样式。
5.权重区别
link引入的样式权重大于@import引入的样式。(???)
我们在网上搜索关于这两者的区别的时候通常会看见有第5条这么一个说法。难道第5条真的是这样吗?有待商榷。
所以这里我们就通过几个demo来验证一下第五条
再验证之前我们先来说说css权重的相关概念:
css的权重指的是选择器的优先级,CSS 选择器的权重高,即选择器的优先级高。
css的优先级表现在,对同一个html元素设置元素的时候,不同选择器的优先级不同,优先级低的样式将会被优先极高的样式所覆盖。
css的权重优先级表现为:
!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符
为了便于理解权重的计算方式,我们按以下方式进行数值假设分析:
demo:
学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
Document
根据上述计算得知:这个按钮应该是黄色背景,白色字体。
这里又回到我们的主题:link引入的样式权重真的大于@import吗?
难道引入css的方式也会有权重吗?
上demo:
/* green.css */
div {
background-color: green;
border: 3px solid red;
}
/* yellow.css */
div {
background-color: yellow;
border: 3px solid black;
}
/* blue.css */
@import url("green.css");
div{
background-color: blue;
}
eg1)
Document
eg2)
Document
对比1和2两个例子,我们发现link和@import这两种引入css的方式并没有权重方面概念,只是单纯的展示出css的层叠行罢了。即写在后边都样式会覆盖前面的样式。
eg3)
Document
学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
eg4)
Document
分析实例3和实例4的结果可知:
对于实例3,我们看到红色边框,证明内联样式中使用@import引入的green.css已经生效,但其背景样式被内联样式中的粉色背景层叠掉,这个现象表明,@import不只是如我们看到的那样,处于内联样式顶部,其被引入的样式,在结构上,也确实是被置于内联样式之前,所以内联样式才能够层叠掉它。
同理,实例4中,在link标签引入的blue.css文件内,顶部同样存在@import引入的green.css,红色边框依然可以证明,green.css已经生效,但其背景样式被blue.css本身的蓝色背景层叠掉,@import引入的样式在blue.css中也是被置于它本身样式之前的。
所以由上述实例证明link引入的样式权重大于@import引入的样式这么说是不太合理的。
疑点?
我们上边也说了关于link和@import的区别,在加载页面的时候,不是说在link引入的css样式的时候会先于@import加载吗?那为啥link引入的样式又会覆盖掉@import引入的样式啊?
首先我们来回顾一下关于浏览器执行过程的一些概念:
加载:根据请求的url进行域名解析,然后向服务器发送请求,接收响应文件(如HTML、CSS、JS、图片等)。
解析:对加载到的资源(HTML、CSS、JS等)进行语法解析,构建响应的内部数据结构(如HTML的DOM树,JS对象的属性表,css样式规则等)。
渲染:构建渲染树,对各个元素进行位置计算、样式计算等,然后根据渲染书完成页面的布局及绘制的过程(产生页面的元素)。
所以根据我们上述的浏览器执行过程的理解以后,我们我继续提出疑问:
link先于@import加载,是不是也先于@import渲染呢?
实际上,浏览器渲染的动作一般会执行多次的。最后一次渲染,一定是基于之前加载过的所有样式整合后渲染树进行绘制页面的,已经被渲染过的页面元素,也会被重新渲染。
那么我们就可以把@import这种导入 CSS 文件的方式理解成一种替换,CSS 解析引擎在对一个 CSS 文件进行解析时,如在文件顶部遇到@import,将被替换为该@import导入的 CSS 文件中的全部样式。
终于弄明白为何@import引入的样式,会被层叠掉了。其虽然后被加载,却会在加载完毕后置于样式表顶部,最终渲染时自然会被下面的同名样式层叠。
本文题目:web前端入门到实战:@import和link引入样式的区别
网址分享:http://pwwzsj.com/article/gojsjg.html