HTML/CSS/CSS Attributes and Javascript Style Properties/a.class — различия между версиями

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

Текущая версия на 11:16, 26 мая 2010

style links: link, visited, hover, focus, active

   <source lang="html4strict">

<?xml version"1.0" encoding="UTF-8"?> <!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 { 
         color: red; 
         text-decoration: none 
     }
     a:visited { 
         color: green; 
         text-decoration: none;
     }
     a:hover {
         color: blue; 
         text-decoration: underlined;
     }
     a:active {
         color: black; 
         text-decoration: none;
     }
     a:focus {
         color: yellow; 
         text-decoration: underlined;
     }
   </style>
   <title>Using CSS with Anchors</title>
 </head>
 <body>

<a href="mailto:w@m.ru">Send Feedback</a> 

 </body>

</html> 

</source>


Use a:active to select a hyperlink when it receives focus in IE.

   <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:active{ 

 color: green;
 background-color: #bbb;

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

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

</body> </html> 

</source>


Use a:focus to select a hyperlink when it receives focus in other browsers.

   <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:active{ 

 color: green;
 background-color: #bbb;

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

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

</body> </html> 

</source>


Use a:hover to select a hyperlink when the mouse hovers over it.

   <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:hover { 

 color: white;
 background-color: #aaa;

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

<a href="http://www.wbex.ru">a:hover -- mouse hovering</a>

</body> </html> 

</source>


Use a:link to select a hyperlink when it has not been 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 { 

 color: black;
 background-color: white;

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

<a href="http://www.wbex.ru">a:link -- unvisited link</a>

</body> </html> 

</source>


Use a:visited to select a hyperlink when it has been 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:visited { 

 color: gray;
 background-color: white;

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

<a href="http://www.wbex.ru">a:visited -- visited link</a>

</body> </html> 

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