HTML sets hyperlink font color and font color after click-HTML Tutorial-php.cn

HTML sets hyperlink font color and font color after click

巴扎黑

Release： 2017-06-03 13:53:57

Original

8172 people have browsed it

CSS prepares specific tools for some special effects, 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. Defining link styles
CSS prepares specific tools for some special effects, 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. They are:
:link
:visited
:hover
:active
Because we need 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:
The code is as follows:

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 color when clicked is white .
If the normal link and the visited link have the same style, and the mouse hover and click styles are the same, they can also be merged and defined:

The code is as follows:

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 definitions
There are no rules without rules. Although the link definition is written, it also has rules. If the order of writing these four items is slightly wrong, the effect of the link may be lost, so define it every time When linking styles, be sure to confirm the order of definition, 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:

The code is as follows:

#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. There is a way to directly define the link style, which is more direct, but it is more troublesome to call, and you need to add definition code to each specific link.
Example:
The code is as follows:

　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 a link mainly has three attributes, color (color), text-decoration (text-decoration) and background ( background)

The above is the detailed content of HTML sets hyperlink font color and font color after click. For more information, please follow other related articles on the PHP Chinese website!