Precautions for using CSS to control hyperlink styles

In webpage design, CSS is often used to control hyperlink styles. However, we must pay attention to the order of tags. Otherwise, the expected results may fail.

When I made a webpage, I arranged the labels in the following order:

A: link {font-size: 18px; color: # 0000ff; text-Decoration: underline}

A: hover {font-size: 18px; color: # 0000ff; text-Decoration: none; font-style: italic}

A: visited {font-size: 18px; color: # 0000ff; text-Decoration: None}

The first time you open it in a browser, everything is normal. If you do not move the mouse up, it is blue, and the mouse is green italic. When you click the link to the destination address and then return to the page, the link turns red (same as in visited
When the mouse is placed again, the text is still in the visited style, but the hover style is invalid. The author was puzzled. After repeated tests, it was found that the problem lies in the order of three lines of labels.
Visited is placed in front of hover, and everything is normal.

Similarly, the active and link locations also affect the final effect.

Through repeated experiments, I have summarized an experience: as long as the visited is in the front, the hover is in the back, the active is in the middle of the two, and the link location is arbitrary, the four styles can not affect each other, and the display is normal.

Hyperlink skills

By default, the mouse is an arrow up to the top left. The download page is in the shape of an hourglass, And the mouse is a hand shape when moving to the hyperlink, in many Windows Applications Program The way the Mouse looks is ever-changing, fresh and interesting, and we have done the same on our webpage. Let's take a look at an example:
Currently, many websites have a "help" link, which aims to allow viewers to better browse the website. When we allow viewers to move their mouse over the help link, the mouse pointer is changed to the shape of a question mark on the top left arrow of help. below is Code :
<A style = "cursor: Help" href?help.htm> help </a>
The structure is as follows: <target style = "attribute1: value1; attribute2: value2 ;... ">
The attribute here is cursor (cursor), and the attribute value is help. The cursor has many shapes with different attribute values: When the attribute value is text, the mouse turns into an "I" shape;
When the property value is move, it is a cross with a square arrow; when the property value is hand, it is a hand shape; the property value is crosshair to indicate a cross shape; the property value is e-resize table
Show the right arrow; if the property value is Ne-resize, it indicates the arrow to the top right; if the property value is NW-resize, it indicates the arrow to the top left; if the property value is n-resize, it indicates the upward arrow;
The property value is Se-resize, which indicates the arrow to the lower right; the property value is wait, which indicates the hourglass.
The default web page Link method is the same (the unaccessed link is a blue text with a blue underline, And the accessed hyperlink is changed to a deep purple text with a deep purple underline, and may not match your background color. The following describes some common CSS applications of Hyperlink labels. The Code is as follows:
In the <Style type = "text/CSS">
<! --
A: link {text-Decoration: none; color: Blue}
A: visited {color: red; text-Decoration: Line-through}
A: active {color: White; text-Decoration: underline}
A: hover {text-Decoration: none; color: yellow; Background-color: Black}
-->
</Style>
It is an embedded webpage style form, which is generally stored in the A: link {text-Decoration: none; color: Blue} indicates that the hyperlink has not been accessed. It has no underline and the color is blue.
A: visited {color: red; text-Decoration: Line-through} indicates that after a hyperlink is accessed, its color turns red and has a strikethrough line.
A: active {color: White; text-Decoration: underline} indicates that when a hyperlink is active, the color of the hyperlink becomes white and underlined.
A: hover {text-Decoration: none; color: # ff0000; Background-color: Black} indicates that after the mouse is moved to the hyperlink, it has no underline and the text color turns yellow, the background color is black.
By taking the above measures, you can control your links as you like. Does your home page have your own style?

 

 

Reprinted from: http://hi.baidu.com/h007ming/blog/item/c37568b7a70683fe30add1c3.html