HTML/CSS/CSS Attributes and Javascript Style Properties/a.class

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

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

 
<?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>
    <p>
      <a href="mailto:w@m.ru">Send Feedback</a>
    </p>
  </body>
</html>



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

 
<!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>

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

</body> 
</html>



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

 
<!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>

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

</body> 
</html>



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

 
<!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>

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

</body> 
</html>



Use a:link to select a hyperlink when it has not been visited.

 

<!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>

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

</body> 
</html>



Use a:visited to select a hyperlink when it has been visited

 
<!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>

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

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