継承

継承とは、
プロパティに値が
指定されなかった場合に、
その親要素の値を取ること。

継承とは、要素のプロパティに値が指定されなかった場合の挙動のひとつです。
継承プロパティと非継承プロパティとがあり全てが継承される訳ではありません。
要素の継承プロパティに値が指定されなかった場合に、要素はその親要素のプロパティの計算値（宣言値そのままではありません）を取得します。文書のルート要素は親要素がありませんし、プロパティの概要で与えられた初期値を取得します。

  1. <div style=" font-style: italic; ">oya<div>ko</div></div>

font-style は継承プロパティです。親要素に指定して子要素には省略しました。
子要素に font-style を指定していないので、親要素の font-style の計算値を使います。
結果、font-style: italic; 相当の処理を行います。

oya
ko

初期値

初期値とは、
プロパティに値が
指定されなかった場合に、
決められた値を取ること。

初期値とは、要素の非継承プロパティに値が指定されなかった場合の挙動のひとつです。
プロパティの概要で個々に決められています。

  1. <div style=" outline-width: 1px; outline-style: solid; ">親要素<div style=" outline-style: solid; ">子要素</div></div>

outline-width は非継承プロパティです。親要素に指定して子要素には省略しました。
子要素に outline-width を指定していないので、初期値 medium が使われます。

親要素
子要素

一括指定などでの省略された値

一括指定では、
指定されていない値の
既定値が決められている。

一括指定では省略時の振る舞いがそれぞれで別途決められているが、大抵がその省略部分の初期値が設定される。
省略部分が個別では継承プロパティだったとしても初期値が設定されるので注意が必要です。

  1. <div style=" font-style: italic; ">oya<div style=" font: medium serif; ">ko</div></div>

font は font-size, font-family等の一括指定です。親要素にはその１つの font-style という継承プロパティを指定しました。
子要素では font: medium serif; という一括指定で font-size: medium; font-family: serif; に相当する指定をし、他は省略しました。

oya
ko

font は font-size, font-family の他に、font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal; の一括指定が行われます。
font-style は子要素には指定していないが font 一括指定は行っているので、font-style は一括指定での省略時の初期値として normal が用いられる。
結果、font-style: normal; 相当の処理を行います。
一括指定によって指定されていない扱いでなく、一括指定での省略による初期値の設定であり、継承の判断に於いては値は指定されているという扱いかと思います。

inherit のキーワード

inherit キーワードを用いて、
明示的に継承を
指定する事ができます。

  1. <div style=" outline-width: 1px; outline-style: solid; ">親要素<div style=" outline-width: inherit; outline-style: solid; padding: 1em; ">子要素</div></div>

outline-width は非継承プロパティです。親要素に値を指定して子要素には inherit キーワードを指定しました。

親要素
子要素

子要素に inherit を指定しているので、親要素の outline-width の計算値を使います。
結果、outline-width: 1px;相当の処理を行います。

(非継承プロパティを選んで例示したのは解り易い例示と思っての事で、別に継承プロパティでも同じです。
ただ、CSS は誤りを明示してくれず無視する解釈な様で inherit を適当な文字で置き換えた場合にその指定をなかった扱いにして継承プロパティだと指定がないから継承と処理して例示としては如何なものかと。)

initial のキーワード

initial キーワードを用いて、
明示的に初期化を
指定する事ができます。

  1. <div style=" font-style: italic; ">oya<div style=" font-style: initial; ">ko</div></div>

font-style は継承プロパティです。親要素に値を指定して子要素には initial キーワードを指定しました。
子要素に initial を指定しているので、font-style の初期値 normal を使います。

oya
ko

unset のキーワード

unset キーワードを用いて、
プロパティをリセットし
継承プロパティなら継承,
非継承プロパティなら初期値を
指定する事ができます。

  1. <div style=" font-style: italic; ">oya<div style=" font-style: unset; ">ko</div></div>

font-style は継承プロパティです。親要素に値を指定して子要素には unset キーワードを指定しました。
子要素に unset を指定しているので、font-style は継承プロパティなので継承します。

oya
ko

間接的な継承

初期値が
他の継承プロパティの
値を示す。

初期値が他のプロパティの値を表すという物で、そのプロパティが継承プロパティの場合に継承の様な状況が発生します。
継承ではないのですが継承が関係するので、値の関係性が面倒です。

  1. <div style=" color: #0000ff; border: 1px solid; padding: 1em; ">親要素<span style=" border: 1px solid; ">子要素</span></div>

border-color は非継承プロパティです。初期値は currentColor です。
currentColor キーワードは、要素の color プロパティの値を表します。
color は継承プロパティです。親要素では値を指定し、子要素では省略しています。

親要素
子要素

border: 1px solid; により border-width: 1px; border-style: solid; border-color: currentColor; に相当する指定をしています。（省略による初期値を含む）
子要素の border-color は子要素の color の値を見て、子要素の color は継承により親要素の color の値を見ています。
親要素の border-color も親要素の color の値を見ている指定なので border-color が継承プロパティの様です。
でも border-color は非継承プロパティですから親要素の border-color に値を指定しても子要素には継承されません。