Video: CSS : come modificare un link con CSS 2024
In generale, i browser visualizzano i collegamenti come testo sottolineato in blu. In origine, questo comportamento predefinito riduceva al minimo la confusione tra il contenuto della pagina e un collegamento interattivo. Oggi, quasi tutti i siti Web presentano link a modo suo. Alcuni siti Web non sottolineano i collegamenti; altri conservano la sottolineatura, ma i collegamenti di stile in colori diversi dal blu; e così via.
L'elemento di ancoraggio HTML (
a
) viene utilizzato per creare collegamenti. Il testo tra il tag di ancoraggio di apertura e chiusura è la descrizione del collegamento e l'URL impostato nell'attributo
href
è l'indirizzo che il browser visita quando viene fatto clic sul collegamento.
Il tag di ancoraggio si è evoluto nel tempo e oggi ha quattro stati:
-
link: un link che un utente non ha cliccato o visitato -
visitato: A collegamento che un utente ha fatto clic o visitato -
passaggio del mouse: un link su cui l'utente posiziona il puntatore del mouse senza fare clic su -
attivo: un collegamento che l'utente ha iniziato a fare clic ma non ancora rilasciato il pulsante del mouse
I CSS possono applicare ciascuno di questi quattro stati, il più delle volte usando queste proprietà e questi valori.
| Nome proprietà | Valori possibili | Descrizione |
colore
|
nome
|
Colore collegamento specificato utilizzando nomi (
colore: blu;
), codice esadecimale (
colore: # 0000FF;
) o valore RGB (
colore: rgb (0, 0, 255); >).
text-decoration |
none
|
sottolinea
|
Il seguente esempio definisce i collegamenti in un modo simile al modo in cui vengono inseriti negli articoli su Wikipedia, in cui i collegamenti appaiono blu per impostazione predefinita, sottolineati al passaggio del mouse e arancione quando attivi. Come mostrato di seguito, il primo collegamento con il Chief Technology Officer degli Stati Uniti appare sottolineato come se un mouse si stesse librando sopra di esso. Inoltre, il collegamento a Google appare arancione come sarebbe se fosse attivo e il mouse facesse clic su di esso. |
a: link {
color: rgb (6, 69, 173);
decorazione del testo: nessuna;
}
a: visited {
color: rgb (11, 0, 128)
}
a: hover {
text-decoration: underline
}
a: attivo {
color: rgb (250, 167, 0)
}
Wikipedia. pagina org che mostra link, visitato, hover e stati attivi.
a
e lo stato del collegamento.
Pur spiegando perché è oltre lo scopo di questo libro, le specifiche CSS insistono nel definire i vari stati dei collegamenti nell'ordine mostrato qui: link, visitato, hover e quindi attivo.Tuttavia, è accettabile non definire uno stato di collegamento, purché questo ordine venga conservato.
I vari stati di collegamento sono noti come
selettori di pseudo-classe. I selettori di pseudo-classe aggiungono una parola chiave ai selettori CSS e consentono di disegnare uno stato speciale dell'elemento selezionato.
