CSSの2つの特別な値は、カスケードの継承と初期メソッドを制御するために使用されます。

カスケードを制御するために CSS の任意のプロパティに割り当てることができる特別な値が 2 つあります。inherit と initial です。これら 2 つの特殊な値を見てみましょう。

継承キーワードの使用

場合によっては、カスケード値の代わりに継承を使用したいことがあります。このとき、inherit キーワードを使用できます。これを使用して別の値をオーバーライドし、要素が親要素の値を継承するようにすることができます。

Web ページに薄い灰色のフッターを追加したいとします。フッターにはいくつかのリンクがありますが、フッターは Web ページの焦点では​​ないため、リンクを目立たせすぎないようにします。そのため、フッター内のリンクを濃い灰色に変更する必要があります (下の図を参照)。

「利用規約」リンクは灰色のテキスト色を継承します

通常、Web ページ上のすべてのリンクにフォントの色を追加します (追加しない場合は、ユーザー エージェント スタイルが使用されます)。この色は、フッターの「利用規約」リンクにも使用されます。フッター内のリンクをグレーにするには、色の値を上書きする必要があります。次のコードをスタイルシートに追加します。

a:link{ /* (次の3行) グローバルWebリンクの色*/ 
  色: 青; 
} 
... 
.フッター{ 
  color: #666; /* フッターのテキストをグレーに設定します*/ 
  背景色: #ccc; 
  パディング: 15px 0; 
  テキスト配置: 中央; 
  フォントサイズ: 14px; 
} 
.フッターa{ 
  color: inherit; /* フッターからテキストの色を継承します */ 
  テキスト装飾: 下線; 
}

3 番目のルール セットは、青いリンクの色をオーバーライドし、フッター リンクのカスケード値を継承するように設定します。したがって、親要素の色を継承します。

要約する

これで、カスケード制御に使用される CSS の 2 つの特殊値、inherit と initial に関するこの記事は終了です。カスケード制御に使用される CSS の特殊値の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。