CSS Control hyperlinks

First, Pseudo-class

A state of a CSS control element---Hypocrites class (used to add special effects to certain selectors)
Syntax for the hypocrites class: element tag hypocrites class Name {attribute: property value;}

Second, hyperlinks
A:link: Non-visited links
A:hover: Move the mouse over the link
A:active: mouse button down link
A:visited: Visited links
If you return to the page after a click and then have some effect, add the status to the link in that order L V H A

<style type= "Text/css" > A:link{text-decoration: None; Color: #000;} a:visited{text-decoration: None; color : #6F0 ; } a:hover  {text-decoration : underline ; color : #00F ; } a:active  {text-decoration : overline ; color : #F00 ; } a.web:visited  { Text-decoration : None ; color : #000 ; } 
 </style> | <a href= "http://www.baidu.com" > Graphic design </a>  | <a href= "http://www.baidu.com" > website front </a>  | <a href= "http://www.baidu.com" > Animation design </a>  | <a href= "http:// Www.baidu.com "> Software development </a>  | <a href=" http://www.baidu.com "> Web marketing </a> <a href=" http:// Www.baidu.com "> I will flash </a> </div> </body>         

A pseudo-class application:

A, four pseudo-class full use (search engine, news portal, fiction website)

B, General website only (a{} a:hover{})

IE6 does not support pseudo-classes of any label other than A;

IE6 above browsers support hover pseudo-class of all tags;

Three: focus{property: Property Value} Sets the style of the object when it becomes the input focus (IE6/7 not supported)

<style type= "Text/css" >    input{        width: 200px;        Height: 25px;        Border: 2px solid #FF0} input:focus{background: #9FF}</style>

Iv. Practice

1. Add a border to the link

<style type= "Text/css" >a{    font-size: 36px;} A:link{    color: #009; text-decoration: None; Border-bottom: 2px solid #F00; Line-height: 150%;/*line-height: To separate points from the underscore */}</style>             

2. Add a marker to the hyperlink with a background image (for hyperlink a plus a background image)

<style type= "Text/css" >    a:link{        color: #f00;        Padding-left: 13px;        Background: URL (fasfas.gif) no-repeat left center; text-decoration: None} a:visited{color : #900; padding-left: 13px; background: URL (das.gif) no-repeat left center; Text-decoration: None} <!--change visited to hover to achieve the effect of mouse floating--></style>     

7. Create a button and flip

<style type= "Text/css" >    {        Display: Block;        Width: 140px;        Padding: 3px; height: 30ox line-height:30px; Background-color: #94b8e9; Border: 1px solid black; Color: #000; Text-decoration: None; Text-align: Center{background-color: #369; color: #fff}</style>             

8. Pure CSS ToolTip

<style type= "Text/css" >a.tooltip{Position: Relative; }a.tooltip span  {display : none ; } A.tooltip:hover  {font-size : 100% ;/* Fixes bug in Ie5.x/win */}a.tooltip:hover span  {DISPL Ay : block ; position : absolute ; top : 1em ; left : 2em ; padding : 0.2em 0.6em ; border : 1px solid #996633 ; Background-color : #FFFF66 ; color : # 000 ; }</style> (this website rocks) </span></a>  was a web developer based in Brighton England. </p></bod Y>                

CSS Control hyperlinks