Barra de navegación en CSS

Vemos cómo asignar estilos a enlaces de la página de una manera potente, para hacer interesantes barras de navegación.

En este artículo vamos a ver cómo podríamos crear una barra de navegación bastante dinámica utilizando únicamente las Hojas de Estilo en Cascada. En el ejemplo vamos a construir una barra de navegación que contiene enlaces de varios colores que cambian de tonalidad al pasar el ratón por encima.

Cómo poner estilo a los enlaces

Se define el estilo de los enlaces asignando su apariencia en sus distintos estados:

Enlace no visitado. Se define con el atributo link.
Enlace visitado. Se define con el atributo visited.
Enlace activo (cuando se está pulsando). Se define con active.
Enlace con el reton encima. Se define con hover.
Esta definición se realiza en la cabecera de la página, entre las etiquetas <STYLE> Y </STYLE>, y es global a toda la página.

Un ejemplo de esto se puede ver en esta declaración de estilos:

<STYLE type="text/css">
A:link {text-decoration:none;color:#0000cc;}
A:visited {text-decoration:none;color:#ffcc33;}
A:active {text-decoration:none;color:#ff0000;}
A:hover {text-decoration:underline;color:#999999;}
</STYLE>

Cómo dar estilo a un enlace en concreto

Si queremos resaltar nuestra barra de navegación probablemente querramos colocarla en una tabla de nuestra página web, con un color que contraste un poco con el fondo. En un caso como este, será necesario que los enlaces de la barra de navegación y los enlaces normales de la página tengan colores distintos, por estar situados sobre dos tipos de fondos distintos.

Es por esto que los enlaces de la barra van a tener un color distinto de los definidos en la cabecera de la página, con los estilos. Esto lo podemos conseguir de esta manera.

<a href="#" style="color:#ff0000">Mi enlace</a>

Hemos definido el color de un enlace de una manera específica, utilizando el atributo style, de modo que este enlace siempre tendrá el color indicado, independientemente de su estado.

Es un enlace amarillo, que quedaría muy bien resaltado sobre un fondo oscuro, como se puede ver en el ejemplo de barra de navegación siguiente.

En la tabla anterior tenemos enlaces amarillos en una web donde los enlaces son azules por defecto.

Usuarios que han visto este tema también han visto...

- Sintaxis CSS
- CSS para imprimir páginas web
- Hacks CSS
- Estilo en funcion del contexto
- Algunos consejos que te ayudarán en CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento