CSS_html/css_WEB-ITnose のタグ スタイルの「愛憎」原則

CSS は、「疑似クラス」と呼ばれる、いくつかの特殊効果用の特定のツールを準備します。よく使用するものがいくつかあります。以下では、リンク スタイルを定義するためによく使用される 4 つの疑似クラスを詳しく紹介します。 4:active

リンクスタイルを定義する必要があるため、ハイパーリンク内のアンカータグ - a はリンクスタイルを定義する基本的な方法です。次のように記述します:

1 a:link、通常のリンクのスタイルを定義します。

2 a:visited、訪問済みリンクのスタイルを定義します。

3 a:hover、マウスがリンク上にあるときのスタイルを定義します。 ;

4 a:active、マウスがリンクをクリックしたときのスタイルを定義します。

例:

01 a:link {

02 color:#FF0000;

03 text-decoration:underline;

04 }

05 a:visited {

06 color:# 00FF00;

07テキスト装飾:なし;

08 }

09

10 a:hover {

11 color:#000000;

13 }

14

15 a:アクティブ{

16 color:#FFFFFF;

17 text-decoration:none;

18 }

上記の例で定義されているリンクの色は赤色、訪問先のリンクは緑色、マウスがリンク上にある場合、クリックすると黒になります。

通常のリンクと訪問済みリンクのスタイルが同じで、マウスホバーとクリックのスタイルも同じである場合、それらを組み合わせて定義することもできます:

1 a:link, a:visited {

2 color:# FF0000;

3 テキスト装飾: 下線;

5 a:hover, a:active {

6 color:#000000;

8 }

リンクの定義の順序

ルールのないところにルールはない リンクの定義は書かれていますが、この4つの項目の記述順序に少しでも誤りがあると、リンクの影響が大きくなります。失われる可能性があるため、毎回リンクを定義します。スタイルを設定するときは、リンク - 訪問済み - ホバー - アクティブという定義の順序を必ず確認してください。これは、私たちがよく LoVe HAte 原則と呼ぶものです (大文字は最初の文字です) 。

外国人は、覚えやすい「愛憎原理」(LoVe/HAte) をまとめました。これは、4 つの疑似クラス LVHA の頭文字です。 A リンク スタイルの正しい順序を定義します: a:link、a:visited、a:hover、a:active。

定義の順序を変更できないのはなぜですか?テストをしてください。

次のスタイルを実装するとします。

ステータス スタイルの色

訪問済み a:訪問済み 赤

未訪問 a:リンク青

選択済み a:アクティブ 緑

マウスは次の場所に移動します。 hover 黄色

マウスを移動しても黄色になりません。ただし、リンクが訪問されている場合、マウスを移動すると黄色に変わります:

1 a:visited{color:red;}

2 a:hover{ color: yellow;}

3 a:link{ color :blue ;}

4 a:active{ color:green;}

これは、マウスによって渡された未訪問のリンクが a:link 属性と a:hover 属性の両方を持っているためです。上記の CSS スタイルでは、a: リンクは次のようになります。彼に最も近いものは、最初に a:link を満たし、a:hover の繰り返しの定義を放棄します。

LVHA シーケンス宣言を使用した後、最初に a:hover の準拠規格をチェックし、最初に色を変更します。

つまり、ブラウザが CSS を解釈するときに従う「近接原則」に準拠するためです。 CSS を定義するときは、最も一般的な条件を一番上に配置し、下に移動し、最も具体的な条件を一番下に配置する必要があります。

W3C 仕様では、リンクの宣言順序も次のように規定されています。

CSS 定義では、a:hover を有効にするには、a:link および a:visited の後に配置する必要があります。

CSS 定義では、a:active を a:hover の後に配置する必要があります。

ローカル リンク スタイルを定義する

CSS で a:link{} のような定義を記述すると、ページ全体のリンク スタイルが変更されますが、一部のローカル リンクは特殊化する必要があるため、この問題を解決するのは難しくありません。リンクの長さ 指定した ID またはクラスをスタイル定義の前に追加するだけです。

1 #sidebar a:link, #sidebar a:visiteid {

2 color:#FF0000;

3 text-decoration:none

4 }

5 #sidebar a:hover, #sidebar a:active {

6 color:#000000;

7 text-decoration:underline;

HTML 呼び出し:

1

aa ページへのリンク

class の定義方法は id と同じで #sidebar を に変更するだけです。もう 1 つの方法は、リンク スタイルを直接定義することです。これはより直接的ですが、呼び出しがより面倒であり、定義されたコードをそれぞれの特定のリンクに追加する必要があります。 1 a.redlink a:link, a.redlink a:visiteid {

2 color:#FF0000;

3 text-decoration:none

4 }

5 a.redlink a:hover, a. redlink a:active {

6 color:#000000;

8 背景:#FFFFFF;