CSS の継承プロパティとは何ですか? CSS の継承可能なプロパティと継承不可能なプロパティの概要

いわゆる継承とは、現在の要素がこの属性を定義していない場合でも、HTML 要素が親要素から一部の CSS 属性を継承できることを意味します。では、CSS のどのプロパティが継承でき、どのプロパティが継承できないのでしょうか? CSSにおける属性継承の内容を見てみましょう。

まず、CSS の優先度を見てみましょう:

!重要 > ID セレクター > タグの継承 >

一般的に使用される CSS 非継承プロパティ

display: 要素が生成するボックスのタイプを指定します

text-decoration: テキストに追加される装飾を指定します

text-shadow: テキストの影効果

white -space: 空白文字の処理

ボックスモデル属性: width、height、margin、border、padding

背景属性: バックグラウンド

位置決め属性: float、clear、position、top、right、bottom、left、min-width 、min -height、max-width、max-height、overflow、clip、z-index

一般的に使用される CSS 継承可能な属性:

font: 結合されたフォント

font-family: 指定された要素のフォントファミリー

font -weight: フォントのウェイトを設定します

font-size: フォントのサイズを設定します

font-style: フォントのスタイルを定義します

text-indent: テキストのインデント

text-align: テキストの水平方向の配置text

line-height : 行の高さ

color: テキストの色

visibility: 要素の可視性

Cursor 属性:cursor

すべての要素は継承可能

1. 要素の可視性: Visibility

2.カーソル

インライン要素によって継承できる属性

1. フォントファミリー属性

2. text-indent と text-align を除くテキストファミリー属性

ブロックレベル要素によって継承できる属性

text-indent 、 text-align

inherit (継承) value

各属性は値「継承」を指定できます。つまり、指定された要素について、属性は、その要素の計算値と同じ値をとります。親要素の相対属性。継承された値は通常、フォールバック値としてのみ使用されます。これは、次のように明示的に「inherit」を指定することで強化できます。ただし、定義を繰り返す場合の問題は、border、margin、padding、background など、一部のプロパティを継承できないことです。

たとえば、e388a4556c0f65e1904146cc1a846bee に境界線が設定されている場合、この属性も継承されると、この e388a4556c0f65e1904146cc1a846bee 内のすべての要素に境界線が設定され、間違いなく Dazzling の結果が生成されます。 。同様に、マージンやパディングなど、要素の位置に影響を与えるプロパティは継承されません。

同時に、ブラウザのデフォルトのスタイルも継承結果に影響します。例:

body { font-size: 12px; }

c1a436a314ed609750bd7c7d319db4daレベル 2 タイトルのテキストは 12 ピクセルではありません。 // 2e9b454fa8428549ca2e64dfac4625cd H2 中国語テキストは、12 ピクセル サイズのテキストではなく、タイトル 2 スタイルのテキストになります。

これは、ブラウザのデフォルトのスタイルが c1a436a314ed609750bd7c7d319db4da の CSS ルールを設定しているためです。

同時に、一部の古いバージョンのブラウザは継承を十分にサポートしていない可能性があります。たとえば、一部のブラウザは f5d188ed2c074f8b944552db028f98a1 に遭遇すると、継承された属性をすべて失います。

一度継承された CSS プロパティはキャンセルできず、再定義のみ可能です。

おすすめ関連記事:

CSS継承要素のattributes_html/css_WEB-ITnose

cssでの属性値継承の使い方

cssでの属性値継承の紹介

以上がCSS の継承プロパティとは何ですか? CSS の継承可能なプロパティと継承不可能なプロパティの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。