4.3.5. Enlaces | UA04. CSS

Podemos aplicar cualquier atributo CSS (color, font-family, background, etc.) a los enlaces y darles forma.

Además, los enlaces se pueden diseñar de manera diferente según el estado en el que se encuentren.

Elemento	Descripción	Ejemplo
a:link	Indica el estado de un enlace normal no visitado	`a:link { color: red; } a:visited { color: green; } a:hover { color: hotpink; } a:active { color: blue; }`
a:visited	Indica el estado de un enlace que el usuario ha visitado
a:hover	Indica el estado de un enlace cuando el usuario pasa sobre él
a:active	Indica el estado de un enlace en el momento en que se hace clic

Al configurar el estilo para varios estados de enlace, existen algunas reglas de orden:

a: hover DEBE venir después de :link y un : visited
a: active DEBE venir después de :hover

Podemos combinar varios atributos sobre los enlaces y crear Botones de enlace:

<!DOCTYPE html>
<html>
  <head>
  <style>
    a:link, a:visited {
    background-color: #ab0006;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    }

    a:hover, a:active {
    background-color: black;
    }
  </style>
  </head>
  <body>
    <a href="#">Enlace</a>
  </body>
</html>