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

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 をよろしくお願いいたします。

<<:  MySQL の文字セットの不一致によって発生する異常な接続テーブルの解決方法

>>:  HTML に FLASH へのリンクを追加し、すべての主要ブラウザと互換性を持たせる方法

推薦する

CSS 手法を使用してモジュール性を実現する例

1. CSS 方法論とは何ですか? CSS methodologiesデザイン パターンまたは CS...

MySQL クイックデータ比較テクニック

MySQL の運用と保守において、R&D の同僚が 2 つの異なるインスタンスのデータを比較...

Docker を使用して MySQL 5.7 および 8.0 マスター スレーブ クラスターをデプロイする方法

> MySQL 5.7 クラスタ マスターとスレーブをデプロイする (テストのみ)イメージバー...

Linux7で仮想ホストを実装する3つの方法

1. 同じIPアドレス、異なるポート番号仮想ホスト 1: ホスト IP アドレスは 172.16.3...

Tomcat が応答データグラムを書き戻すタイミングの詳細な分析

疑問が生じるこの質問は、ファイルのダウンロードを記述しているときに発生しました。HttpServle...

Vueはフォーム検証機能を実装します

この記事では主に、NUXT の validate メソッドに基づいてフォーム検証を実装する方法につい...

ubuntu20.04 LTS システムのデフォルト ソース ソース リスト ファイルの変更

誤って source.list の内容を変更し、一連のエラーが発生した場合は、デフォルトのソース フ...

フレックスレイアウトにおけるflex-growとflex-shrinkの計算方法の詳しい説明

CSS のFlex(彈性布局)すると、Web ページのレイアウトを柔軟に制御できます。Flex Fl...

Docker が MySQL イメージをプルするのが遅すぎる問題を解決する

Docker を使用して MySQL イメージをプルしようとして 30 分経っても失敗したため、代わ...

スプライトとフォントアイコンを実装するためのCSS

スプライト:以前は、各画像リソースは独立した画像でした。ブラウザが Web サイト内のさまざまな W...

Windows 10 Home Edition に Docker をインストールする方法

最近、プロジェクトをアップグレードするために Docker を使用しました。これまで使用したことがな...

JavaScript クリップボードの使用法の詳細な説明

(1)はじめに: clipboard.js は、テキストをクリップボードにコピーする機能を実装する軽...

SWFObjectを使用すると、HTMLにFlashを挿入する際のブラウザ互換性の問題を完全に解決できます。

一緒に学びましょう1. 伝統的な方法コードをコピーコードは次のとおりです。 <object c...

Windows 10 + mysql 8.0.11 zipインストールチュートリアルの詳細

準備する: MySQL 8.0 Windows zip パッケージのダウンロード アドレス: htt...

JSONP クロスドメインシミュレーション Baidu 検索

目次1. JSONPとは何か2. JSONPクロスドメインリクエスト3. Baidu検索をシミュレー...