Shulou(Shulou.com)05/31 Report--

This article mainly introduces how to define the hyperlink style in CSS related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will have something to gain after reading this CSS article on how to define the hyperlink style, let's take a look at it.

CSS has specific tools for special effects, which we call "pseudo-classes". There are a few of them that we often use. Let's take a detailed look at the four pseudo-classes that are often used to define link styles. They are:

: link

: visited

: hover

: active

Because we want to define the link style, the essential thing is the anchor tag in the hyperlink-- a, the method of writing anchor tag and pseudo-class link is the basic method of defining the link style, which is written as follows:

A:link, which defines the style of normal links

A:visited, which defines the style that has been accessed

A:hover, which defines the style when the mouse hovers over the link

A:active, which 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

}

The link color defined in the above example is red, the link is green after visit, the mouse is black when hovering over the link, and the color when clicked is white. The link color defined in the above example is red, and the visited link is green.

The mouse is black when hovering over the link and the color is white when clicked.

The link color defined in the above example is red, the link is green after visit, the mouse is black when hovering over the link, and the color when clicked is white. The link color defined in the above example is red, the link is green after visit, the mouse is black when hovering over the link, and the color when clicked is white. If the normal link and the visited link have the same style, the mouse hover and click have the same style, you can also combine them to define them:

The code is as follows:

A:link,a:visited

{

Color:#FF0000

Text-decoration:underline

}

A:hover, a:active

{

Color:#000000

Text-decoration:none

}

Order of link definition

There are no rules, although the definition of the link has been written, but it also has rules, if the writing order of these four items is slightly wrong, the effect of the link may be gone, so every time you define the link style, be sure to confirm the order of the definition, link--visited--hover-active, that is, we often talk about the LoVe HAte principle (capital letters are their initials).

Define local link styl

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, which is not difficult to solve, as long as the specified id or class is added before the link style definition.

Example:

The code is as follows:

# sidebar a:link

# sidebar a:visiteid

{

Color:#FF0000

Text-decoration:none

}

# sidebar a:hover

# sidebar a:active

{

Color:#000000

Text-decoration:underline

}

Call method:

Link to (ID will only work if you put it into Div)

The definition method of class is the same as id, as long as you change # sidebar to .sidebar. Another way is to define the style of the link directly, which is more direct, but it is more troublesome to call, and you need to add the defined code to each specific link.

The code is as follows:

Example:

A.redlink:link

A.redlink:visiteid

{

Color:#FF0000

Text-decoration:none

}

A.redlink:hover

A.redlink:active

{

Color:#000000

Text-decoration:underline

Background:#FFFFFF

}

Call method:

Link to

This is the end of the article on "how to define hyperlink styles in CSS". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to define hyperlink styles in CSS". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.