Unidad 17. Estilos CSS Avanzados (V)


17.5. 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 habíamos ido comentando alguna vez. Son: :link, :visited, :hover y :active.

Incluyendo estas pseudo-clases en nuestros estilos CSS podremos modificar el modo en el que se visualizarán lo elementos, aunque son más usados en 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 muestren de color rojo (red) en nuestra página. Es el estado link. Por lo tanto, esta propiedad sólo tiene sentido en enlaces.

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...). Esta propiedad sólo tiene sentido en enlaces.

En el momento en que coloques el ratón sobre él se mostrará de color verde (green). Es el estado hover. Podemos aplicarlo a la mayoría de elementos.

Y finalmente en el momento que se haga clic sobre él, y mientras tenga el foco se verá de color amarillo (yellow). Es el estado active. Puede resultarnos útiles en campos de formulario, para destacar el campo que se está editando.

Prueba este enlace

 

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

#menu a:hover { text-decoration: none; } 
a.volver:hover { background-image: url(flecha_atras.png); }
#menu:hover a { text-decoration: underline; }

La primera regla afectará a los enlaces que estén dentro del elemento #menu cuando tengan el cursor encima. La segunda regla, afectará a los enlaces con la clase volver cuando tengan el cursor encima. El orden es muy importante. En el tercer ejemplo, al cambiar el orden, la regla afecta a todos los enlaces a la vez cuando el elemento #menu tenga el cursor encima.

 

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. Agranda y estrecha la ventana para ver qué ocurre:

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

 

• Para practicar los pseudo-elementos y clases realiza el ejercicio paso a pasoUtilizando pseudo-elementos y clases.


Marzo-2015
Pág. 17.5
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.