例
<h1>ラベルの最終的なスタイルの例を示します。
<div>
<h1 class="red">标题一</h1>
</div>
スタイルシート 1 - カスタムスタイル
.red {
color: salmon;
font-size: 40px;
}
h1 {
font-size: 30px;
}
div h1.red {
font-size: 20px;
font-size: 3em;
}
div {
background-color: rgba(0, 0, 0, 0.3);
text-align: center;
}
スタイルシート 2 - ブラウザのデフォルトのスタイル
css 属性によって計算される最終的な属性値は、次の 4 つのステップを経ます。
1. 宣言値を決定する
すべてのスタイル シートでは、競合のない CSS スタイルが最終的なスタイルになります。
ご覧のとおり、競合しない CSS スタイルはcolor display margin-block-start... などです。
したがって、このステップにより最終的なスタイルが決まります。
h1 {
color: salmon;
display: block;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
/* 其他 css 声明... */
}
2. カスケード競合
スタイル シート内の競合する宣言にはカスケード ルールを使用します。
2.1、ソースの重要性を比較する
重要: [カスタム スタイル] > [ブラウザのデフォルト スタイル]。
したがって、font-sizeの最終的な値はカスタム スタイルで決定されます。
.red {
font-size: 40px;
}
h1 {
font-size: 30px;
}
div h1.red {
font-size: 20px;
font-size: 3em;
}
この手順では、セレクターの重みが低いカスタム スタイルが
* { margin: 0 }ブラウザのデフォルト スタイルをオーバーライドする理由を説明できます。body { margin: 8px }
2.2、優先順位の比較
それはセレクターの重さです。明らかに、このセレクターの重みが最も高くなります。
div h1.red {
font-size: 20px;
font-size: 3em;
}
2.3、ソースの順序の比較
同じ CSS スタイルの場合、後のコードで前のコードが上書きされます。
この時点で得られた最終的なスタイルは次のとおりです。
h1 {
font-size: 3em;
color: salmon;
display: block;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
/* 其他 css 声明... */
}
3. 継承を使用する
まだ値のないスタイルについては、継承できる場合は、親要素のスタイルを継承します。
カスタム スタイルにも CSS ステートメントがあることがわかります。
div {
background-color: rgba(0, 0, 0, 0.3);
text-align: center;
}
このうちbackground-color、 は継承できませんtext-alignが、継承は可能です。したがって、継承されたスタイルを取得します。
h1 {
text-align: center;
font-size: 3em;
color: salmon;
display: block;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
/* 其他 css 声明... */
}
4. デフォルト値を使用する
まだ値のないスタイルの場合は、デフォルト値 (デフォルト値) が使用されます。
たとえば、の<h1>デフォルトbackground-color値は ですtransparent。
h1 {
background-color: transparent;
text-align: center;
font-size: 3em;
color: salmon;
display: block;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
/* 其他 css 声明... */
}
この時点で、最終的なスタイルが決定され、ブラウザがそれを認識できるように単位変換の最後のステップを通過する必要があります。
サイズ関連のスタイルは、相対単位を絶対単位に変換します ( など
emrem%auto)px。
色は rgb() に変換されます。redに変わるrgb(255, 255, 255);transparentに変わるrgba(0, 0, 0, 0)
他の
上記のルールを念頭に置いて、例を見てみましょう。
<div class="box">
<a href="">超链接</a>
</div>
.box {
color: red !important;
}
効果：
説明する：
宣言値を決定する最初のステップでは、<a>ブラウザのデフォルト スタイルにスタイルがありますcolor。また、 にはカスタム スタイル セットはありません<a>。したがって、のスタイル値<a>は直接決定できますcolor。
<a>したがって、通常は、後続の操作を容易にするために、次のカスタム スタイルが親のスタイルを継承するようにプロジェクトに設定されますcolor。
a {
text-decoration: none;
color: inherit; /* 表示继承 */
}
以上。
参照: Duyi 教育。