くまだどうも、くまだです。
CSSの初期値系「initial,inherit,unset,revert」についてあれこれ。
CSSのinitial
initialはプロパティの初期値または規定値を設定します。個人的には、4つの中で一番使う気がする。
例えば、background-colorは初期値がtransparentなので、initialを適用するとtransparentになる。
background-color: initial; /*初期値はtransparent*/なお、プロパティごとに初期値・規定値は異なります。
CSSのinherit
inheritは親要素に設定している値を継承することができます。
以下のように指定すれば、背景色や文字色など親要素から継承できます。
<div class="box">
<div class="box2">
<p class="text">テキスト</p>
</div>
</div>
.box {
width: 200px;
height: 100px;
border: red 1px solid;
background-color: orange;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
margin: 20px;
}
.box2 {
width: inherit;
height: inherit;
border: red 1px solid;
background-color: inherit;
color: red;
}
.text {
color: inherit;
}
ちなみに文字色はinheritしなくても、親要素に文字色を指定していれば自分に文字色を設定しない場合、親要素の文字色を継承します。
CSSのunset
unsetは、親要素からの継承するプロパティの場合はinheritと同じ。継承しないプロパティの場合はinitialと同じになります。
文字色やfont-sizeなどは継承できるプロパティなのでinherit扱いになります。
一方で、paddingやmargin、borderなどはもともと親要素から継承されないプロパティなので、initial扱いになります。
<div class="box">
<div class="box2">
<p class="text">テキスト</p>
</div>
</div>
.box {
width: 200px;
height: 100px;
border: red 1px solid;
background-color: orange;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
margin: 20px;
}
.box2 {
width: inherit;
height: inherit;
border: red 1px solid;
background-color: skyblue;
color: red;
padding: unset; /*継承されないプロパティなのでinitialになる*/
margin: unset; /*継承されないプロパティなのでinitialになる*/
}
.text{
color: unset; /*継承されるプロパティなのでinheritになる*/
}
CSSのrevert
プロパティの初期値ではなく、ユーザーエージェントの設定値（ブラウザの初期値）になります。
<h1>h1のテキスト</h1>h1 {
font-size: revert; /*ブラウザでh1に設定されている値になる ChromeやEdgeだと32pxになる*/
}
ここまで読んでくださりありがとうございました。