CSS超连接 - 公会驻地

css部分

/* css连接
a : link - 正常，未访问过的连接
a : visited - 用户已访问过的连接
a : hover - 当用户鼠标放在连接上时
a : active - 连接点击的那一刻
*/

/* 文本修饰
text-decoration 属性主要用于删除连接中的下划线
*/

a:link {
    color:#960;
    text-decoration:none;
    background-color:#03F;
    color:#FFF;
}

a:visited {
    color:#C63;
    text-decoration:none;
    background-color:#9FC;
}

a:hover {
    color:#FF0;
    text-decoration:underline;
    background-color:#060;
    font-size:150%; /*只有在这里才能看出来*/
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

a:active {
    color:#090;
    text-decoration:underline;
    background-color:#FFF;
}

heml部分

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css练习</title>
<link rel="stylesheet" type="text/css" href="css练习.css">
</head>
<body>

<p><b><a href="../../../Pictures/Snip20160603_5.png" target="_blank">这是一个连接</a></b></p>
<p><b>注意：</b>a:hover必须在a:link和a:visited只用，要严格按顺序才能看到效果</p>
<p><b>注意：</b>a:active必须在a:hover之后。</p>

</body>
</html>

宽容他人，放过自己。

目录