CSSリンク

1 CSS リンクの 4 つの状態:

a:link -- 通常の未訪問のリンク a:visited -- ユーザーが訪問したリンク a:hover -- マウス ポインタがリンクの上にある a:active -- link その瞬間

これらの対応する動作の色属性を設定しましょう: 前のプロセスと同様に、最初にindex.htmlを作成し、次にtest.cssファイルを作成してhtmlにリンクします。 以下は HTML ファイルの内容です:

       
  php  

以下は CSS ファイルの内容です:

a:link {color:#FF0000;} /* 未被访问的链接 */ a:visited {color:#00FF00;} /* 已被访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */ a:active {color:#0000FF;} /* 正在被点击的链接 */

まず効果を見てみましょう: これはまだアクセスされていない色です:

マウスがリンク上に移動したときの色です:

これはクリックされた色です:

これはクリックされた後の色です:

ここで注意する必要があるのはこれら 4 つの属性設定に従う順序です: a:hover は必須です a:link と a:visited の後に配置され、a:active は a:hover の後に配置されなければなりません

1.2 CSS リンクの背景色の設定

これ対応する属性の背景色を変更するだけで簡単です。 実験を始める場合は、CSS ファイルを置き換えるか追加するだけです:

a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;}

実験してもいいですが、ここでは 1 つずつスクリーンショットを撮りません

1.3 リンクの下線を変更します

常に下線が必要なわけではありません場合によってはリンクの外観に影響を与えることがあります。したがって、ここでは text-decoration 属性を link 属性に追加し、パス ポインターを空に変更する必要があります。変更後の結果は次のようになります。