ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSSカスケードとは何ですか
CSSカスケードとは何ですか
- 青灯夜游オリジナル
- 2021-04-08 17:14:405520ブラウズ
CSS カスケードとは、複数の CSS スタイルの重ね合わせを指します。CSS スタイルが同じ要素に同じ属性を構成する場合、カスケード ルール (重み) に基づいて競合を処理し、CSS セレクターで指定された属性を選択します。は、一般に、重みの高い層が重みの低い層を覆うものとも表現されるため、スタッキングとも呼ばれます。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
CSS カスケード (重要)
は、複数の CSS スタイルのオーバーレイを指します。
は、競合を処理するブラウザの機能です。属性が 2 つの同一のセレクターを通じて同じ要素に設定されている場合、一方の属性がもう一方の属性をカスケードします。
原則:
1. スタイルの競合の場合、従うべき原則は近接性の原則、つまり CSS の記述位置です。
2. スタイルは競合せず、カスケードしません
CSS 継承
CSS スタイル シートを作成する場合、子タグは親タグの一部のスタイルを継承します。テキストの色やフォントサイズなど。継承可能なプロパティを設定するには、それを親要素に適用するだけです。
注: 継承を適切に使用すると、コードが簡素化され、CSS スタイルの複雑さが軽減されます。子要素は親要素のスタイルを継承できます (text-、font-、line-、先頭のこれらの要素と color 属性も継承できます)
CSS 優先度
CSS スタイルを定義する 2 つ以上のルールが同じ要素に適用されることが多い場合、優先順位の問題が発生します。
重みを考慮するとき、初心者は次のような特殊な状況にも注意する必要があります。
継承されたスタイルの重みは 0 です。つまり、入れ子構造では、親要素の重みがどんなに大きくても、 style は、子要素によって継承される場合、その重みは 0 になります。これは、子要素によって定義されたスタイルが継承されたスタイルをオーバーライドすることを意味します。
インライン スタイルが優先されます。 style 属性が適用される要素のインライン スタイルの重みは非常に高く、100 をはるかに超えると理解できます。つまり、上記のセレクターよりも高い優先度を持ちます。
重みが同じ場合、CSS は近接性の原則に従います。これは、要素に最も近いスタイルが最も高い優先順位を持つか、最後にランク付けされたスタイルが最も高い優先順位を持つことを意味します。
CSS は、最も高い優先順位が与えられる ! important コマンドを定義します。スタイルの位置の重さや距離に関係ないとも言われています！重要なものが最も優先されます。
CSS の詳細度
CSS の重みについては、計算に一連の式が必要です。4 桁の数字で構成されます。値は左から右の順で、最大値になります。 left. レベルは最初のレベルより大きく、桁の間に底がなく、レベルを超えることはできません。
継承または * 値: 0, 0, 0, 0
各要素 (タグ) の値: 0, 0, 0, 1
各クラス、疑似クラスの値: 0、0、1、 0
各 ID は: 0、1、0、0
各インライン スタイル値: 1、0、0、0
各 !重要な値: infinity
1.数字間の基数。
2. 継承の影響により、重みは 0 になります (つまり、スタイルにはテキスト タグが含まれません)。たとえば、次のようになります。
.colorRed{
color:#f00; /* 没有选中p标签，所以只是通过继承影响的，权重为0 */
}
p {
color:#0f0; /* 权重为1 */
}
<div class="colorRed">
<p>颜色</p>
</div>コードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#father #son{ /*权重为0,2,0,0*/
color:blue;
}
#father p .c2{ /*权重为0，1，1，1*/
color:black;
}
div .c1 p .c2{ /*权重为0，0，2，2*/
color:red;
}
#father {
color:green !important; /*继承的权重为0*/
}
</style>
</head>
<body>
<div id="father">
<p id="son">颜色</p>
</div>
</body>
</html>効果は次のとおりです:
(学習ビデオ共有: css ビデオ チュートリアル)
以上がCSSカスケードとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。