HTML/CSS/Style Basics/Pseudo Class

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

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>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Style_Basics/Pseudo_Class&oldid=5959»