@import和link引入样式的区别

更新日期: 2019-09-27阅读: 1.8k标签: 区别

最近在做知识体系的复盘,在复盘的时候尽可能的查漏补缺。关于@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 > 类、伪类、属性 > 标签名 > 继承 > 通配符

为了便于理解权重的计算方式,我们按以下方式进行数值假设分析:

选择器权重
通配符0
标签1
类/伪类/属性10
ID100
行内样式1000
important无穷大

demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #myid { /* id选择器权重为100 */
            background-color: pink;
        }
        #divid .myspan input { /* 权重为 100 + 10 + 1 = 111 */
            background-color: yellow;
        }
        input[type="button"] { /* 权重为 10 */
            color: white !important; /* !important权重为无穷大 */
        }
        input.myclass { /* 此为标签指定式选择器,权重为 1 + 10 = 11 */
            color: black;
        }
    </style>
</head>
<body>
    <div id="divid">
        <span class="myspan">
            <input type="button" id="myid" class="myclass" name="myname"
                value="点我" style=" color: green;">
                <!-- style样式的权重为1000 -->
        </span>
    </div>
</body>
</html>

根据上述计算得知:这个按钮应该是黄色背景,白色字体。

这里又回到我们的主题: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)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 实例1. link标签引入yellow.css,内联样式引入green.css -->
    <link rel="stylesheet" href="yellow.css">
    <style type="text/css">
        @import url("green.css");
    </style>
</head>
<body>
    <div style="width: 50px; height: 50px;"></div>
    <!-- 盒子为,绿色背景,红色边框,即green.css生效 -->
</body>
</html>

eg2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 实例2. 内联样式引入green.css,link标签引入yellow.css -->
    <style type="text/css">
        @import url("green.css");
    </style>
    <link rel="stylesheet" href="yellow.css">
</head>
<body>
    <div style="width: 50px; height: 50px;"></div>
    <!-- 盒子为黄色背景,黑色边框,即yellow.css生效 -->
</body>
</html>

对比1和2两个例子,我们发现link和@import这两种引入css的方式并没有权重方面概念,只是单纯的展示出css的层叠行罢了。即写在后边都样式会覆盖前面的样式。

eg3)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 实例3. 内联样式引入green.css,内联样式中设置粉色背景 -->
    <style type="text/css">
        @import url("green.css");
        div {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div style="width: 50px; height: 50px;"></div>
    <!-- 盒子为粉色背景,红色边框,即green.css已生效,但背景色被内联样式层叠为粉色 -->
</body>
</html>

eg4)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 实例4. link标签引入blue.css,blue.css中引入green.css -->
    <link rel="stylesheet" href="blue.css">
</head>
<body>
    <div style="width: 50px; height: 50px;"></div>
    <!-- 盒子为蓝色背景,红色边框,即green.css已生效,但背景色被blue.css层叠为蓝色 -->
</body>
</html>

分析实例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引入的样式,会被层叠掉了。其虽然后被加载,却会在加载完毕后置于样式表顶部,最终渲染时自然会被下面的同名样式层叠。


链接: https://www.fly63.com/article/detial/5539

AR / MR / VR / XR有什么区别?

VR能让人完全沉浸在虚拟环境中;AR能创建一个叠加在虚拟内容的世界,但不能与真实环境交互; MR则是虚拟与现实的混合体,它能创造出可以与真实环境交互的虚拟物体。最后,XR则是包括三种“现实”(AR,VR,MR)的术语。

详解call bind apply区别/使用场景/es6实现/es3实现

call,apply,bind的区别:apply接收数组 func.apply(obj, [arus]),call一连串参数 func.call(obj, param1, param2....),bind返回一个函数 func.bind(obj,param...)(parms...)

理解screenX,clientX,pageX,offsetX,pageXoffset的区别

event.screenX、event.screenY鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性,event.clientX、event.clientY鼠标相对于浏览器可视区域的X,Y坐标

css之word-wrap和word-break的区别

对于英文单词,如果有一个连写且长度很长的英文单词,在第一行显示不下的情况下,浏览器默认不会截断显示,而是把这个单词整体挪到下一行。但是当整体挪到下一行还是显示不完全该肿么办呢?

url 、src 、href 的区别

URL统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL

Js插件、 组件、类库、框架的区别

框架和类库等概念的出现都是源于人们对复用的渴望。“不要重复发明轮子”,成了软件界的一句经典名言。从最初的单个函数源代码的复用,到面向对象中类的复用(通常以类库的形式体现)

*.min.js跟*.js的区别

js是JavaScript 源码文件, .min.js是压缩版的js文件。减小体积 .min.js文件经过压缩,相对编译前的js文件体积较小,传输效率快。防止窥视和窃取源代码

PTN与SDH的区别?

SDH是基于TDM技术,主要用于传输语音,此外采用GFP封装来传输IP包,物理介质为光纤。PTN是采用DWDM技术,主要用于传输IP包、以太网帧,此外采用MPLS-TP技术来实现PWE3伪线

html中src与href的区别

写代码的时候就经常把这两个属性弄混淆,到底是href还是src,href表示超文本引用,用在link和a等元素上,href是引用和页面关联,是在当前元素和引用资源之间建立联系,src表示引用资源,表示替换当前元素,用在img,script,iframe上

Js绑定事件的两种方式的区别

运行后发现,点击后src没有变化,调试发现,这里this是window对象,而不是img标签对象。顿时感觉有点迷惑,因为以前绑定事件中,拿标签属性都是用的this,怎么这里不对了?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!