CSSリンク

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

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

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

<!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://www.php.cn">php</a>
</body>
</html>

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

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

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

QQ截图20161208104329.png

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

QQ截图20161208104336.png

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

QQ截图20161208104343.png

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

QQ截图20161208104348.png

ここで注意する必要があるのはこれら 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 属性に追加し、パスポインターを空に変更する必要があります。変更後の結果は次のようになります。

学び続ける

新しいファイル

<!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://www.php.cn">php</a> </body> </html>

提出するリセットコード

自動運転