Hipervínculos CSS
DISEÑO DE HIPERVINCULOS CON CSS

Los agentes de usuario (navegadores como Explorer, Firefox, etc.) muestran los hipervínculos con texto resaltado. Por ejemplo, Explorer muestra los vínculos con texto azul y subrayado (por defecto), pero los editores pueden diseñar los enlaces de muchas maneras. Una de las herramientas más utilizada son las llamadas hojas de estilos CSS. Estas pueden insertarse en la cabecera de un un documento HTML mediante la etiqueta <style type="text/css"> como aparece a continuación.

Para el diseño de un tipo de hipervínculos utilizamos clases para definir su estilo. En cada clase definimos el estilo del enlace y los cambios de estilo que debe ocurrir al tocar con el ratón (hover). Las propiedades para las clases serán: color, fuente, tamaño, fondo, borde, etc. Dentro <body> aplicamos las clases con etiqueta <div<. Veamos algunos ejemplos de diseño de vínculos sin destino...

EJEMPLO UNO:

Creamos vinculos con texto de color negro y fondo (caja que contiene el texto) gris. Al tocar con el ratón el texto cambiará a color rojo y el fondo negro...

El código HTML y CSS que define los enlaces anteriores (aparte espacios) es el que ves a continuación. Puedes copiar el texto y pegarlo en el Bloc de notas y guardarlo con extensión ".htm"...

<html> <head> <style type="text/css"> .uno a { text-align:center; font-family: Arial, Helvetica, sans-serif; font-size: 18px; background-color: #CCCCCC; text-decoration: none; color: #000000; } .uno a:hover { font-family: Arial, Helvetica, sans-serif; font-size: 18px; background-color: #000000; text-decoration: none; color: #FF0000; } </style> </head> <body> <div class="uno"> <a href="#">hipervículo </a><a href="#">enlace </a><a href="#">link </a> </div> </body> </html>


EJEMPLO DOS:

Vínculos con texto gris oscuro. Al tocar con el ratón aparece la caja contenedora del texto con borde y texto rojo y fondo rosa...

El código HTML y CSS que define los enlaces anteriores (aparte espacios) es el que ves a continuación. Puedes copiar el texto y pegarlo en el Bloc de notas y guardarlo con extensión ".htm"...

<html> <head> <style type="text/css"> .dos a { font-family: Tahoma, Geneva, sans-serif; font-size: 14px; font-weight: 900; text-decoration: none; color: #666666; border: 1px solid #FFFFFF; } .dos a:hover { font-family: Tahoma, Geneva, sans-serif; font-size: 14px; font-weight: 900; background-color: #FFCCFF; text-decoration: none; color: #FF0000; border: 1px solid #FF0000; } </style> </head> <body> <div class="dos"> <a href="#">Firefox </a><a href="#"> Explorer</a><a href="#"> Opera</a> </div> </body> </html>


EJEMPLO TRES:

Simulamos botones hundidos con texto negro, fondo cian claro y bordes con sombra. Al tocar el texto pasa a blanco, el fondo se satura y cambia la dirección de la sombra de los bordes...

El código HTML y CSS que define los enlaces anteriores (aparte espacios) es el que ves a continuación. Puedes copiar el texto y pegarlo en el Bloc de notas y guardarlo con extensión ".htm"...

<html> <head> <style type="text/css"> .tres a { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 900; background-color: #EAF3FB; text-decoration: none; color: #000000; border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #999999; border-right-color: #E9E9E9; border-bottom-color: #E9E9E9; border-left-color: #999999; } .tres a:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 900; background-color: #00CCFF; text-decoration: none; color: #FFFFFF; border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #E9E9E9; border-right-color: #666666; border-bottom-color: #666666; border-left-color: #E9E9E9; } </style> </head> <body> <div class="tres"> <a href="#"> botón uno </a> <a href="#"> botón dos </a> <a href="#"> botón tres </a> </div> </body> </html>


EJEMPLO CUATRO:

Enormes botones con efectos de sombra...



<html> <head> <style type="text/css"> .cuatro a { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: 900; background-color: #CCCCCC; text-decoration: none; color: #383838; background-image: url(ima/dos.png); background-repeat: repeat-x; background-position: left top; padding: 5px; border-top-width: 14px; border-top-style: ridge; border-top-color: #FFCC00; border-right-color: #A48300; border-bottom-color: #A48300; border-left-color: #FFCC00; border-right-width: 14px; border-bottom-width: 14px; border-left-width: 14px; border-right-style: ridge; border-bottom-style: ridge; border-left-style: ridge; } .cuatro a:hover { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: 900; background-color: #CCCCCC; text-decoration: none; color: #FFFFFF; background-image: url(ima/uno.png); background-repeat: repeat-x; background-position: left top; padding: 5px; border-top-width: 14px; border-top-style: ridge; border-top-color: #A48300; border-right-color: #FFCC00; border-bottom-color: #FFCC00; border-left-color: #A48300; border-right-width: 14px; border-bottom-width: 14px; border-left-width: 14px; border-right-style: ridge; border-bottom-style: ridge; border-left-style: ridge; } </style> </head> <body> <div class="cuatro"> <a href="#"> Imágenes </a><a href="#"> Videos </a><a href="#"> Música </a> </div> </body> </html>


EJEMPLO CINCO:

CSS permite utilizar imagenes como fondo del enlace. Al tocar con el ratón cambiamos la imagen de fondo dotando de efectos de animación a los hipervínculos...


                 A          B          C  


El efecto se consigue con dos imágenes que se intercambian al tocar con el ratón...

<html> <head> <style type="text/css"> .cinco a { font-family: Arial, Helvetica, sans-serif; font-size: 28px; text-decoration: none; color: #000; background-image: url(aquí pones el nombre de tu fichero de imagen...); background-repeat: no-repeat; background-position: center center; padding:32px; } .cinco a:hover { font-family: Arial, Helvetica, sans-serif; font-size: 28px; text-decoration: none; color: #FFF; background-image: url(aquí pones el nombre de tu fichero de imagen...); padding:32px; } </style> </head> <body> <div class="cinco"> <a href="#"> A </a><a href="#"> B </a><a href="#"> C </a> </div> </body> </html>


                        


                          




La red Internet, correo, la Web...
     
         
 







 eduardo@aulapc.es Granada (España)