Aplicar formato a los enlaces o hipervínculos.

Resumen.

En este artículo vamos a tratar uno de esos aspectos imprescindibles en la maquetación de nuestras páginas, nos referimos al formato de los enlaces, link o hipervínculos. Cuando solo usamos HTML los enlaces aparecen en color azul y subrayado, veremos dos formas de enfrentarnos a este asunto, una referida a la capa, contenedor o div donde se encuentra el enlace, y otra refiriéndonos a enlaces específicos independientemente de donde se encuentren.

» Código CSS

Artículo.

Un aspecto clave en nuestras páginas Web es la forma de presentar los enlaces y cómo se comportan estos cuando el usuario interactúa con ellos. El objetivo del enlace o hipervínculo es siempre el mismo, cargar una nueva página, un archivo y en ocasiones, iniciar un proceso de descarga de archivos, y decimos esto, porque queremos remarcar que el objetivo del enlace es ajeno al formato que le apliquemos a este, aunque aplicar formatos diferenciadores según la acción que vaya a desempeñar ese enlace podría ser también un criterio diferenciador para la presentación de estos.

Sin más, vamos al asunto, un hipervínculo, enlace o link toma la siguiente forma básica:


<a href="URL o ubicacion local">Enlace</a>

Un enlace así presentado aparecerá en color azul y subrayado, pero esta rigidez la podemos modificar de forma muy sencilla mediante el uso de CSS. Vamos a plantear dos formas posibles de hacerlo.

La primera forma de aplicar formato a los enlaces es en función de la capa o div que los contiene. En este caso, la sintaxis del enlace no se modifica respecto a su forma más básica.


mi_texto a:link{}    // Enlace no visitado
mi_texto a:visited{}    // Enlace visitado
mi_texto a:hover{}    // Cuando pasa el puntero sobre el enlace
mi_texto a:active{}    // Cuando se hace clic sobre el enlace

Y mucho OJO, estas seudoclases deben definirse en el orden en que se presentan, ya que de lo contrario unas se pueden superponer a las otras mostrando un comportamiento anómalo.

Las propiedades se definirían de la manera habitual que se hace a la hora de definir cualquier capa, algo así como esto:


.mi_texto a:active {
    font-weight:900;
    font-style:italic;
        color:#008000; 
}

La segunda forma consiste en aplicar la clase CSS al enlace en cuestión, con lo que su forma queda de la siguiente manera:


<a href="URL" class="mi_enlace">Enlace</a>

Y la clase CSS se definiría de manera ligeramente diferente al caso anterior, quedaría de la siguiente manera:


a.mi_enlace:active {
    font-weight:900; 
    font-style:italic;
       color:#000000; 
}

Y con esto presentamos el siguiente ejemplo de código donde se muestran estas dos formas de aplicar formato.


<!DOCTYPE html> 
<html lang="es"> 
<head> 
<meta charset="UTF-8" /> 
<title>Aplicamos formato a los enlaces con CSS. ArtesaniaWeb.ES</title>
<style> 
<!-- 
.mi_texto {                    /* Define las propiedades generales del texto */
    font-family: verdana,arial;
    font-size: 1.5rem;
    text-align: center;
    color: #2F4F4F;            /* Gris oscuro */
}
/* Aplicamos formato a los enlaces contenidos una capa o div */

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

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

.mi_texto 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*/
}  

.mi_texto a:active {
    font-weight: 900; 
    font-style:italic;      /*-- En cursiva --*/ 
    color:#008000;            /* Color que toma el enlace al pulsar sobre el VERDE */ 
}
/* ======================================================= */
/* Aplicamos formato a enlaces concretos */

a.mi_enlace:link {
    text-decoration: none;     /* La propiedad - none - elimina le linea bajo el mi_texto */
    color: #00FFFF;            /* Color del enlace no visitado CELESTE */ 
}

a.mi_enlace:visited {
    text-decoration: none;
    none; color: #FF9933;    /* Color del enlace visitado NARANJA */  
}

a.mi_enlace:hover {
     text-decoration: underline;    /* Muestra linea bajo el enlace al pasar el ratón sobre el */
     color: #0000FF;           /* Color que toma el enlace al pasar el raton sobre el AZUL*/
}  

a.mi_enlace:active {
    font-weight: 900; 
    font-style:italic;      /*-- En cursiva --*/ 
    color:#000000;            /* Color que toma el enlace al pulsar sobre el NEGRO */ 
}
 --> 
</style>
</head> 

<body>
    <div class="mi_texto">
    
        Así damos formato a un texto y los enlaces mediante una clase CSS.<br />
        Tan práctico como sencillo.
    
        <p><a href="https://www.artesaniaweb.es">INICIO</a></p>   
        <p><a href="https://www.artesaniaweb.es/curso-php.php">Curso PHP</a></p> 
        <p><a href="https://www.artesaniaweb.es/curso-mysql.php">Curso MySQL</a></p> 
        <p><a href="https://www.artesaniaweb.es/codigo-css.php">Código CSS</a></p> 
        <p><a href="https://www.artesaniaweb.es/codigo-php.php">Código PHP</a></p>
        <p><a href="https://www.artesaniaweb.es/mas-leido-programacion-web.php" class="mi_enlace">Lo mas leido en ArtesaniaWeb.ES</a></p> 
    
    </div>
    
    <p><a href="https://www.artesaniaweb.es/mas-leido-programacion-web.php" class="mi_enlace">Lo mas leido en ArtesaniaWeb.ES</a></p> 
    
</body> 
</html>

Ahora solo queda que según cada caso concreto, elijáis la forma que mejor se adapta a cada situación.

Ver demo

Tags: Hipervínculos || formato || link || visited || hover || active

Anterior

Siguiente

Aplicar formato a los enlaces o hipervínculos.

Resumen.

Artículo.

Comentarios.