CSS Link
Different links can have different styles.
Link Style
The style of the link can use any CSS properties (such as color, font, background, etc.).
Special links can have different styles, depending on their status.
The four link states are:
a:link - normal, unvisited link
a:visited - the link that the user has visited
a:hover - when the user mouses over the link
a:active - the moment the link is clicked
Example
a:link {color:#000000;} /* Link not visited*/
a:visited {color:#00FF00;} /* Visited link */
a:hover {color:#FF00FF;} /* Move the mouse to the link */
a:active {color:#0000FF;} /* When the mouse is clicked */When set to several link state styles, there are also some order rules:
a:hover must follow behind a:link and a:visited
a:active must follow behind a:hover
Common Link Styles
According to the example of the color change of the above link, see what state it is in.
Let's go to link styles in some other common ways:
Text Decoration
The text-decoration attribute is mainly used to remove the underline in the link:
Example
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}Background Color
The background color attribute specifies the link background color:
Example
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
More Examples
Adding different styles of hyperlinks
This example demonstrates how to add other styles to hyperlinks.
Advanced - Create A Link Box
This example demonstrates a more advanced example. We combine several CSS properties to display it as a box.