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 へのリンクを追加し、すべての主要ブラウザと互換性を持たせる方法

推薦する

ウェブサイトのコンテンツの100~1%はナビゲーションである

ウェブサイトでは、コンテンツの(100-1)%がナビゲーションです1. ジェシー・ジェームズ・ギャレ...

MySQL 5.7.19 インストールディレクトリに my.ini ファイルを作成する方法

前回の記事では、MySQL 5.7.19 無償インストール版 (64 ビット) の設定方法についての...

マウス追従ゲームを実現するjs

この記事では、マウス追従ゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内...

CSS はモバイル互換性の問題を解決するために 0.5px の線を実装します (推奨)

【コンテンツ】: 1.背景画像のグラデーションスタイルを使用する2. スケールを使ってズームできる...

MySQL データベースの Binlog 使用法の概要 (必読)

MySQL データベースにとって binlog バイナリ ログがどれほど重要であるかについては詳し...

Vueタイマーの実装方法

この記事では、参考までにタイマーを実装するためのVueの具体的なコードを紹介します。具体的な内容は次...

一般的なMysql DDL操作の概要

図書館管理ライブラリを作成する データベースを作成します [存在しない場合] ライブラリ名;ライブラ...

JavaScript が Jingdong のカルーセル効果を模倣

この記事では、JD.comのカルーセル効果の表示を実現するためのJavaScriptの具体的なコード...

よく知られているブラウザのDOCTYPEモード選択メカニズム

ドキュメントの範囲この記事では、Firefox やその他の Gecko ベースのブラウザ、Safar...

Node.js コンソールで強調表示されたコードを印刷する方法

序文コードを実行してエラーが発生すると、エラーが出力されます。エラーにはスタック情報が含まれており、...

MySQL データベースの手動およびスケジュールされたバックアップ手順

目次手動バックアップタイマーバックアップ手動バックアップ1) cmd コンソール: mysqldum...

jsはクリックしてカードを切り替える機能を実現します

この記事の例では、クリックしてカードを切り替える機能を実現するためのjsの具体的なコードを共有してい...

MySQL 8.0.21 無料インストール版 設定方法 グラフィックチュートリアル

MySQLをインストールする6つの手順(インストールパッケージのみがインストール場所を選択できます)...

マークアップ言語 - タイトル

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

あまり一般的ではないが便利な CSS 属性操作の完全ガイド

1. カスタムテキスト選択 ::選択{ 背景: 赤; 色: 黒; } 2. ビデオコントロールからダ...