¿Supiste lo que acaba de lanzar LagriHost? Sí, como lo estabas esperando, ahora vendemos Web Hosting y Dominios. Conoce más :)


Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Formato de los enlaces con css
#1
0
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.


Código:
<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.ejemplomiweb.com">INICIO</a></p>    
     <p><a href="http://www.ejemplomiweb.com/codigo_html/codigo_fuente_html.php">HTML</a></p>  
     <p><a href="http://www.ejemplomiweb.com/codigo_javascript/codigo_fuente_javascript.php">Javascript</a></p>  
     <p><a href="http://www.ejemplomiweb.com/codigo_css/codigo_fuente_css.php">CSS</a></p>  
     <p><a href="http://www.ejemplomiweb.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.ejemplomiweb.com/herramientas_web/busca_email.php">Enlace sin propiedades CSS</a></p>
  
</body>    

</html>



Posibles temas similares…
Tema Autor Respuestas Vistas Último mensaje
  Ayuda Con Programa De Afiliado alieninc 6 5,134 19-06-2018, 05:32 PM
Último mensaje: alieninc
  Tutorial Como hacer chat con el símbolo del sistema (CMD) Diringax 0 3,002 10-07-2017, 06:07 PM
Último mensaje: Diringax
  Tutorial Limpiar estilos no usados de tu CSS para liberar espacio Diringax 0 2,425 17-02-2017, 10:31 AM
Último mensaje: Diringax
  Recogiendo los datos enviados a través de un formulario. torgar22 2 2,990 02-12-2015, 11:17 AM
Último mensaje: piinbook
  Cargamos los estilos css desde un archivo externo torgar22 0 2,406 23-10-2015, 06:44 PM
Último mensaje: torgar22



Usuarios navegando en este tema:
1 invitado(s)


Forum software by © MyBB Theme © Kevinex & iAndrew 2018