HTML/CSS/CSS Attributes and Javascript Style Properties/a.class
Содержание
- 1 style links: link, visited, hover, focus, active
- 2 Use a:active to select a hyperlink when it receives focus in IE.
- 3 Use a:focus to select a hyperlink when it receives focus in other browsers.
- 4 Use a:hover to select a hyperlink when the mouse hovers over it.
- 5 Use a:link to select a hyperlink when it has not been visited.
- 6 Use a:visited to select a hyperlink when it has been visited
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>