Pseudoclases

A veces, XHTML da algunas etiquetas a su propio estilo: por ejemplo, los enlaces están por defecto coloreados y subrayados. Estos elementos son pseudoclase. Por ahora, sólo se definen para <a> etiquetas.

Esto define un estilo para una pseudoclase:

Por ejemplo, si nos gustaría ver todos los enlaces sin estrés, definiríamos estos estilos:

Las pseudoclases se puede utilizar junto con las clases, sólo para aplicar este estilo a casos específicos, siguiendo esta notación:

y también se puede utilizar de acuerdo con el contexto.

Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

Special for links are that they can be styled differently depending on what state they are in.

The four links states are:

• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked

When setting the style for several link states, there are some order rules:

• a:hover MUST come after a:link and a:visited
• a:active MUST come after a:hover

Common Link Styles

In the example above the link changes color depending on what state it is in.

Lets go through some of the other common ways to style links:

Text Decoration

The text-decoration property is mostly used to remove underlines from links:

Background Color

The background-color property specifies the background color for links:

Add different styles to hyperlinks

This example demonstrates how to add other styles to hyperlinks.

Advanced - Create link boxes

This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes.

Ejercicio 25

Definir las reglas CSS que permiten mostrar 4 enlaces con los siguientes estilos:

1. En su estado normal, los enlaces se muestran de color rojo #CC0000.
2. Cuando el usuario pasa su ratón sobre el enlace, se muestra con un color de fondo rojo #CC0000 y la letra de color blanco #FFF.
3. Los enlaces visitados se muestran en color gris claro #CCC. con color de fondo verde claro.
4. Ninguno de los enlaces se mostrará subrayado.