Home > Web Front-end > HTML Tutorial > Set the font color of hyperlinks and the font color after clicking through HTML

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

不言
Release: 2018-06-12 11:39:52
Original
2834 people have browsed it

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; 
}
Copy after login

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; 
}
Copy after login

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; 
}
Copy after login

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; 
}
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template