Ligas CSS
Con CSS se puede dar estilos a las ligas (enlaces) de diferentes formas:
Estilos a Ligas
Es posible darle estilos a las Ligas con las propiedades CSS como: color, font-family, background, etc.
Cóidgo:
a {
color: hotpink;
}
Muestra:
Además, los enlaces pueden tener estilos diferentes dependiendo del estado en que se encuentren.
Los cuatro estados de los enlaces son:
a:link
: normal, liga no visitada.a:visited
: una liga que el usuario ha visitado.a:hover
: una liga cuando el usuario posiciona encina el puntero del mouse encima.a:active
: una liga en el momento que se le ha dado clic.
Código:
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: hotpink;
}
a:active {
color: blue;
}
Al configurar los estilos para varios estados de enlace, existen algunas reglas de orden:
a:hover
DEBE venir después dea:link
ya:visited
a:active
DEBE venir después dea:hover
La propiedad text-decoration
La propiedad text-decoration es usada principalmente para remover el subrayado de los enlaces.
Código:
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
La propiedad background-color
La propiedad background-color es usada para especificar un color de fondo para los enlaces.
Código:
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
Avanzado - Botones de Enlace
Este ejemplo muestra un ejemplo más avanzado en el que combinamos varias propiedades CSS para mostrar enlaces como cuadros / botones:
Código:
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active{
background-color: red;
}