ホームページ > 記事 > ウェブフロントエンド > ハイパーリンクのフォントの色と、HTML をクリックした後のフォントの色を設定します。

ハイパーリンクのフォントの色と、HTML をクリックした後のフォントの色を設定します。

不言オリジナル: 2018-06-12 11:39:522791ブラウズ

この記事では、HTML でのハイパーリンクのフォントの色とクリック後のフォントの色を設定する方法について説明します。必要な場合は、それを参照してください。

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 style、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; 
}

呼び出しメソッド:

8bd8f5f601bef3de2be1c11f4668a4f02b387b2570d983e5ce65d671b003394fスクリプトホームへのリンク509b5d7f9c66f661ad105b7188fb834a
クラスの定義方法は、#sidebar を .sidebar に変更するだけです。これは、より直接的ですが、呼び出すのが面倒です。それぞれの特定のリンクと定義されたコードを与えます。
例:

　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; 
}

呼び出しメソッド:

e388a4556c0f65e1904146cc1a846beeabacc1b54f317844137ec285f20b3901スクリプトハウス1へのリンク509b5d7f9c66f661ad105b7188fb834a
リンクの定義には主にcolor（カラー）、text-decoration（テキスト装飾）、background（背景）の3つの属性があります

以上がこの記事の全内容です。皆様の学習にお役立てください。その他の関連コンテンツについては、PHP 中国語 Web サイトにご注目ください。

ハイパーリンクのフォントの色と、HTML をクリックした後のフォントの色を設定します。

関連記事