Set the font color of hyperlinks and the font color after clicking through HTML

This article mainly introduces about setting the font color of hyperlinks and the font color after clicking in HTML. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

CSS for some Special effects prepare specific tools, which we call "pseudo-classes". There are several of them that we often use. Below we will introduce in detail the four pseudo-classes that are often used to define link styles.

Definition of link styles
CSS has prepared specific tools for some special effects. , we call it "pseudo-class". There are several of them that we often use. Below we will introduce in detail the four pseudo-classes that are often used to define link styles. They are:
:link
:visited
:hover
:active
Because we want to define the link style, the anchor tag in the hyperlink - a is essential. The method of writing the anchor tag and pseudo-class link is the basic method of defining the link style. Their The writing method is as follows:
a:link, defines the style of normal links;
a:visited, defines the style of visited links;
a:hover, defines the style when the mouse is hovering over the link;
a:active, defines the style when the mouse clicks on the link.
Example:

a:link { 
color:#FF0000; 
text-decoration:underline; 
} 
a:visited { 
color:#00FF00; 
text-decoration:none; 
} 
a:hover { 
color:#000000; 
text-decoration:none; 
} 
a:active { 
color:#FFFFFF; 
text-decoration:none; 
}

The link color defined in the above example is red, the visited link is green, the link is black when the mouse is hovering over it, and the link is white when clicked.
If the normal link has the same style as the visited link, and the style when the mouse is hovering and clicking is the same, they can also be combined to define:

a:link, 
a:visited { 
color:#FF0000; 
text-decoration:underline; 
} 
a:hover, 
a:active { 
color:#000000; 
text-decoration:none; 
}

The order of link definition
There is no rule without rules. , although the link definition has been written, it also has rules. If the writing order of these four items is slightly wrong, the effect of the link may be lost, so be sure to confirm the order of definition every time you define a link style, link-- visited--hover-active, which is what we often call the LoVe HAte principle (the capital letters are their first letters).
Define local link style
Writing a definition like a:link{} in CSS will change the link style of the entire page, but some local links need to be specialized. This problem is not difficult to solve, as long as the link Just add the specified id or class in front of the style definition.
Example:

#sidebar a:link, 
#sidebar a:visited { 
color:#FF0000; 
text-decoration:none; 
} 
#sidebar a:hover, 
#sidebar a:active { 
color:#000000; 
text-decoration:underline; 
}

Calling method:

The definition method of class is the same as id. Just change #sidebar to .sidebar. Another method is to directly define the link style, which is more Direct, but it is more troublesome to call, as you need to add defined code to each specific link.
Example:

　a.redlink a:link, 
a.redlink a:visited { 
color:#FF0000; 
text-decoration:none; 
} 
a.redlink a:hover, 
a.redlink a:active { 
color:#000000; 
text-decoration:underline; 
background:#FFFFFF; 
}

Calling method:

Link to Script House 1

The definition of the link mainly has three attributes, color (color), text decoration (text-decoration) and background (background)

above That’s the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

CSS Introduction to the use of Border attribute solid

#css Explanation of background:transparent

The role of meta in the html page and the analysis of the cache and non-caching settings of the page

The above is the detailed content of Set the font color of hyperlinks and the font color after clicking through HTML. For more information, please follow other related articles on the PHP Chinese website!