CSS導入方式と優先度の簡単な紹介
2475 ワード
css導入方式インライン方式は、HTMLタグのstyle属性にCSSを直接追加することを意味する.
- 嵌入方式, 嵌入方式指的是在 HTML 头部中的
... ...
- 链接方式, 链接方式指的是使用 HTML 头部的 标签引入外部的 CSS 文件。
- 導入方式は、CSSルールを使用して外部CSSファイルを導入することを意味する.
- linkはHTMLに属し、ラベルのhref属性によって外部ファイルを導入し、@importはCSSに属するので、インポート文はCSSに書くべきで、インポート文はスタイルシートの先頭に書くべきで、そうでなければ外部ファイルを正しくインポートできないことに注意してください.
- @importはCSS 2.1のみのコンセプトなので、ブラウザのバージョンが低いと、外部スタイルファイルを正しくインポートできません.
- HTMLファイルがロードされると、link参照のファイルは同時にロードされ、@import参照のファイルはページがすべてダウンロードされてからロードされます.
- 最近の祖先スタイル優先度は、他の祖先スタイル優先度よりも 高い.
- 直接スタイルは祖先および優先度より 高い.
- セレクタ優先順位インラインスタイル>IDセレクタ>クラスセレクタ=属性セレクタ=擬似クラスセレクタ>ラベルセレクタ=擬似要素セレクタ
- セレクタ中のIDセレクタの個数(a)を計算し、セレクタ中のクラスセレクタ、属性セレクタおよび擬似クラスセレクタの個数の和(b)を計算し、セレクタ中のラベルセレクタと擬似要素セレクタの個数の和を計算する(c).a、b、cの順に大きさを順次比較し、大きい方は優先度が高く、等しい方は次を比較する.最後の2つの選択子のうちa、b、cが等しい方は「近接原則」に従う判断を下す.外部スタイルシートと内部スタイルシートのスタイルが衝突した場合はどうなりますか?これは、HTMLファイル内のスタイルシートの位置に関係します.スタイルが適用される位置が以下のように優先度が高いほど、ルール4で説明することができる.スタイルリファレンスが競合する場合、リファレンスの位置に関係なく、スタイルの書き込み順序に関係する最後の書き込みの優先度は と高い.
- プロパティの後に挿入されます!importantのプロパティには最高の優先度があります.同時に挿入したら!importantでは,ルール3,4を再利用して優先度を判断する.
リンク方式(以下linkで代用)とインポート方式(以下@importで代用)はいずれも外部のCSSファイルを導入する方式であるが,これら2つの方式を比較し,@importの使用を推奨しない理由を説明する.
CSS優先度
注意:セレクタの重み値は進位できません.例えば、ルール4では、aの比較が完了した後、等しくなければbを比較しません.abcの合計ではありません.
.blue {
color: blue;
}
Document
この映画のすべての内容の大部分はYou-Dont-Need-Javascriptから来て、直接これを見ることを提案します