Enlaces de estilo CSS | TIEngranaje

Al igual que aplicaría estilos al texto de sus páginas web, aplicar estilos a los documentos también es una práctica común. Enlaces se puede diseñar con propiedades CSS como color, Familia tipográfica, fondo, y más. Un elemento de enlace también tiene la capacidad de estar en uno de cuatro estados (pseudoclase). Puede aplicar CSS a cada estado de forma independiente.

Los cuatro estados de los enlaces son los siguientes:

• a:link – estado de un enlace no visitado por un usuario
• a:visited – indicar cuándo el usuario ha visitado el enlace
• a:hover – estado cuando el usuario se desplaza sobre él
• a:active – estado cuando se hace clic en el enlace

Color de enlace

Puede aplicar fácilmente diferentes colores a la diferentes estados de tus enlaces. Por ejemplo, es posible que desee aplicar un color azul para los enlaces no visitados, pero aplique el color rojo para aquellos enlaces que hayan sido visitados por el mismo usuario.

a:link {
    color:#FF0000;
}
a:visited {
    color:#00FF00;
}
a:hover {
    color:#0000FF;
}
a:active {
    color:#FF00FF;
}

Al aplicar CSS al elemento de enlace, es importante tener la reglas CSS en el orden que se muestra en el ejemplo.

Decoración de texto

Otra propiedad que se puede usar para diseñar enlaces es decoración de texto. Por ejemplo, los navegadores, de forma predeterminada, diseñarán los enlaces con un subrayado. Es posible que solo desee mostrar el subrayado cuando el mouse se desplace sobre el enlace. Puede cambiar ese comportamiento aplicando el text-decoration propiedad.

a:link {
    text-decoration:none;
}
a:visited {
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a:active {
    text-decoration:none;
}

Color de fondo

También es común aplicar un color de fondo a tus enlaces. Puede hacerlo aplicando el background-color propiedad.

a:link {
    background-color:yellow;
}
a:visited {
    background-color:blue;
}
a:hover {
    background-color:green;
}
a:active {
    background-color:white;
}

puedes aplicar otras propiedades a los enlaces, tal como lo haría con el texto dentro de su documento. Aquí hay un ejemplo de lo que se puede hacer para diseñar enlaces agregando fronteras, fuentesetc.

a:link {
    text-decoration:none;
    color:#000000;
    background-color:#FFFFFF;
    border:2px solid blue;
    padding:5px;
}
a:visited {
    text-decoration:none;
    color:#000000;
    background-color:#FFFFFF;
    border:2px solid blue;
    padding:5px;
}
a:hover {
    text-decoration:underline;
    color:#FFFFFF;
    background-color:#000000;
    border:2px solid blue;
    padding:5px;
}
a:active {
    text-decoration:none;
    color:#000000;
    background-color:#FF0000;
    border:2px solid blue;
    padding:5px;
}