HTML/CSS/Style Basics/Pseudo Class

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

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

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

<thead> </thead> <tbody> </tbody>
A Y
L M
   </body>

</html>

</source>