CSS での継承の詳細説明 (examples_html/css_WEB-ITnose)

CSS 継承は、使用されるスタイル プロパティによって定義されます。つまり、CSS プロパティの背景色を見ると、「継承」という列が表示されることになります。おそらくほとんど注目されていないかもしれませんが、それでも非常に便利です。
CSS 継承とは

最上位の HTML 要素を除くすべての要素は、対応する親要素を持ち、各親要素の CSS 属性値はその子要素に適用されます。 。

たとえば、H1 タグには EM タグが含まれています:

EM は H1 タグの子要素です。H1 から継承された CSS 属性値は、次のように EM タグで自動的に有効になります。 CSS コードの内容をクリップボードにコピー

h1{font-size: 120%;}

font-size はデフォルトで継承される CSS プロパティであるため、「非常に大きな」フォントも 120% に拡大されます。 H1 。 CSS 継承の使用方法

最も簡単な方法は、すべての CSS プロパティのうちどれがデフォルトで継承されるかを知ることです。このプロパティが継承されると、その要素のすべての子要素で有効になることがわかります。

BODY タグなどの最上位の要素で基本スタイルを定義することがよくあります。フォントが本文に設定されている場合、継承により、ドキュメント内のすべての要素にこのフォントが適用されます。

CSS コードはコンテンツをコピーします。クリップボードにコピーします

h1{font-size: 120%;}

「inherit」値を使用します

この値でプロパティが定義された後、各 CSS プロパティの値には、inherit が含まれます。プロパティがデフォルトで継承されない場合でも、次のように親要素の CSS プロパティの値が適用されます。

CSS コードはコンテンツをクリップボードにコピーします

body { margin: 1em }

;

p { margin: respect; }

計算された値を使用する

計算された値は、Web ページ内の他の値に対して相対的に値が定義されることを意味します。これは、継承されたプロパティの場合に特に重要です。本文で font-size:1em を定義すると、ドキュメント内のすべての要素のフォント サイズが 1em になりません。これは、H1 ～ H6 などの要素の font-size 値が相対的なサイズであるためです。デフォルトでは、H1 は Web ページ内で最大のフォント サイズを持つ要素です。body 要素のフォント サイズを設定する場合、H1 ～ H6 はこの「平均」サイズのフォントに基づいて実際のフォント サイズを計算します。 別の例:

前に述べたように、font-size はデフォルトで継承される CSS プロパティですが、span フォントのサイズは p の 80% ではなく、p と同じサイズになります。継承は計算された値です。p の親要素のフォント サイズが 30px の場合、p の計算されたフォント サイズは 24px となり、span は 80% ではなく 24px を継承します。

計算値の詳細については、「CSS 計算値」を参照してください。

背景は「継承」です

背景属性を見ると、その継承が「いいえ」であることがわかります。これは、デフォルトでは継承されないことを意味します。ただし、ブラウザはデフォルトでこの属性を「継承」します。たとえば、次のように記述します。

「Big」の背景はまだ黄色です。これは、background 属性の初期値が透明であるためです。 see は実際には h1 タグの背景です。