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!