| |
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
Ya lo vimos en capítulos anteriores,
pero lo repetimos aquí. 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.
Cómo utilizar las clases al aplicar
estilo a los enlaces
También vimos en anteriores capítulos
que el uso de clases puede ser muy útil a
la hora de definir estilos especiales que podemos
aplicar a las etiquetas que queramos. A la hora
de trabajar con los enlaces también podemos
aplicar las clases para definir distintos tipos
de enlaces, que tienen distintos tipos de estilos.
| A.clase1:visited
{color:#ff0000;}
A.clase1:active {color:#ff0000;}
A.clase1:link {color:#ff0000}
A.clase1:hover {color:#00ff00}
|
|
|
La ventaja al utilizar las clases con los estilos
de los enlaces es que podemos especificar un formato
distinto al enlace dependiendo de su estado: visitado
o no, activo o con el ratón sobre él.
Por si no quedó claro, al especificar el
estilo con el atributo style del enlace sólo
podíamos decir que el enlace lo queremos
en amarillo, y siempre lo tendremos en amarillo
(sea visitado o no, activo, o estemos o no con el
ratón encima). Con las clases definimos un
nuevo tipo de enlace al que podemos dar distintos
formatos dependiendo su estado.
Otras ventajas de utilizar las clases consisten
en que escribimos una única vez los estilos
y que podemos cambiar el color de todos los enlaces
de la clase con cambiar la delaración.
A partir de lo que acabamos de aprender podemos
crear un ejemplo de barra de navegación dinámica
utilizando CSS. El código sería el
siguiente.
<html>
<head>
<title>Ejemplo CSS para enlaces</title>
<style type="text/css">
A:link {color:#0000cc;}
A:visited {color:#0000cc;}
A:active {color:#0000cc;}
A:hover {color:#0000ff;}
A.clase1:visited {color:#ffff00;}
A.clase1:active {color:#ffff00;}
A.clase1:link {color:#ffff00}
A.clase1:hover {color:#00ff00}
A.clase2:visited {font-size:12;color:#ffffff;}
A.clase2:active {font-size:12;color:#ffffff;}
A.clase2:link {font-size:12;color:#ffffff;}
A.clase2:hover {font-size:12;color:#ffff33;}
body {font-family:arial;font-size:11;font-weight:bold}
td {font-family:arial;font-size:11;font-weight:bold}
</style>
</head>
<body>
<a href="#">Este enlace
es normal</a>
<br>
<br>
<br>
<span style="font-weight:normal;font-size:10">
Los enlaces de esta barra son especiales,
<br>
están definidos por clases
</span>
<br>
<table width="110" cellspacing="1"
cellpadding="2" border="0">
<tr>
<td bgcolor="#aa0000"><a
href="#" class="clase2">Opciones
1</a></td>
</tr>
<tr>
<td bgcolor="red"><a
href="#" class="clase1">Enlace
clase1</a></td>
</tr>
<tr>
<td bgcolor="red"><a
href="#" class="clase1">Otro
de clase1</a></td>
</tr>
<tr>
<td bgcolor="red"><a
href="#" class="clase1">Más
enlaces</a></td>
</tr>
<tr>
<td bgcolor="red"><a
href="#" class="clase1">Todavía
más</a></td>
</tr>
</table>
</body>
</html>
|
|
|
