Programacion y Diseño Web

Hemos migrado nuestro sitio web espera y en seguida te llevaremos al Nuevo Sitio!

SCRIPT BC

Si no te direcciona en 5 seg da clic aquí

viernes, 19 de julio de 2013

Pseudo-clases CSS3 - Lección 13

Pseudo-clases

hover:

Las pseudo-clases se utilizan para añadir efectos especiales a algunos selectores. Este se activa cuando el cursor del mouse pasa sobre el elemento con la pseudo-clase "hover". 
Tenga presente que los dispositivos móviles pueden tener un trato diferente con respecto a esta propiedad.
<!DOCTYPE html>
<html>
      <head>
           <style>
           a:hover{
                 background-color:yellow;
                 }
           </style>
      </head>
      <body>
           <a href="http://programandolanet.blogspot.mx/">Programando la Net</a>
           <a href="http://psicowiki.blogspot.mx/">Portal de Psicología</a>
      </body>
</html>

focus:

Esta pseudo-clase se activa cuando un elemento de tipo "input" está a punto de recibir información.
<!DOCTYPE html>
      <html>
      <head>
           <style>
           input:focus{
                 background-color:yellow;
                 }
           </style>
      </head>
      <body>
           <form>
                 Nombre: <input type="text" name="nombre" /><br>
                 Apellido: <input type="text" name="apellido" />
           </form>
      </body>
</html>

active:

Los estilos se aplicaran a el elemento de un formulario que se encuentre activo, es decir al que se esté ocupando.
<!DOCTYPE html>
<html>
      <head>
           <style>
                 a:active{
                       background-color:yellow;
                 }
      </style>
      </head>
      <body>
           <a href="http://programandolanet.blogspot.mx/">Programando la Net</a>
           <a href="http://psicowiki.blogspot.mx/">Portal de Psicología</a>
      </body>
</html>

No hay comentarios:

Publicar un comentario

Con la tecnología de Blogger.