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

巴扎黑
リリース: 2017-06-03 13:53:57
オリジナル
8119 人が閲覧しました

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; 
}
ログイン後にコピー

The orderリンク定義

ルールはありません リンク定義は書いてありますが、この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; 
}
ログイン後にコピー

メソッドの呼び出し:


クラスの定義方法は、#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; 
}
ログイン後にコピー

メソッドの呼び出し:

スクリプト ホーム 1 へのリンク

リンクの定義には主に色、テキスト装飾、背景の 3 つの属性があります

以上がHTML はハイパーリンクのフォントの色とクリック後のフォントの色を設定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート