HTML/CSS/Style Basics/Pseudo Class — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Версия 09:21, 26 мая 2010
Содержание
Dynamic pseudo-classes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> Albert Einstein </title>
<style type="text/css" media="all">
li a {
padding: 2px;
color: black;
font-size: 15pt;
text-decoration: none;
}
li a:link {
background-color: white;
color: black;
}
li a:visited {
background-color: black;
color: white;
}
li a:active {
background-color: lightgray;
color: black;
}
li a:hover, li a:focus {
background-color: gray;
color: white;
}
ul {
list-style: none;
}
li {
border: 1px solid black;
padding: 5px;
margin: 2px;
float: left;
}
</style>
</head>
<body>
<ul>
<li><a href="http://www.google.ru">Google</a></li>
<li><a href="http://p2p.wrox.ru">Wrox P2P</a></li>
<li><a href="http://www.mozilla.org">Mozilla</a></li>
<li><a href="http://pear.php.net">PEAR</a></li>
</ul>
</body>
</html>
Dynamic Pseudo-Class Selectors
<!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-Class Selectors</title>
<style rel="stylesheet" type="text/css">
a:link {
color: steelblue;
}
a:visited {
color: darkorchid;
}
a:hover {
color: orange;
}
a:active {
color: crimson;
}
</style>
</head>
<body>
<a href="">Wrox</a>
<a href="">Wrox P2P</a>
<a href="">Google</a>
<a href="">Amazon</a>
</ul>
</body>
</html>
first-letter and :first-line Pseudo-Elements
<!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>Pseudo-Element Selectors</title>
<style rel="stylesheet" type="text/css">
p.quote:first-letter {
background: darkblue;
color: white;
font: 55px "Monotype Corsiva";
float: left;
margin-right: 5px;
}
p.quote:first-line {
font-weight: bold;
letter-spacing: 3px;
}
p.byline {
text-align: right;
font-style: italic;
font-size: 10px;
border: none;
}
</style>
</head>
<body>
<p class="quote">
This is a test. This is a test.
</p>
<p class="byline">
- Albert Einstein
</p>
</body>
</html>
Structural pseudo-classes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> Albert Einstein </title>
<style type="text/css" media="all">
div h1:first-child {
padding: 0;
border-bottom: 1px dashed black;
letter-spacing: 2px;
}
div h1:last-child {
padding: 10px;
letter-spacing: -3px;
}
</style>
</head>
<body>
<div></div>
<div>
<h1>Famous Quotes</h1>
<h1 id="top"><a href="#quoteimage">Albert Einstein</a></h1>
</div>
</body>
</html>
:target pseudo-class
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> Albert Einstein </title>
<style type="text/css" media="all">
div#quoteimage:target {
background-color: black;
border: 1px solid white;
}
h1#top:target {
background-color: black;
border: 1px solid white;
color: white;
}
h1 a {
color: inherit;
text-decoration: none;
}
div#quoteimage {
margin: 10px;
text-align: center;
}
img#albert {
width: 305px;
height: 240px;
border: 5px solid black;
margin: 10px;
}
</style>
</head>
<body>
<div></div>
<div>
<h1>Famous Quotes</h1>
<h1 id="top"><a href="#quoteimage">Albert Einstein</a></h1>
</div>
<div></div>
<ul>
<li><a href="http://www.google.ru">Google</a></li>
<li><a href="http://p2p.wrox.ru">Wrox P2P</a></li>
<li><a href="http://www.mozilla.org">Mozilla</a></li>
<li><a href="http://pear.php.net">PEAR</a></li>
</ul>
<div>
<p>
This is a test. This is a test.
</p>
</div>
<div></div>
<div id="quoteimage">
<a href="#top"><img src="http://www.wbex.ru/style/logo.png" id="albert" /></a>
</div>
</body>
</html>
The first-child Structural Pseudo-Class
<!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>:first-child</title>
<style rel="stylesheet" type="text/css">
table tbody tr:first-child td {
background: mediumslateblue;
}
</style>
</head>
<body>
<h1>A</h1>
<table>
<thead>
<tr>
<th>A</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr>
<td>L</td>
<td>M</td>
</tr>
</tbody>
</table>
</body>
</html>