CSS Collegamento

Con CSS, link può essere uno stile in modi diversi.

Testo link Link di Testo link Button Bottone

styling Link

I collegamenti possono essere in stile con qualsiasi proprietà CSS (per esempio color , font-family , background , ecc).

Esempio

a {
color: hotpink;
}

Prova tu stesso "

Inoltre, i collegamenti possono essere in stile diverso a seconda che stato si trovano.

I quattro collegamenti sono stati:

a:link - una normale, collegamento non visitato
a:visited - un link che l'utente ha visitato
a:hover - un collegamento quando l'utente sposta il mouse su di esso
a:active - un collegamento nel momento in cui si fa clic

Esempio

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

Prova tu stesso "

Quando si imposta lo stile per diversi stati di collegamento, ci sono alcune regole di ordine:

a:hover deve venire dopo a:link e a:visited
a:active deve venire dopo a:hover

la decorazione di testo

Il text-decoration proprietà viene per lo più utilizzato per rimuovere le sottolineature dai collegamenti:

Esempio

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

Prova tu stesso "

Colore di sfondo

Il background-color proprietà può essere utilizzata per specificare un colore di sfondo per i link:

Esempio

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
}

Prova tu stesso "

Pulsanti di collegamento - Advanced

Questo esempio dimostra un esempio più avanzata in cui si combinano diverse proprietà CSS per visualizzare i collegamenti come scatole / pulsanti:

Esempio

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

Prova tu stesso "