CSSリンク
1 CSS リンクの 4 つの狀態(tài):
a:link -- 通常の未訪問のリンク a:visited -- ユーザーが訪問したリンク a:hover -- マウス ポインタがリンクの上にある a:active -- link その瞬間
これらの対応する動作の色屬性を設(shè)定しましょう: 前のプロセスと同様に、最初にindex.htmlを作成し、次にtest.cssファイルを作成してhtmlにリンクします。 以下は HTML ファイルの內(nèi)容です:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>css test</title> <script src="app.js"></script> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body > <a href="http://ipnx.cn">php</a> </body> </html>
以下は CSS ファイルの內(nèi)容です:
a:link {color:#FF0000;} /* 未被訪問的鏈接 */
a:visited {color:#00FF00;} /* 已被訪問的鏈接 */
a:hover {color:#FF00FF;} /* 鼠標指針移動到鏈接上 */
a:active {color:#0000FF;} /* 正在被點擊的鏈接 */まず効果を見てみましょう: これはまだアクセスされていない色です:
マウスがリンク上に移動したときの色です:
これはクリックされた色です:
これはクリックされた後の色です:
ここで注意する必要があるのはこれら 4 つの屬性設(shè)定に従う順序です: a:hover は必須です a:link と a:visited の後に配置され、a:active は a:hover の後に配置されなければなりません
1.2 CSS リンクの背景色の設(shè)定
これ対応する屬性の背景色を変更するだけで簡単です。 実験を始める場合は、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 屬性に追加し、パス ポインターを空に変更する必要があります。変更後の結(jié)果は次のようになります。
