El enlace es un objeto HTML que se utiliza para conectar un recurso web a otro. Se utiliza para saltar a una nueva ubicación en la web haciendo clic en ella. La etiqueta <a> se utiliza para insertar enlaces en un documento HTML. Los enlaces son elementos interactivos y, para indicar su interactividad, los enlaces tienen diferentes colores en HTML dependiendo de su estado actual, es decir, visitados, no visitados o activos. El estilo predeterminado para diferentes estados de enlace es el siguiente.
- Enlace no visitado: subrayado y azul
- Enlace visitado: subrayado y morado
- Enlace activo: subrayado y rojo
Enlace no visitado: Los hipervínculos que llevan al usuario a una página web que no ha visto antes se denominan enlaces no visitados. De forma predeterminada, estos son de color azul y el texto del enlace se muestra como texto subrayado.
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <body> <p>Default style of unvisited link:</p> <p>Unvisited Link</p> <a href="https://www.geeksforgeeks.org"> GeeksforGeeks </a> </body> </html>
Producción:
Ejemplo 2: el color de estado predeterminado del enlace no visitado se puede cambiar usando CSS: selector de enlace. El siguiente código cambia el color del enlace no visitado a color «rojo».
HTML
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: red;
}
</style>
</head>
<body>
<p>Changing default color of unvisited link:</p>
<p>Unvisited Link</p>
<a href="https://www.geeksforgeeks.org">
GeeksforGeeks
</a>
</body>
</html>
Producción:
Enlace visitado: Los hipervínculos que llevan al usuario a una página web que ya ha visitado se denominan enlaces visitados. De forma predeterminada, estos son de color «púrpura» y el texto del enlace se muestra como texto subrayado.
Ejemplo:
HTML
<!DOCTYPE html> <html> <body> <p>Default style of visited link:</p> <p>Visited Link</p> <a href="https://www.geeksforgeeks.org"> GeeksforGeeks </a> </body> </html>
Producción:
Enlace visitado usando estilos CSS: el color de estado predeterminado del enlace visitado se puede cambiar usando el selector » CSS: visitado» . El siguiente código cambia el color del enlace visitado a “verde”
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
a:visited {
color: green;
}
</style>
</head>
<body>
<p>Changing default color of visited link:</p>
<p>Visited Link</p>
<a href="https://www.geeksforgeeks.org">
GeeksforGeeks
</a>
</body>
</html>
Producción:
Enlace activo: los hipervínculos muestran que el navegador está en proceso de cargar un nuevo recurso que se conoce como enlaces activos. De forma predeterminada, estos son de color «rojo» y el texto del enlace se muestra como texto subrayado.
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <body> <p>Default style of active link:</p> <p>Active Link</p> <a href="https://www.geeksforgeeks.org"> GeeksforGeeks </a> </body> </html>
Producción:
Ejemplo 2: el color de estado predeterminado del enlace activo se puede cambiar usando el selector » CSS: activo» . El siguiente código cambia el color del enlace activo a «amarillo».
HTML
<!DOCTYPE html>
<html>
<head>
<style>
a:active {
color: yellow;
}
</style>
</head>
<body>
<p>Changing default color of active link:</p>
<p>Active Link</p>
<a href="https://www.geeksforgeeks.org">
GeeksforGeeks
</a>
</body>
</html>
Producción:
Hover Link: los hipervínculos que cambian los valores de sus atributos cuando el mouse se desplaza sobre ellos se denominan enlaces flotantes. El color predeterminado del enlace se puede cambiar utilizando el selector » CSS: hover » para enlaces. El siguiente código cambia el color del enlace flotante a «naranja».
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
a:hover {
color: orange;
}
</style>
</head>
<body>
<p>Changing color of link on hovering:</p>
<p>Hover Link</p>
<a href="https://practice.geeksforgeeks.org/">
GeeksforGeeks
</a>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por saxenaanjali239 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA