En HTML , los hipervínculos se agregan a la página web mediante la etiqueta de anclaje <a>Nombre</a> . Crea el enlace para navegar a otra página web desde la página web actual.
Los enlaces HTML predeterminados están en color azul y cuando se pasa el mouse aparecen subrayados. Cuando se visita el enlace, se vuelve violeta. Estas propiedades predeterminadas se pueden cambiar y personalizar utilizando diferentes propiedades CSS .
Ejemplo 1: Cree una personalización básica de enlace HTML utilizando el selector CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!--Meta data-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
h1 {
color: #006600;
text-align: center;
}
a{
color:#006600;
text-decoration: none;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<a href = "https://practice.geeksforgeeks.org/home/">
Click me, I am a href link
</a>
</center>
</body>
</html>
Producción:
Los enlaces se pueden personalizar aún más según el estado.
Los enlaces tienen básicamente 4 estados.
Ejemplo 2: Podemos dar diferente color a los enlaces al cambiar de estado.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!--Meta data-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
h1 {
color: #006600;
text-align: center;
}
/* If the link is unvisited you see this color*/
a:link {
color: #006600;
text-decoration: none;
}
/* If the link is visited you see this color*/
a:visited {
color: rgb(255, 105, 223);
}
/* On placing mouse over the link */
a:hover {
color: rgb(128, 105, 255);
text-decoration: underline;
}
/* If the click the link, you see this color*/
a:active {
color: rgb(255, 105, 138);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>Click the links</p>
<ul>
<li><a href=
"https://www.geeksforgeeks.org/dbms/?ref=ghm">
DBMS
</a>
</li>
<li><a href=
"https://www.geeksforgeeks.org/computer-network-tutorials/?ref=ghm">
Computer Networks</a>
</li>
<li> <a href=
"https://www.geeksforgeeks.org/operating-systems/?ref=ghm">
Operating Systems</a>
</li>
<li><a href=
"https://www.geeksforgeeks.org/data-structures/?ref=ghm">
Data Structures</a>
</li>
<li><a href="https://www.geeksforgeeks.org/">
And many more</a>
</li>
</ul>
</body>
</html>
Salida: Los enlaces no visitados y visitados tienen colores diferentes. Al pasar el ratón sobre el segundo enlace, vemos el cambio de color y estilo del enlace. El orden para colocar un: hover debe ser después de un: enlace y un: visitado . El estilo a: active debe ir después de a: hover .
Ejemplo 3: los enlaces se pueden diseñar aún más aplicando diferentes propiedades CSS como color de fondo, tamaño de fuente, estilo de fuente, decoración de texto y muchas.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!--Meta data-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
h1 {
color: #006600;
text-align: center;
}
a:link {
color: #006600;
text-decoration: none;
}
a:visited {
color: rgb(255, 105, 223);
}
a:hover {
color: white;
text-decoration: underline;
font-size: larger;
font-style: italic;
background-color:#006600;
}
a:active {
color: rgb(255, 105, 138);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p> Click these links</p>
<ul>
<li><a href=
"https://www.geeksforgeeks.org/dbms/?ref=ghm">
DBMS</a>
</li>
<li><a href=
"https://www.geeksforgeeks.org/computer-network-tutorials/?ref=ghm">
Computer Networks</a>
</li>
<li> <a href=
"https://www.geeksforgeeks.org/operating-systems/?ref=ghm">
Operating Systems</a>
</li>
<li><a href=
"https://www.geeksforgeeks.org/data-structures/?ref=ghm">
Data Structures</a>
</li>
<li><a href=
"https://www.geeksforgeeks.org/">And many more</a>
</li>
</ul>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA