HTML/CSS/Style Basics/Pseudo Class
Содержание
Dynamic pseudo-classes
<source lang="html4strict">
<!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>
- <a href="http://www.google.ru">Google</a>
- <a href="http://p2p.wrox.ru">Wrox P2P</a>
- <a href="http://www.mozilla.org">Mozilla</a>
- <a href="http://pear.php.net">PEAR</a>
</body>
</html>
</source>
Dynamic Pseudo-Class Selectors
<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" 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>
</source>
first-letter and :first-line Pseudo-Elements
<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" 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>
This is a test. This is a test.
</body>
</html>
</source>
Structural pseudo-classes
<source lang="html4strict">
<!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>
Famous Quotes
<a href="#quoteimage">Albert Einstein</a>
</body>
</html>
</source>
:target pseudo-class
<source lang="html4strict">
<!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>
Famous Quotes
<a href="#quoteimage">Albert Einstein</a>
- <a href="http://www.google.ru">Google</a>
- <a href="http://p2p.wrox.ru">Wrox P2P</a>
- <a href="http://www.mozilla.org">Mozilla</a>
- <a href="http://pear.php.net">PEAR</a>
This is a test. This is a test.
<a href="#top"><img src="http://www.wbex.ru/style/logo.png" id="albert" /></a>
</body>
</html>
</source>
The first-child Structural Pseudo-Class
<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" 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>
A
A | Y |
---|---|
L | M |
</body>
</html>
</source>