CSS は、「疑似クラス」と呼ばれる、いくつかの特殊効果用の特定のツールを準備します。よく使用するものがいくつかあります。以下では、リンク スタイルを定義するためによく使用される 4 つの疑似クラスを詳しく紹介します。
リンク スタイルの定義
CSS は、「疑似クラス」と呼ばれる、いくつかの特殊効果のための特定のツールを提供します。よく使うものがいくつかありますので、リンクスタイルの定義によく使われる 4 つの疑似クラスを詳しく紹介します。
:link
:visited
:hover
:active
であるためです。リンクスタイルを定義するため、重要なのはハイパーリンク内のアンカータグです。アンカータグと疑似クラスリンクの記述方法は、リンクスタイルを定義する基本的な方法です。
a:リンク、定義は通常です。
a:visited、訪問したリンクのスタイルを定義します。
a:hover、マウスがリンク上に移動したときのスタイルを定義します。マウスがリンクをクリックします。
例:
コードは次のとおりです:
a:link { color:#FF0000; text-decoration:underline; } a:visited { color:#00FF00; text-decoration:none; } a:hover { color:#000000; text-decoration:none; } a:active { color:#FFFFFF; text-decoration:none; }
通常のリンクが訪問先リンクと同じスタイルで、マウスがホバーしてクリックされているときのスタイルも同じである場合、それらをマージして定義することもできます:
a:link, a:visited { color:#FF0000; text-decoration:underline; } a:hover, a:active { color:#000000; text-decoration:none; }
ルールはありません リンク定義は書いてありますが、この4つの項目の書き方の順番を少し間違えるとリンクの効果がなくなる可能性がありますので必ず確認してください。リンク スタイルを定義するたびに、link--visited- -hover-active という定義順序が適用されます。これは、私たちがよく LoVe HAte 原則と呼ぶものです (大文字は最初の文字です)。
ローカル リンク スタイルを定義する
CSS で a:link{} のような定義を記述すると、ページ全体のリンク スタイルが変更されますが、一部のローカル リンクは特殊化する必要があります。リンク スタイル定義の前に、指定した ID またはクラスを追加するだけです。
例:
#sidebar a:link, #sidebar a:visited { color:#FF0000; text-decoration:none; } #sidebar a:hover, #sidebar a:active { color:#000000; text-decoration:underline; }
a.redlink a:link, a.redlink a:visited { color:#FF0000; text-decoration:none; } a.redlink a:hover, a.redlink a:active { color:#000000; text-decoration:underline; background:#FFFFFF; }
以上がHTML はハイパーリンクのフォントの色とクリック後のフォントの色を設定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。