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://miracleart.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:
