@importとリンクについてスタイルの違いの導入は、オンラインの多くの主張があります。一般的に、そこにいくつかあるが、私はこの1つは、我々が探求するために一緒に働くことができる場所ではないだろう。
違い
1.所属差
@import CSSの文法規則は、輸入スタイルシートの役割のみを提供され、リンクはCSSファイルを読み込むことができるだけでなく、HTMLタグによって提供され、あなたはまた、RSS、相対接続属性を定義することができます。
2.ロード階微分
ページがロードされると、ラベルが同時にCSSロードを組み込まれているリンク、ページがロードされた後@import導入CSSが読み込ま。
3.互換性の違い
@importのみCSS2.1の構文で、それだけで+ IE5に識別することができ、ラベルなどのリンクHTML要素、互換性の問題はありません。
4.DOM制御性の違い
JS操作によってDOM、挿入されたリンクタグのスタイルを変更するために、方法は、文書に基づいているので、DOMは@importスタイルに挿入することができません。
5.右の重量差
@importの主要なスタイルの導入をリンクする権利は、スタイルを導入しました。（???）
私たちは、あなたが通常のサブセクション5などのA文を参照してくださいますオンライン時間差の両方を検索します。第5条は実際にそれはありますか？質問に開きます。
そこでここでは、記事を確認するために、いくつかのデモを持っています
再検証してみましょうと言うのヘビーウエイトの前に、関連する概念をCSS：
CSSの重みは、優先順位、CSSセレクタ高い重量セレクタ、すなわち高優先度セレクタを指します。
CSSの優先性能は、同じHTML要素に時間の要素を設定し、異なるセレクタの異なる優先順位は、スタイルの低優先度は、スタイルの高優先度によって覆われます。
CSSの優先度の重みを次のように
！重要>インラインスタイル> ID>クラス、擬似クラス、属性>タグ名>継承>ワイルドカード
理解重い重み計算を容易にするために、我々は次のように数値解析を前提としています。
デモ：
学习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>すなわち、上記の計算によれば、このボタンは、黄色の背景、白のフォントでなければなりません。
ここで再び、私たちの話題に戻っ：スタイルは、それ@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>比較12と二つの例、我々はこれら二つの概念を導入することリンクと@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>
学习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>実施例3および4の分析結果を見ることができます。
図3は、例えば、我々は赤い枠を参照してください、力で@import導入green.cssを使用してインラインスタイルを証明したが、そのスタイルは、背景のピンクの背景インラインスタイルを離れて積み重ねられており、この現象ショー、輸入だけでなく、として@されます我々は、そう、インラインスタイルはそれを積み重ねることができるように、構造に組み込まれているのスタイルを、インラインスタイルの上部に、見て、実際にインラインスタイルの前に置かれています。
同様に、実施例4において、上部に導入blue.cssファイルリンクタグであり赤い枠を導入green.css @importは依然として、証明力green.cssこともあるが、背景パターン自体はblue.cssあります青色の背景には、離れて積み重ねられたスタイル@インポートもで導入されblue.css独自のスタイルの前に配置します。
上記の例の導入によって証明されるようなスタイルので重量は@importスタイルが、これは公平ではないと言う導入よりも大きいリンクします。
疑いますか？
ページがロードされたときに我々はまた、CSSスタイルは、時間の導入は、それをロードするために@importを先行するリンクと言うことではない、リンク上のトップと@importの違いと言いますか？なぜリンクスタイルは@import導入ああを導入したスタイルを上書きすること？
まずは、ブラウザの実装プロセスにいくつかの概念を確認してみましょう：
読み込んでいます：ドメイン名解決要求は、URLによると、その後、（例えばHTML、CSS、JS、画像など）応答ファイルを受け取り、サーバーに要求を送信します。
分析：応答（例えばHTML DOMツリー、プロパティシート、CSS、JSのオブジェクトのスタイル規則など）内部データ構造を構築するために、解析のためのリソース（HTML、CSS、JSなど）にロードされます。
レンダリング：建設位置計算、計算スタイルの要素のそれぞれの、木をレンダリングして、レンダリングブックページ（ページ発生素子）に応じてレイアウト描画処理を完了します。
したがって、上記のブラウザを実行した後の我々の理解によると、私たちは私を質問し続けます。
リンクは、それをレンダリング@import Esenされていない前に@importロード？
実際には、アクションをレンダリングするブラウザは、通常、複数回実行します。前回のレンダリングは、すべてのスタイルは、ロードページ要素の前に、これまで統合レンダリングされた再レンダリングされるページを描画するためにレンダリングツリーに基づいていなければなりません。
その後、我々は、ファイルの先頭にケース@importでCSSファイルを、解析するCSSの構文解析エンジンは、インポートされたCSSの@importに置き換えられますとき、インポート@importのCSSファイルのこの方法は、代替として理解置くことができますすべてのスタイルファイル。
@importスタイルが導入された理由を最後に考え出した、アウトスタックされます。そのロードした後、それはスタイルがロードされた後、テーブルの上に配置されますが、それは当然、最終的なレンダリングスタイルに同じ名前の後に積層されます。