HTML/CSS/Basic Tags/Anchor class

Материал из Web эксперт
Перейти к: навигация, поиск

a:active

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

   <head>
       <title>Dynamic Pseudo-Classes</title>
       <style rel="stylesheet" type="text/css">

ul { 

   list-style: none;
   margin: 0;
   padding: 0;

} a:active { 

   color: crimson;

} 

       </style>
   </head>
   <body>

   </body>

</html> 

</source>


Add border to anchor when hover

   <source lang="html4strict">


<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> 

   body
   {
     margin: 0;
     padding: 0;
     color: #000;
     width: 600px;
     border-right: 1px solid black;
   }
   #frame
   {
     margin: 0;
   }
   #header
   {
     background-color: #666;
     border-bottom: 1px solid #333;
   }
   #header h1 {
     margin: 0;
     padding: .5em;
     color: white;
   }
   #columnLeft {
     float: left;
     width: 160px;
     margin-left: 10px;
     padding-top: 1em;
   }
   #columnLeft p {
     margin-top: 0;
   }
   #columnRight
   {
     padding-top: 1em;
     margin: 0 2em 0 200px;
   }
   #columnRight h2 {
     margin-top: 0;
   }
   #footer
   {
     clear: both;
     background-color: #ccc;
     padding-bottom: 1em;
     border-top: 1px solid #333;
     padding-left: 200px;
   }
  1. navsite h5 {
 display: none;

}

  1. navsite {
font-size: 0.7em;
font-weight: bold;
width: 125px;
border-right: 1px solid #666;
padding: 0 0 0 0;
margin-bottom: 1em;

}

  1. navsite ul {
list-style: none;
margin: 0;
padding: 0;

}

  1. navsite ul li {
margin: 0;

}

  1. navsite ul li a:link {
display: block;
padding: 2px 2px 2px 0.5em;
border-left: 10px solid #369;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background-color: #036;
color: #fff;
text-decoration: none;
width: 100%;

} html>body #navsite ul li a { 

width: auto;

}

  1. navsite ul li a:hover {
border-left: 10px solid #036;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background-color: #69f;
color: #fff;

} </style> </head> <body>

Text

<img src="wbex.gif" width="100%" height="200">

<a href="http://www.wbex.ru">Heading</a>

Text <a href="http://www.wbex.ru">Link</a>

Text.

</body> </html> 

</source>


a:hover

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

   <head>
       <title>Dynamic Pseudo-Classes</title>
       <style rel="stylesheet" type="text/css">

ul { 

   list-style: none;
   margin: 0;
   padding: 0;

} a:hover { 

   text-decoration: underline;

} 

       </style>
   </head>
   <body>

   </body>

</html> 

</source>


a[href^="http://"]:hover

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> 

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Chapter 3 Example: :before and :after Pseudo-elements</title>
 <style type="text/css" media="screen">
   body {
     padding:.5em;
   }
   a[href^="http://"]:hover { 
       content:" [" attr(href) "]";
       font-size:90%;
       font-style:italic;
       color:red; }
 </style>

</head> <body>

Please visit <a href="">my site</a> .

</body> </html> 

</source>


a:link

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

   <head>
       <title>Dynamic Pseudo-Classes</title>
       <style rel="stylesheet" type="text/css">

ul { 

   list-style: none;
   margin: 0;
   padding: 0;

} a:link { 

   color: mediumblue;

} 

       </style>
   </head>
   <body>

   </body>

</html> 

</source>


a:visited

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

   <head>
       <title>Dynamic Pseudo-Classes</title>
       <style rel="stylesheet" type="text/css">

ul { 

   list-style: none;
   margin: 0;
   padding: 0;

} a:visited { 

   color: magenta;

} 

       </style>
   </head>
   <body>

   </body>

</html> 

</source>


background image, repeat and position for anchor link active

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> a:link:active { 

display: block;
width: 125px;
height: 30px;
background-image: url(btn_on.gif);
background-repeat: no-repeat;
background-position: top left;

} </style> </head> <body> 

 <a href="/" id="linkhome">
  Homepage
 </a

</body> </html> 

</source>


background image, repeat and position for anchor link hover

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> a:link:hover { 

display: block;
width: 125px;
height: 30px;
background-image: url(btn_roll.gif);
background-repeat: no-repeat;
background-position: top left;

} </style> </head> <body> 

 <a href="/" id="linkhome">
  Homepage
 </a

</body> </html> 

</source>


Link visited hover

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 

   <head>
       <style type="text/css">
           a:link {
               background: blue;
               color: white;
           }
           a:visited {
               background: crimson;   
               color: pink;
           }
           a:hover {
               background: black;
               color: white;
           }
       </style>
   </head>
   <body>
       <a href="http://www.g.ru">G</a> | 
       <a href="http://www.w.ru">W</a> | 
       <a href="http://www.p.net">P</a> | 
       <a href="http://www.q.org">Q</a>
   </body>

</html> 

</source>


link visited, hover, active

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 

   <head>
       <style type="text/css">
           a:link {
               background: blue;
               color: white;
           }
           a:visited {
               background: crimson;   
               color: pink;
           }
           a:hover {
               background: black;
               color: white;
           }
           a:active {
               background: red;
               color: white;
           }
       </style>
   </head>
   <body>
       <a href="http://www.g.ru">G</a> | 
       <a href="http://www.w.ru">W</a> | 
       <a href="http://www.p.net">P</a> | 
       <a href="http://www.q.org">Q</a>
   </body>

</html> 

</source>


link visited, hover, active, focus

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 

   <head>
       <style type="text/css">
           a:link {
               background: blue;
               color: white;
           }
           a:visited {
               background: crimson;   
               color: pink;
           }
           a:hover {
               background: black;
               color: white;
           }
           a:active {
               background: red;
               color: white;
           }
           a:focus {
               background: gray;
               color: white;
           }
       </style>
   </head>
   <body>
       <a href="http://www.g.ru">G</a> | 
       <a href="http://www.w.ru">W</a> | 
       <a href="http://www.p.net">P</a> | 
       <a href="http://www.q.org">Q</a>
   </body>

</html> 

</source>


Pseudo-class Selectors for anchor

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> a { 

 padding: 3px 10px;
 margin: 20px 10px;
 text-decoration: none;
 display: block;
 width: 260px;
 border-left: 1px solid #ccc;
 border-right: 2px solid black;
 border-top: 1px solid #ccc;
 border-bottom: 2px solid black;

} a:link { 

 color: black;
 background-color: white;

} a:visited { 

 color: gray;
 background-color: white;

} a:hover { 

 color: white;
 background-color: #aaa;

} a:active,a:focus { 

 color: green;
 background-color: #bbb;

} </style> </head> <body>

<a href="http://www.wbex.ru">a:link -- unvisited link</a> <a href="http://www.wbex.ru">a:visited -- visited link</a> <a href="http://www.wbex.ru">a:hover -- mouse hovering</a> <a href="http://www.wbex.ru">a:active -- visiting a link</a>

</body> </html> 

</source>


Rollover with image

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-stirct.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Pixy Rollover</title> <style type="text/css"> body { 

 font-size: 1.4em;

} a:link, a:visited { 

 display: block;
 width: 200px;
 height: 40px;
 line-height: 40px;
 color: #000;
 text-decoration: none;
 background: #94B8E9 url(images/button.gif) no-repeat left top;
 text-indent: 50px;

} a:hover { 

background: #369 url(images/button-over.gif) no-repeat left top;
color: #fff;

} </style> </head> <body>

<a href="#">Button</a>

</body> </html> 

</source>


Set anchor hover in
  • under
      which are in a 

    •    <source lang="html4strict">

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css">

    1. navsite ul li a:hover {
    border-left: 10px solid #036;
border-right: 1px solid #69c;
border-bottom: 1px solid #369; 
background-color: #69f; 
color: #fff;

    } </style> </head> <body>

    </body> </html> 

    </source>


    Set anchor link and visited: a:link, a:visited

       <source lang="html4strict">

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> 

     <title></title>

    <style type="text/css"> a:link, a:visited { 

    text-decoration: none;

    } </style> </head> <body>

    • <a href=" ">V</a>
    • <a href=" ">S</a>
    • <a href=" ">T</a>
    • <a href=" ">P</a>

    </body> </html> 

    </source>


    Set color for anchor link, anchor visited, hover and active

       <source lang="html4strict">

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> body { 

    color: #99ffff;

    } a:link { 

    color: #33ccff;

    } a:visited { 

    color: #cecece;

    } a:hover { 

    color: #336666;

    } a:active { 

    color: #339999;

    } </style> </head> <body>

    • <a href=" ">V</a>
    • <a href=" ">S</a>
    • <a href=" ">T</a>
    • <a href=" ">P</a>

    </body> </html> 

    </source>


    Set cursor for a link

       <source lang="html4strict">

    <html xmlns="http://www.w3.org/1999/xhtml"> 

     <head>
 
   <title></title>
   <style type="text/css">
   
   body {
       margin: 15%;
   }
   
   a:link {
       cursor: wait;  
   }
   
   
   </style>
 
 
 </head>
 <body>

    Heading in DIV

    A <a href="http://www.wbex.ru">A LINK</a>. <a href="http://www.wbex.ru">Another link</a>


     </body>
</html>
          
      </source>


    Set different anchor link style for navigation and content

       <source lang="html4strict">

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> /* navigation link design */

    1. nav a:link {
    color: blue;

    }

    1. nav a:visited {
    color: purple;

    } /* content link design */

    1. content a:link {
    color: white;

    }

    1. content a:visited {
    color: yellow;

    } </style> </head> <body>

    Text<a href=" ">link</a>, between, <a href=" ">link</a> after.

    </body> </html> 

    </source>


    Set different color for anchor link and visited link

       <source lang="html4strict">

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> a:link { 

    font-weight: bold;
text-decoration: none;
color: red;

    } a:visited { 

    font-weight: bold;
text-decoration: line-through;  
color: black;

    } </style> </head> <body>

    • <a href=" ">V</a>
    • <a href=" ">S</a>
    • <a href=" ">T</a>
    • <a href=" ">P</a>

    </body> </html> 

    </source>


    style for email anchor,

       <source lang="html4strict">

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> a { 

    text-decoration: none;
font-weight: bold;

    }

    1. content a.icon:after {
    display: block;
width: 17px;
height: 15px;
margin: 2px;

    }

    1. content a.email:after {
    content: url(email.gif);

    }

    1. content a.search:after {
    content: url(search.gif);

    } </style> </head> <body>

    Text<a href=" ">link</a>, between, <a href=" ">link</a> after.

    </body> </html> 

    </source>


    Three level nesting for an anchor with id

       <source lang="html4strict">

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css">

    1. navsite ul li a#current {
    background: white; 
border-bottom: 1px solid white;

    } </style> </head> <body>

    </body> </html> 

    </source>


    Three level nesting for anchor link style setting

       <source lang="html4strict">

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css">

    1. navsite ul li a:link {
    color: #448;

    } </style> </head> <body>

    </body> </html> 

    </source>


    Three level nesting for visited link style setting

       <source lang="html4strict">

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css">

    1. navsite ul li a:visited {
    color: #667;

    } </style> </head> <body>

    </body> </html> 

    </source>


    Three level nesting for visited link style setting for two

       <source lang="html4strict">

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css">

    1. navsite ul li a:link:hover, #navsite ul li a:visited:hover {
    color: #000;
background: #aae;
border-color: #227;

    } </style> </head> <body>

    </body> </html> 

    </source>


    Use anchor hover to highlight more than one tags

       <source lang="html4strict">

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> .outer {float:left;width:200px} .container { 

     position:relative;
 width:200px;
 border:1px solid #000;
 text-align:center;

    } .test1,.test2 { 

     margin-top:145px;
 width:200px;
 text-align::center;

    } .block1,.block2 { 

     display:block;
 position:absolute;
 width:200px;
 height:15px;
 background:#CCC;

    } .block1 { 

     top:120px;
 left:0px;

    } .block2 { 

     top:5px;
 left:0px;
 width:155px;
 height:102px;

    } .test1 a span.block2 {border:1px solid #fff} .test1 a {border:1px solid #fff;background:#fff} .test1 a:hover {color:red;background:#fffffc} .test1 a:hover span.block1 {background:orange;} .test1 a:hover span.block2 {border:1px solid green;} .test2 a span.block2 {border:1px solid #fff} .test2 a {border:1px solid #fff;background:#fff} .test2 a:hover {color:green;background:#fffffc} .test2 a:hover span.block1 {background:green;} .test2 a:hover span.block2 {border:1px solid blue;}

    </style> </head> <body>

    <a href="#">Some Link Text </a>

    <a href="#">Some Link Text </a>

    <a href="#">Some Link Text </a>

    </body> </html>

    </source>
    Источник — «http://wbex.ru/index.php?title=HTML/CSS/Basic_Tags/Anchor_class&oldid=6003»