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

In this article Xiaobian for you to introduce in detail "how to specify the style of a tag in CSS", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to specify the style of a tag in CSS" can help you solve your doubts.

Introduction to the style of a tag in CSS

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:

Four pseudo classes that define link styles

View sourceprint?

1: link 2: visited 3: hover 4: 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:

View sourceprint?

1 a:link to define the style of the normal link, 2 a:visited to define the style of the visited link, 3 a:hover to define the style when the mouse hovers over the link, and 4 a:active to define the style when the mouse clicks on the link.

Example:

View sourceprint?

01 a:link {02 color:#FF0000; 03 text-decoration:underline; 04} 05 06 a:visited {07 color:#00FF00; 08 text-decoration:none; 09} 10 11 a:hover {12 color:#000000; 13 text-decoration:none; 14} 15 16 a:active {17 color:#FFFFFF 18 text-decoration:none; 19}

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:

View sourceprint?

1 a:link, a:visited {2 color:#FF0000; 3 text-decoration:underline; 4} 5 6 a:hover, a:active {7 color:#000000; 8 text-decoration:none; 9}

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).

Foreigners summed up a memorable "love-hate principle" (LoVe/HAte), that is, the initials of four pseudo-categories: LVHA. Define the correct order of A link styles: a:link, a:visited, a:hover, a:active.

Why can't we change the order of definitions? Just take the test.

Suppose we want to implement the following style:

When the mouse is moved in, it does not turn yellow. Instead, when the link has been accessed, the mouse moves in to turn yellow:

View sourceprint?

1 a:visited {color:red;} 2 a:hover {color:yellow;} 3 a:link {color:blue;} 4 a:active {color:green;}

This is because an unvisited link over a mouse has both properties of an a:link Linklink and an a:link hover. In the above CSS style, the link is closest to him, satisfying the a:link first and abandoning the repetitive definition of a:hover.

After using the LVHA sequential declaration, it first checks that the a:hover conforms to the standard and changes color first.

So, in order to comply with the "proximity principle" followed by the browser to interpret CSS. In the definition of CSS, it is appropriate to put the most general conditions on the top, and in turn to put the most special conditions at the bottom.

The W3C specification also specifies the order in which links are declared:

In the definition of CSS, a:hover must be placed after a:link and a:visited to be valid.

In the definition of CSS, a:active must be placed after a:hover to be valid.

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.

View sourceprint?

1 # sidebar a:link, # sidebar a:visiteid {2 color:#FF0000; 3 text-decoration:none; 4} 5 6 # sidebar a:hover, # sidebar a:active {7 color:#000000; 8 text-decoration:underline; 9}

HTML call:

View sourceprint?1

Link to aa page

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.

View sourceprint?

01 a.redlink a:link, a.redlink a:visiteid {02 color:#FF0000; 03 text-decoration:none; 04} 05 06 a.redlink a:hover, a.redlink a:active {07 color:#000000; 08 text-decoration:underline; 09 background:#FFFFFF 10} read here, this article "how to specify the style of a tag in CSS" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself. If you want to know more about related articles, 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.