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:

QQ截图20161208104329.png

This is the color of the link when the mouse is moved:

QQ截图20161208104336.png

This is the color of the link being clicked:

QQ截图20161208104343.png

This is the color after being clicked:

QQ截图20161208104348.png

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:

QQ截图20161208104515.png

Continuing Learning

new 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>

submit Reset Code

Automatic operation

CSS link

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]