El enlace es una conexión de una página web a otra página web. La propiedad CSS se puede usar para diseñar los enlaces de varias maneras diferentes.
Estados de enlace: antes de discutir las propiedades de CSS, es importante conocer los estados de un enlace. Los enlaces pueden existir en diferentes estados y pueden diseñarse utilizando pseudoclases.
Hay cuatro estados de enlaces a continuación:
- a:link => Este es un enlace normal, no visitado.
- a:visitado => Este es un enlace visitado por el usuario al menos una vez
- a:hover => Este es un enlace cuando el mouse pasa sobre él
- a:activo => Este es un enlace en el que se acaba de hacer clic.
Sintaxis:
a:link {
color:color_name;
}
color_name se puede dar en cualquier formato como nombre de color (verde), valor HEX (# 5570f0) o valor RGB rgb (25, 255, 2). Hay otro estado ‘a:focus’ que se usa para enfocar cuando un usuario usa la tecla de tabulación para navegar a través de los enlaces.
Valor por defecto de los enlaces:
- Por defecto, los enlaces creados están subrayados.
- Cuando se pasa el ratón por encima de un enlace, cambia a un icono de mano.
- Los enlaces normales/no visitados son azules.
- Enlaces visitados de color morado.
- Los enlaces activos son de color rojo.
- Cuando un enlace está enfocado, tiene un contorno a su alrededor.
Ejemplo
html
<!DOCTYPE html>
<html>
<head>
<title>CSS links</title>
<style>
p {
font-size: 25px;
text-align: center;
}
</style>
</head>
<body>
<p><a href="https://www.geeksforgeeks.org/">GeeksforGeeks Simple Link</a></p>
</body>
</html>
Producción:
Propiedades CSS de los enlaces: A continuación se proporcionan algunas propiedades CSS básicas de los enlaces:
- color
- Familia tipográfica
- decoración de texto
- color de fondo
color: esta propiedad CSS se utiliza para cambiar el color del texto del enlace.
Sintaxis:
a {
color: color_name;
}
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>Link color property</title>
<style>
p {
font-size: 20px;
text-align:center;
}
/*unvisited link will appear green*/
a:link{
color:red;
}
/*visited link will appear blue*/
a:visited{
color:blue;
}
/*when mouse hovers over link it will appear orange*/
a:hover{
color:orange;
}
/*when the link is clicked, it will appear black*/
a:active{
color:black;
}
</style>
</head>
<body>
<p><a href="https://www.geeksforgeeks.org/">GeeksforGeeks</a>
This link will change colours with different states.</p>
</body>
</html>
Producción:
font-family: esta propiedad se usa para cambiar el tipo de fuente de un enlace usando la propiedad font-family.
Sintaxis:
a {
font-family: "family name";
}
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<style>
/*Initial link font family arial*/
a {
font-family:Arial;
}
p {
font-size: 30px;
text-align:center;
}
/*unvisited link font family*/
a:link{
color:Arial;
}
/*visited link font family*/
a:visited{
font-family:Arial;
}
/*when mouse hovers over it will change to times new roman*/
a:hover{
font-family:Times new roman;
}
/*when the link is clicked, it will changed to Comic sans ms*/
a:active{
font-family:Comic Sans MS;
}
</style>
</head>
<body>
<p><a href="https://www.geeksforgeeks.org/"
id="link">GeeksforGeeks</a> a Computer Science
Portal for Geeks.</p>
</body>
</html>
Producción:
Decoración de texto: esta propiedad se usa básicamente para eliminar/agregar subrayados de/a un enlace.
Sintaxis:
a {
text-decoration: none;
}
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>Text decoration in link</title>
<style>
/*Set the font size for better visibility*/
p {
font-size: 2rem;
}
/*Removing underline using text-decoration*/
a{
text-decoration: none;
}
/*underline can be added using
text-decoration:underline;
*/
</style>
</head>
<body>
<p><a href="https://www.geeksforgeeks.org/" id="link">GeeksforGeeks</a> a Computer Science
Portal for Geeks.</p>
</body>
</html>
Producción:
color de fondo: esta propiedad se utiliza para establecer el color de fondo del enlace.
Sintaxis:
a {
background-color: color_name;
}
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>background color</title>
<style>
/*Setting font size for better visibility*/
p{
font-size: 2rem;
}
/*Designing unvisited link button*/
a:link{
background-color: powderblue;
color:green;
padding:5px 5px;
text-decoration: none;
display: inline-block;
}
/*Designing link button when mouse cursor hovers over it*/
a:hover{
background-color: green;
color:white;
padding:5px 5px;
text-align: center;
text-decoration: none;
display: inline-block;
}
</style>
</head>
<body>
<p><a href="https://www.geeksforgeeks.org/" id="link">
GeeksforGeeks</a> a Computer Science Portal for Geeks.</p>
</body>
</html>
Producción:
Botón de enlace CSS: los enlaces CSS también se pueden diseñar usando botones/cuadros. El siguiente ejemplo muestra cómo los enlaces CSS se pueden diseñar como botones.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>Link button</title>
<style>
/*Setting font size for better visibility*/
p{
font-size: 2rem;
}
a {
background-color: green;
color:white;
padding:5px 5px;
border-radius:5px;
text-align: center;
text-decoration: none;
display: inline-block;
}
</style>
</head>
<body>
<p><a href="https://www.geeksforgeeks.org/" id="link">
GeeksforGeeks</a> a Computer Science Portal for Geeks.</p>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Kushagra7744 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA