Use CSS to define link styles

Document directory

• Link definition order
• Define a local link Style

Define link Style CSS provides specific tools for some special effects, which are called "pseudo classes ". The following describes the four pseudo classes that are often used to define link styles. They are: : Link : Visited : Hover : Active Because we need to define the link style, it is essential to write the anchor tag -- a, anchor tag and pseudo-class link in the hyperlink, which is the basic method for defining the link style, they are written as follows: A: link: defines the style of a normal link; A: visited: defines the style of the accessed link; A: hover, which defines the style when the mouse is suspended on the Link; A: active. It defines the style when the mouse clicks the link.   Example:   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 preceding example is red, the accessed link is green, the link is black when the mouse is suspended on the link, and the color when the mouse is clicked is white. If the style of the normal link is the same as that of the accessed link, and the style of the mouse is the same as that of the clicked link, you can combine them to define them:   A: link,   A: visited { Color: # FF0000; Text-decoration: underline; } A: hover, A: active { Color: #000000; Text-decoration: none; }     Link definition order There are no rules and no rules. Although the link definition is well written, there are also rules. If the writing order of the four items is slightly incorrect, the effect of the link may be gone, therefore, you must confirm the definition of The Link style each time.Be sure to pay attention to the Order, link -- visited -- hover-activeThat is, the LoVe HAte principle we often talk about (uppercase letters are their first letters ).     Define a local link Style 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, you only need to add the specified id or class before the link style definition.   Example:   # Sidebar a: link,   # Sidebar a: visiteid { Color: # FF0000; Text-decoration: none; } # Sidebar a: hover, # Sidebar a: active { Color: #000000; Text-decoration: underline; }   Call method:   <DivId = "sidebar"> <A href = "http://www.abang.com" target = "_ blank"> link to Alibaba Cloud <a> </div>   The class definition method and id are the same, as long as you change # sidebar. sidebar is enough. Another method is to directly define the link style, which is more direct, but it is troublesome to call. You need to add the defined code to each specific link. Example:   A. redlink a: link,   A. redlink a: visiteid { Color: # FF0000; Text-decoration: none; } A. redlink a: hover, A. redlink a: active { Color: #000000; Text-decoration: underline; Background: # FFFFFF; }   Call method:   <Div> <a href = "http://www.abang.com" target = "_ blank"Class = "redlink"> Link to Alibaba Cloud 1 <a> </div>   The link definition mainly includes three attributes: color, text-decoration, and background, you can refer to the original article: