CSS: set the hyperlink font color and the font color after clicking

created at 07-02-2021 views: 5

CSS has prepared specific tools for some special effects, which we call "pseudo-classes". Several of these items are frequently used. Below we will introduce in detail the four pseudo-classes that are often used to define link styles.

CSS has prepared specific tools for some special effects, which we call "pseudo-classes". There are several items 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: defines the style of normal links;
  • :visited: defines the style of the visited link;
  • :hover: defines the style when the mouse is hovering over the link;
  • :active: defines the style when the mouse clicks on the link.

Because we want to define the link style, one of the indispensable is the anchor tag in the hyperlink-a. The method of linking anchor tags and pseudo-classes is the basic method of defining the link style. They are written as follows:

a:link
a:visited
a:hover
a:active

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 example above is red, the link after visiting is green, the color when hovering over the link is black, and the color when clicking is white.
If the normal link and the visited link have the same style, the mouse hover and click style are the same, you can also combine them to define:

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

Although the link definition is written, it is also ruled. If the writing order of these four items is slightly wrong, the effect of the link may be gone, so be sure to confirm the order of definition every time you define the link style , Link--visited--hover-active, which is the so called LoVe HAte principle.

Writing a definition such as a:link{} in CSS will change the link style of the entire page, but some partial links need to be specialized. This problem is not difficult to solve. Just add the specified id or in front of the link style definition. Class is fine.

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

Calling method:

<div id="sidebar"><a href="https:xxx" target="_blank">target<a></div>

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. You need to add a definition to each specific link. 

Code:

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;
}

usage:

<div><a href="https://xxx" target="_blank" class="redlink">target<a></div>

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

Please log in to leave a comment.