Un enlace es una conexión de una página web a otra, y CSS puede diseñar enlaces de varias maneras a través de diferentes atributos.
1. Estilo de enlace
Los enlaces son una parte importante de un sitio web. Puede ver muchos enlaces en casi todas las páginas web. Un diseño razonable de estilos de enlaces puede agregar puntos a la apariencia de la página web. Los enlaces tienen cuatro estados diferentes, a saber, enlace, visitado, activo y flotante. Puede establecer diferentes estilos para los cuatro estados del enlace a través de los siguientes selectores de pseudoclase:
(1) a: enlace => Este es un enlace normal y no visitado.
(2) a: visitado => Este es un enlace que el usuario ha visitado al menos una vez
(3) a:hover => cuando el mouse pasa sobre él, es un enlace
(4) a: activo => Este es un enlace en el que se acaba de hacer clic.
gramática:
a:enlace{color:color_name;}color_name puede tener cualquier formato, como un nombre de color (verde), un valor hexadecimal (#5570f0) o un valor RGB: rgb(25, 255, 2). Hay otro estado "a:focus" que se usa para enfocar cuando el usuario usa la tecla de tabulación para explorar un enlace.
Valor predeterminado para el enlace:
(1) Por defecto, los enlaces creados están subrayados.
(2) Cuando el mouse pasa sobre el enlace, cambiará a un ícono de mano.
(3) Los enlaces normales/no visitados son azules.
(4) Los enlaces visitados están coloreados en violeta.
(5 ) Los enlaces activos son rojos.
(6) Cuando un enlace está enfocado, tiene un contorno a su alrededor.
Por ejemplo:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Enlaces CSS</title><style>p{font-size:25px;text-align:center;}</style></head ><body><p><ahref=https://www.dotcpp.com/>Enlace simple</a></p></body></html>Los resultados mostrados son los siguientes:
2. ¿Cómo configurar el estilo del enlace con CSS?
Aquí hay algunas propiedades CSS básicas para enlaces:
(1) atributo de color
Esta propiedad CSS se utiliza para cambiar el color del texto del enlace.
gramática:
un{color:color_name;}(2) atributo de familia de fuentes
Esta propiedad se usa para cambiar el tipo de fuente del enlace usando la propiedad font-family.
gramática:
a{font-familia:nombrefamilia;}(3) atributo de decoración de texto
Este atributo se utiliza principalmente para eliminar o agregar subrayados y otras modificaciones a los enlaces.
gramática:
a{texto-decoración:ninguna;}Ejemplo:
<style>/*Establece el tamaño de fuente para mejorar la visibilidad*/p{font-size:2rem;}/*Elimina los subrayados usando el atributo de decoración de texto*/a{text-decoration:none;}/*También puedes usar los siguientes estilos, agregue subrayado text-decoration:underline;*/</style>(4) atributo de color de fondo
Esta propiedad se utiliza para establecer el color de fondo del enlace.
gramática:
a{color de fondo:nombre_color;}