в 09:20, 26 мая 2010

2010-05-26T09:20:59Z

Admin: 1 версия

2010-05-26T08:16:04Z

1 версия

Новая страница

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

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

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

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

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

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

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

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

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

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

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

← Предыдущая	Версия 09:20, 26 мая 2010
(нет различий)

HTML/CSS/CSS Attributes and Javascript Style Properties/a.class - История изменений

в 09:20, 26 мая 2010

Admin: 1 версия