Página inicial  

trans_770 trans_160

Unidad 17. Estilos CSS Avanzado (IV)


Pseudo-clases y Pseudo-elementos CSS

 

Por último, y para terminar con los selectores veremos las pseudo-clases, elementos que añadiremos a los selectores para evidenciar algún estado.

Y los pseudo-elementos, que aplicaremos sobre los selectores en dos casos muy sencillos.

 

Primero veremos 4 tipos diferentes de pseudo-clases, que hasta ahora sólo pueden aplicarse sin ningún problema sobre la etiqueta A (que utilizamos para crear vínculos). Son: :link, :visited, :hover y :active.

Incluyendo estas pseudo-clases en nuestros estilos CSS podremos modificar el modo en el que se visualizarán los enlaces.

Veamos el siguiente ejemplo:

a:link { color: red; }

a:visited { color: blue; }

a:hover { color: green; }

a:active { color: yellow; }

Esto hará que los enlaces se muesten de color rojo (red) en nuestra página. Es el estado link.

Cuando ya hayan sido visitados por el usuario se quedarán de color azul (blue). Es el estado visited. Este estado se renovará dependiendo del navegador utilizado y se mostrará durante un tiempo determinado (una sesión, etc...).

En el momento en que coloques el ratón sobre él se mostrará de color verde (green). Es el estado hover.

Y finalmente en el momento que se haga clic sobre él, y mientras se mantenga pulsado el botón se verá de color amarillo (yellow). Es el estado active.

Prueba este enlace

 

Puedes aplicar estas pseudo-clases de cualquier forma de las anteriores.

a.menu:hover { text-decoration: none; }

Esta línea hará que los elementos A de la clase menu no muestren subrayado (ni ningún tipo de decoración) cuando se coloque el ratón sobre él.

 

Puedes utilizarlas todas a la vez o descartar los estados que no quieras tratar. Pero recuerda, deberán estar declaradas en el estilo CSS en este orden para que funcionen correctamente. Si los cambias de orden es posible que no te funcionen.

 

Luego tenemos dos pseudo-elementos que actuarán sobre el texto del documento, son: :first-letter y :first-line (primera letra y primera línea respectivamente).

p:first-letter { font-size: 26px; }

p:first-line { font-variant: small-caps; }

Puedes ver un ejemplo de cómo actuarían estos pseudo-elementos en la siguiente línea:

Esto es una Prueba, la primera línea esta en versales y la primera letra tiene un tamaño de 26px.

 

Para practicar los pseudo-elementos y clases realiza el Ejercicio Paso a Paso de Pseudo-elementos y clases.

 


  Ir a la página anterior Índice del curso  Ir a la siguiente página  

Pág. 17.4

Aviso legal: este curso es gratuito siempre que se visualice desde la página web de aulaClic. No está permitido descargar el curso y utilizarlo en academias o centros de enseñanza privados sin estar conectado a Internet.
© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier medio.
Agosto - 2006.