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... 

        hipervículo      enlace      link

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... 

          Firefox    Explorer    Opera

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... 

            botón uno    botón dos    botón tres

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... 



        Imágenes         Videos         Música 


        <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... 
     
        

       
       Nociones de redes:
      nociones
      paquetes
      LAN
      ejemplos

       Protocolo TCP/IP:	
	 
 
        TCP/IP
        IP
        DNS
   
        La Red Interent:
	
 
        definición
        servicios
        
        Hipervínculo
        vínculos CSS
 		U.R.L.
     
    LaWeb:	
     

        página-Web
        elementos
        
     
    Contenidos:	
     
        buscadores
        empleo
        video
       
       
 

 
 
 	


	












	



































	












  

    
  

  
  

   
  






 eduardo@aulapc.es Granada (España)