Link in CSS
Per applicare stili ai link con i CSS usa le seguenti proprietà: text-decoration, color, background color. Guarda gli esempi.
In questo capitolo spiegheremo come applicare stili ai link e renderli più gradevoli dal punto di vista visivo.
Il link ha questi stati:
a:link- un link normale, non visitatoa:visited- un link che l'utente ha già visitatoa:hover- un link quando l'utente ci passa sopra con il mousea:active- un link nel momento in cui viene cliccatoa:focus- un link che ha ricevuto il focus da tastiera
Tratteremo queste proprietà:
Decorazione del testo
Come ricorderai, quando creiamo un link, per impostazione predefinita è sottolineato. Per rimuovere la sottolineatura, dobbiamo usare la proprietà text-decoration.
Esempio di utilizzo della proprietà text-decoration per applicare stili a un link:
Esempi di text-decoration per i link CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<a href="#"> This is some link.</a>
</body>
</html>Spieghiamo il significato del nostro codice.
Qui puoi vedere che il link nel suo primo e secondo stato sarà senza sottolineatura. Il link viene sottolineato quando l'utente ci passa sopra con il mouse o lo clicca.
Puoi verificarlo nel tuo browser usando i tuoi editor o il nostro editor online.
Questi stili possono essere scritti nella sezione <head> oppure in un file CSS che userai per la tua pagina web.
Colore
Usiamo la proprietà color per impostare il colore di un link.
Ad esempio, se vogliamo che il nostro link sia nero per impostazione predefinita e #1c87c9 nel suo terzo stato (a:hover), dobbiamo scrivere quanto segue:
Esempio di utilizzo della proprietà color per applicare stili a un link:
Esempi di color per i link CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #1c87c9;
}
a:active {
color: #1c87c9;
}
</style>
</head>
<body>
<a href="#">This is some link.</a>
</body>
</html>Risultato
Colore di sfondo
Cosa possiamo fare se vogliamo che il nostro link abbia uno sfondo?
Basta applicare la proprietà background-color.
Ad esempio, il nostro link avrà uno sfondo grigio e al passaggio del mouse cambierà in #1c87c9.
Quando il primo stato (a:link) e il secondo (a:visited) hanno lo stesso colore di sfondo, possiamo usare semplicemente a.
Esempio di utilizzo della proprietà background-color per applicare stili a un link:
Esempi di background-color per i link CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a {
background-color: #555555;
}
a:hover {
background-color: #1c87c9;
}
a:active {
background-color: #1c87c9;
}
</style>
</head>
<body>
<a href="#">This is some link.</a>
</body>
</html>Puoi scegliere il colore che preferisci usando il Color Picker.