CSS a link style effect design

 CSS a link style effect design can provide the effect of the link ( a href ) in the webpage when it is used, such as moving the mouse to a link to make the link produce a different color, or marking the link that netizens have already seen as different Colors, these can all be handled by the a link style design function provided by CSS, so that the originally unchanging links have more changes. The CSS a link style design concept is like this. First, you must set the action of the link. For example, when the mouse is moved up, clicked, clicked, or already seen, after these items are designed, different display styles can be given to various actions, such as different colors, fonts, thickness... Wait, these effects are presented in the example, let’s first take a look at how to set the link action, the syntax is as follows.

Set CSS a link action judgment

a:link {
　//Set the link style that has not been browsed
}
a:visited {
　//Set the style of the link that has been browsed
}
a:hover {
　//Set the style of the mouse on the link
}
a:active {
　/ /Set the link style being clicked
}

CSS a link style action judgment allows web designers to use the above four different action judgments, which cover almost all the actions that may occur in the link. As for the style, the commonly used settings include color ( color ) and font ( font- family ), size ( font-size ), text-decoration ... etc. We now apply it to the example to see the effect.

CSS a link style effect design example

<style type="text/css">
a:link{
//Set the link that has not been viewed
text-decoration:none;
background-color:#ffffff;
}
a:visited {
//Set the
color of the link that has been viewed :#ffffff;
background-color:red;
}
a:hover {
//Set the link
text-decoration:underline;
background-color:#fafafa;
color:gray;
}
a:active {
//Set up Click on the link
text-decoration:none;
background-color:gray;
color:#fafafa;
}
</style>
<a href="http://www.wibibi.com">Wibibi Web Design Teaching Encyclopedia</a >

Presentation of the example

Wibibi Web Design Teaching Encyclopedia

In the example, we apply different style effects to the various actions of the CSS a link. The links that have not been browsed have a white background color, and there will be no bottom line. The links that have been browsed have a red background color, and the text is white. The mouse over the link will turn into a light gray background and dark gray text. Clicking will turn into a dark gray background and light gray text. This is a simple CSS a link style design example. You can also adjust it by modifying various properties For different effects, you can refer to these attributes.

• CSS color text color
• CSS text-decoration
• CSS background-color background color