CSS link
1 Four states of CSS links:
a:link -- ordinary, unvisited link a:visited -- link that the user has visited a:hover -- the mouse pointer is above the link a:active - the moment when the link is clicked
Let’s set the color attributes of these corresponding behaviors: Still the same as the previous process, we first create an index.html, and then create A test.css file, linked to the html. The following is the content of the html file:
<!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>
The following is the content of the CSS file:
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */Let’s take a look at the effect first: This is the unvisited color:
This is the color of the link when the mouse is moved:
This is the color of the link being clicked:
This is the color after being clicked:
What we need to pay attention to here is the order in which these four attribute settings should be followed: a:hover must be located in a After :link and a:visited, a:active must be located after a:hover
1.2CSS Set the link background color
This is as simple as modifying the corresponding attribute background-color. If we want to experiment, just replace or add the CSS file just now:
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}You can experiment, I won’t take screenshots one by one here
1.3 Modify the link underline
Not all the time we need the underline under the link, sometimes it affects the appearance. So here we need to add the text-decoration attribute to the link attribute, and change the transfer reference to empty. After modification, the following result will be:
