ホームページ > 記事 > ウェブフロントエンド > CSSで属性値の継承を使用する方法
CSSで属性値の継承を使用する方法
- php中世界最好的语言オリジナル
- 2018-03-21 14:59:392024ブラウズ
今回はCSSでの属性値の継承の使い方と、CSSでの属性値の継承を使用する際の注意点について紹介します。以下は実践的なケースですので見ていきましょう。
継承: 現在の要素がこの属性を定義していない場合でも、HTML 要素は親要素から一部の CSS 属性を継承できます。
1.継承できるCSS属性と継承できないCSS属性
継承不可: 表示、マージン、境界線、パディング、背景、高さ、最小高さ、最大高さ、幅、最小幅、最大幅、オーバーフロー、位置、左、右、上、下、Z-index、float、clear、テーブル レイアウト、vertical-align、改ページ後、ページブレッド前、および unicode-bidi。
可視性とカーソルなど、すべての要素は継承可能です。
インライン要素は、letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration を継承できます。 、テキスト変換、方向。
端子ブロック要素は、text-indent と text-align を継承できます。
List 要素は、list-style、list-style-type、list-style-position、list-style-image を継承できます。
Table 要素は、border-collapse を継承できます。
2. 値の継承
継承は、ドキュメント ツリー内の要素の一部の属性も、その子要素に継承できるかどうかを定義します。ドキュメントのいくつかのデフォルトのスタイル属性を設定するには、この属性をドキュメント ツリーのルートに設定できます。この属性が継承できる場合、その子孫の要素は、色、フォント サイズ、その他の属性などの属性を継承します。
3. 「継承」値
各属性には「継承」の値を割り当てることができます。つまり、指定された要素の属性は、その親要素の相対属性の計算値と同じ値になります。 。継承値は通常、フォールバック値としてのみ使用されます。これは、「継承」を明示的に指定することで強化できます。たとえば、制限は次のとおりです。境界線、マージン、パディング、および背景。
この設定は意味があります。たとえば、に境界線が設定されている場合、この属性も継承されると、この
内のすべての要素に境界線が設定されるため、間違いなく問題が発生します。結果。同様に、マージンやパディングなど、要素の位置に影響を与えるプロパティは継承されません。
p { font-size: inherit; }
4.继承的局限性
继承虽然减少了重复定义的麻烦，但是，有些属性是不能继承的，例如border（边框）、margin（边距）、padding（补白）和背景等。
这样设定是有道理的，例如，为一个
设定了边框，如果此属性也继承的话，那么在这个
内所有的元素都会有边框，这无疑会产生一个让人眼花缭乱的结果。同样的，影响元素位置的属性，例如margin（边距）和padding（补白），也不会被继承。
同时，浏览器的缺省样式也在影响着继承的结果。例如：
body { font-size: 12px; } 同時に、ブラウザのデフォルトのスタイルも継承結果に影響します。たとえば、
// H2 中国語テキストは、12 ピクセル サイズのテキストではなく、タイトル 2 スタイルのテキストになります。
これは、ブラウザのデフォルトのスタイルが
の CSS ルールを設定しているためです。
同時に、一部の古いバージョンのブラウザは継承をあまりサポートしていない可能性があります。たとえば、一部のブラウザは