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 el ejemplo de barra de navegación dinámica utilizando CSS que habíamos visto al principio del capítulo. 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>
Usuarios que han visto este tema también han visto...
- Centrado Dinámico de Columnas mediante CSS
- Estilo de la primera letra con CSS
- CSS para campos textarea de formulario
- Degradado con CSS Filter
- Puertas deslizantes con CSS
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2008 Factoría de Internet S.L.. Todos los derechos reservados.