Home >Web Front-end >CSS Tutorial >Summary of common knowledge about CSS page layout (hyperlink style)

Summary of common knowledge about CSS page layout (hyperlink style)

yuliaOriginal: 2018-09-20 16:09:563144browse

There is a lot of knowledge in CSS, and it is impossible for us to remember it all. In my spare time, I compiled some common knowledge about CSS page layout. This article will share with you the common knowledge about CSS hyperlink styles. Friends in need can refer to it, I hope it can help you.

When designing web pages, we can control the style of links through pseudo-classes, guide users to browse web pages, and add rich interactive elements.

1. Attributes of links

The label of a hyperlink is 3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed. Hyperlinks on web pages are generally used to link text or pictures. . Hyperlinks have 4 pseudo-classes, which represent different states of the link.

a: link (the style before the hyperlink is visited)

a: visited (the style after the link address is visited)

a: hover (the mouse is hovering style)

a: active (style between mouse click and release)

2. Link setting order and inheritance

Setting order

The settings of the four pseudo-classes need to be in a fixed order, otherwise you will not get the desired effect. The order is: a: link, a: visited, a: hover, a: active.

Inheritance

We know that text modification is not inheritable. Once the text is defined for an element Style, the style cannot be canceled in its child elements. But when using pseudo-classes to define hyperlinks, using text modification, sub-elements can override the original link style.

3. An example

<html>
<head>
<style type="text/css">
    a:link{color:red;}
    a:visited{color:green;}
    a:hover{color:yellow;}
    a:active{color:orange;}
</style>
</head>
<body>
    <a href="https://www.baidu.com"> 超链接 </a>
</body>
</html>

The above is the detailed content of Summary of common knowledge about CSS page layout (hyperlink style). For more information, please follow other related articles on the PHP Chinese website!

Statement：

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

Previous article：Summary of common knowledge about CSS page layout (page background)Next article：Summary of common knowledge about CSS page layout (page background)

See more

Summary of common knowledge about CSS page layout (hyperlink style)

Related articles