Buscador


En todo Internet
En Uterra.Com

¿Problemas sexuales?
Jerez de la Frontera
y Cádiz
Homosexualidad, infidelidad, divorcio, violencia de género, etc.

Contenidos


El formato de los enlaces es un detalle muy importante en nuestra página Web. El hecho de que cambie el color del enlace cuando ya ha sido visitado hará la navegacion mas fluida para el visitante, ya que impedirá que visite sin querer los enlaces que ya ha visto.

Este código presenta la cuatro propiedades mas comunes de los enlaces: el color cuando no se ha vistado, el color cuando ha sido visitado, el color del ultimo enlace visitado, y el color que toma cuando se pone el puntero del ratón sobre él. También podemos controlar si aparece o no línea bajo el enlace.

La propiedad - text-decoration - afectará a cualquier elemento CSS, no solo enlaces, y admite los siguientes valores:

    » none: el texto no muestra ninguna decoración, por lo que se eliminan todas las decoraciones que puede haber heredado el elemento.

    » underline: se muestran subrayadas todas las líneas de texto.

    » overline: similar al valor underline, pero en este caso el subrayado se muestra en la parte superior de cada línea.

    » line-through: todas las líneas de texto se muestran tachadas mediante una línea continua en el medio de cada línea.

    » blink: el texto parpadea apareciendo y desapareciendo de forma alternativa.

Como podeis ver el código CSS se posiciona en la cabecera de la página (head), los enlaces a los que queremos dar formato se posiciona dentro de una capa. El código que se presenta a continuación, muestra todo lo dicho con claridad.

<html>    

<head>    
<title>Formato de enlaces con CSS.</title>
 
<style type="text/css">   
<!-- 
.enlace{                    /* Define las propiedades generales del texto */
    font-family:verdana,arial;
    font-size:10pt;
    text-align:center;
    color: #2F4F4F;            /* Gris oscuro */
}

.enlace a {
    text-decoration: none;     /* La propiedad - none - elimina le linea bajo el enlace */
    color: #0000FF;            /* Color del enlace no visitado AZUL */ 

}

.enlace a:visited {
    text-decoration: none;
    none; color: #FF0000;    /* Color del enlace visitado ROJO */  
}

.enlace a:active {
    text-decoration: none; 
    color: #008000;            /* Color que toma el ultimo enlace visitado VERDE */ 
}

.enlace a:hover {
     text-decoration: underline;    /* Muestra linea bajo el enlace al pasar el ratón sobre el */
     color: #666666;           /* Color que toma el enlace al pasar el raton sobre el GRIS*/
}  
-->
</style>    

</head>    

<body>

  <div class="enlace">
  
      Así damos formato a un texto y los enlaces mediante una clase CSS.<br />
      Tan práctico como sencillo.
  
     <p><a href="http://www.uterra.com">INICIO</a></p>   
     <p><a href="http://www.uterra.com/codigo_html/codigo_fuente_html.php">HTML</a></p> 
     <p><a href="http://www.uterra.com/codigo_javascript/codigo_fuente_javascript.php">Javascript</a></p> 
     <p><a href="http://www.uterra.com/codigo_css/codigo_fuente_css.php">CSS</a></p> 
     <p><a href="http://www.uterra.com/codigo_php/codigo_fuente_php.php">PHP</a></p>
     
  </div>
  
  
  <p>Este es un texto y enlace que no toma las propiedades CSS. Como puedes ver, <br />
  resulta menos atractivo que los anteriores.</p>
  
  <p><a href="http://www.uterra.com/herramientas_web/busca_email.php">Enlace sin propiedades CSS</a></p>
 
</body>    

</html>