How to style hyperlinks with css

In CSS, we can set the style of hyperlinks through pseudo-classes. For example, if we want to set the style of unvisited hyperlinks, the code is like [a:link {color: #FF0000;}], and set the style of visited hyperlinks. Link style, code such as [a:visited {color: #00FF00;}].

The operating environment of this article: windows10 system, css 3, thinkpad t480 computer.

If we want to set the style of a hyperlink, we can do it through css pseudo-classes. The following is a detailed introduction to css pseudo-classes.

Pseudo-classes are used to define special states of elements.

For example, it can be used to:

• Set the style when the mouse is hovering over the element

• is visited Set different styles from unvisited links

• Set the style when the element gets focus

Syntax:

selector:pseudo-class {
  property: value;
}

Code example:

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

Note: a:hover must be after a:link and a:visited in the CSS definition to take effect! a:active must be after a:hover in the CSS definition to take effect! Pseudo class names are not case sensitive.

Related video sharing: css video tutorial

The above is the detailed content of How to style hyperlinks with css. For more information, please follow other related articles on the PHP Chinese website!