Read "Mastering CSS"-The fifth chapter applies styles to Links

I. Sorting the link selector based on cascading:

L:link v:visited h:hover f:focus A a:active

Anchor chain Connector selector: L, V. Applies only to anchor points.

Dynamic selector: H, F, A. compatibility issues are considered.

The order of selectors is important due to the CSS cascade, when two selectors have the same particularity, after the definition will cover the previous.

Two. Create a link underline with the style applied:

1. Simple: bold, underlined, custom underline style (becomes dashed)

2. Fancy: Add a background image.

Three. Use the property selector to apply a style to an external link:

: The target pseudo-class sets the style for the destination element. IE9 and above in modern browser support.

To... Start: [Attr^=val] For example: a[href^= "http:"], to be linked to the external link to mark, but also the user's prompt

To... End: [Attr$=val] For example: a[href$= ". Doc"], marking the document to be downloaded, reminding the user to click to download the file

Four. Make the link behave like a button:

Display:block;

1. Simple flip: By changing the background color or border color, font color, etc.

2. Image rollover: By changing the background image-------There is a problem: there is a short delay when the browser first loads the mouse hover image, which causes a flicker effect.

3. Pixy style rollover: Solve the above problem, use a single image (benefit: Reduce the number of server requests).

A new image will still be requested from the server under IE, which will cause a slight flicker. To avoid flickering, you can apply it to the parent element, and the other way to avoid flashing is to include the code in the IE dedicated CSS file:

HTML {filter:expression (Document.execcommand ("Backgroundimagecache", False,true));}

4. CSS Wizard: A single image containing many icons, buttons, or graphics that are not used. -----Benefits: Reduce server requests made by your Web browser, significantly speeding up download times, and centralizing all buttons, pictures, and graphics in one place can improve maintainability.

5. Flip with CSS3: Two new properties gradient and Box-reflect

Five. Create an visited link style: Note the style after the link is accessed, which avoids unnecessary "backtracking" actions.

Six. Create a tool tip for pure CSS: You can use the title attribute or write your own display:block/none

Read "Mastering CSS"-The fifth chapter applies styles to Links