CSS Campo de golf

Con CSS, enlaces pueden ser de estilo de diferentes maneras.

Texto del enlace de texto Enlace Enlace Botón Botón de Enlace

Enlaces de estilo

Los enlaces pueden ser de estilo con cualquier propiedad CSS (por ejemplo, color , font-family , background , etc.).

Ejemplo

a {
color: hotpink;
}

Inténtalo tú mismo "

Además, los enlaces pueden ser de estilo diferente dependiendo del estado en que se encuentran.

Los cuatro estados son enlaces:

a:link - un enlace sin visitar la normalidad
a:visited - un vínculo que el usuario ha visitado
a:hover - un enlace cuando los usuario se desplaza sobre ella
a:active - un enlace el momento en que se hace clic

Ejemplo

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

Inténtalo tú mismo "

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

a:hover debe venir después a:link y a:visited
a:active debe venir después a:hover

Decoración de texto

El text-decoration propiedad se ha utilizado para eliminar los subrayados de enlaces:

Ejemplo

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

Inténtalo tú mismo "

Color de fondo

El background-color propiedad se puede utilizar para especificar un color de fondo para los enlaces:

Ejemplo

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
}

Inténtalo tú mismo "

Avanzadas - Botones de Enlace

Este ejemplo demuestra un ejemplo más avanzado, donde combinamos varias propiedades CSS para mostrar enlaces como cajas / botones:

Ejemplo

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;
}

Inténtalo tú mismo "