About @import and link the introduction of style differences online there are many claims. Generally, there are several, but I doubt this one will be a place where we can work together to explore.
the difference
1. affiliation difference
@import CSS grammar rules is provided, only the role of import style sheets; link is provided by HTML tags can not only load CSS files, you can also define RSS, rel connection attributes.
2. Load order differentiation
When the page is loaded, link the label is simultaneously incorporated CSS loaded; @import introduced CSS loaded after the page is loaded.
3. Compatibility difference
@import is only CSS2.1 syntax, it can only be identified in + IE5; link HTML elements as labels, there are no compatibility problems.
4.DOM controllability difference
DOM by JS operation, to change the style of the link tag inserted; DOM since the method is based on the document can not be inserted in the @import style.
5. The right weight difference
The right to link the introduction of a major style in @import introduced style. (???)
We search on both the difference in the online time you will usually see subsection 5 such a statement. Is Article 5 is it really? Open to question.
So here we have a few demo to verify Article
Before revalidation Let's say heavy weights css related concepts:
css weight refers to the priority, CSS selectors high weight selector, i.e. a high priority selector.
css priority performance, set the element of time to the same html element, different priorities of different selector, low priority of styles will be covered by a high priority of style.
css priority weights as follows:
! Important> inline style> ID> classes, pseudo-classes, attributes> tag name> inherited> wildcard
To facilitate understanding heavy weight calculation, we assume the numerical analysis in the following manner:
demo:
学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
<!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>That according to the above calculation: This button should be yellow background, white font.
Here again, back to our topic: the style is really heavy right to link the introduction of greater than @import it?
Does the introduction of css way will have the right to re-do?
Above 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>Comparative 12 and two examples, we find that link and @import css way to introduce these two concepts did not have the right to re aspect, but simply demonstrate css stacked line Bale. Behind all that is written in the style override earlier style.
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>
学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）G4)
<!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>Analysis results of Examples 3 and 4 can be seen:
3 For instance, we see a red border, proved inline styles using @import introduced green.css in force, but its style is stacked away background pink background inline styles, and this phenomenon shows, @ import not just as we see, at the top of inline style, the style of which is incorporated in the structure, and indeed is placed before inline styles, so inline style to be able to stack it out.
Similarly, in Example 4, in blue.css file link tags introduced at the top there are also green.css @import introduced red border can still prove, green.css in force, but the background pattern itself is blue.css blue background stacked away, style @ import is also introduced in blue.css be placed before its own style.
So style as evidenced by the introduction of the above examples link weight is greater than @import style introduced say this is not fair.
Doubt?
We also say that the difference between the top on the link and @import, when the page is loaded, not to say css styles link the introduction of time will precede @import to load it? Why link that style will overwrite the style introduced @import introduced ah?
First, let's review some concepts on the implementation process of the browser:
Loading: domain name resolution request according to url, then sends a request to the server, receives the response file (e.g. HTML, CSS, JS, images, etc.).
Analysis: loaded into the resource (HTML, the CSS, JS, etc.) for parsing, to build the internal data structures (such as HTML DOM tree, the property sheet, css JS object style rules, etc.) response.
Rendering: Construction render tree, each of the elements of the position calculation, calculation style, and then complete the layout drawing process according to the rendering book page (page generating element).
So according to our understanding after the execution of the browser above, we continue to question me:
@import loaded before the link is not Esen @import rendering it?
In fact, the browser rendering the action usually executed more than once. The last time rendering, it must be based on the render tree to draw a page that has been rendered all the styles integrate ever before loading page elements, will be re-rendered.
Then we can put this way of import @import CSS files understood as an alternative, when the CSS parsing engine to parse a CSS file, in case @import at the top of the file will be replaced with the imported CSS @import all style file.
Finally figured out why @import style introduced, will be stacked out. Although after its loading, but it will be placed on top of the table after the style loaded, it will naturally be laminated following the same name for a final rendering style.