CSSの継承

CSS継承の意味とそれが重要である理由を学ぶ

CSSのセレクターにいくつかのプロパティを設定すると、それらはそのセレクターのすべての子に継承されます。

私は言ったいくつか、すべてのプロパティがこの動作を示すわけではないためです。

これは、一部のプロパティが継承されることに意味があるために発生します。これにより、すべての子にそのプロパティを再度明示的に設定する必要がなくなるため、CSSをより簡潔に記述できます。

他のいくつかのプロパティは、ない継承されます。

フォントについて考えてみましょう。フォントを適用する必要はありません。font-familyページのすべてのタグに。あなたはbodyタグフォント、およびすべての子は他のプロパティと一緒にそれを継承します。

ザ・background-color一方、プロパティは継承する意味がほとんどありません。

継承するプロパティ

継承するプロパティのリストは次のとおりです。このリストは包括的ではありませんが、これらのルールは、使用する可能性が最も高いルールです。

  • border-collapse
  • border-spacing
  • caption-side
  • color
  • cursor
  • direction
  • empty-cells
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • font-size-adjust
  • font-stretch
  • font
  • letter-spacing
  • line-height
  • list-style-image
  • list-style-position
  • list-style-type
  • list-style
  • orphans
  • quotes
  • tab-size
  • text-align
  • text-align-last
  • text-decoration-color
  • text-indent
  • text-justify
  • text-shadow
  • text-transform
  • visibility
  • white-space
  • widows
  • word-break
  • word-spacing

これからもらった素敵なSitepointの記事CSSの継承について。

プロパティの継承を強制する

デフォルトで継承されないプロパティがあり、それを子に継承したい場合はどうなりますか?

子では、プロパティ値を特別なキーワードに設定しますinherit

例:

body {
	background-color: yellow;
}

p { background-color: inherit; }

プロパティを継承しないように強制する

逆に、プロパティが継承されている可能性があり、それを避けたい場合があります。

あなたは使用することができますrevertそれを元に戻すためのキーワード。この場合、値はブラウザがデフォルトのスタイルシートで指定した元の値に戻されます。

実際には、これが使用されることはめったになく、ほとんどの場合、プロパティに別の値を設定して、その継承された値を上書きします。

その他の特別な値

に加えてinheritそしてrevert今見た特別なキーワード。任意のプロパティを次のように設定することもできます。

  • initial:可能な場合は、デフォルトのブラウザスタイルシートを使用します。そうでない場合、およびプロパティがデフォルトで継承する場合は、値を継承します。それ以外の場合は何もしません。
  • unset:プロパティがデフォルトで継承する場合は、継承します。それ以外の場合は何もしません。

私の無料ダウンロードCSSハンドブック


その他のCSSチュートリアル: