There is a lot of knowledge in CSS, and it is impossible for us to remember it all. In my spare time, I compiled some common knowledge about CSS page layout. This article will share with you the common knowledge about CSS hyperlink styles. Friends in need can refer to it, I hope it can help you.
When designing web pages, we can control the style of links through pseudo-classes, guide users to browse web pages, and add rich interactive elements.
1. Attributes of links
The label of a hyperlink is . Hyperlinks on web pages are generally used to link text or pictures. . Hyperlinks have 4 pseudo-classes, which represent different states of the link.
a: link (the style before the hyperlink is visited)
a: visited (the style after the link address is visited)
a: hover (the mouse is hovering style)
a: active (style between mouse click and release)
2. Link setting order and inheritance
Setting order
The settings of the four pseudo-classes need to be in a fixed order, otherwise you will not get the desired effect. The order is: a: link, a: visited, a: hover, a: active.
Inheritance
We know that text modification is not inheritable. Once the text is defined for an element Style, the style cannot be canceled in its child elements. But when using pseudo-classes to define hyperlinks, using text modification, sub-elements can override the original link style.
3. An example
<html>
<head>
<style type="text/css">
a:link{color:red;}
a:visited{color:green;}
a:hover{color:yellow;}
a:active{color:orange;}
</style>
</head>
<body>
<a href="https://www.baidu.com"> 超链接 </a>
</body>
</html>The above is the detailed content of Summary of common knowledge about CSS page layout (hyperlink style). For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
