Come modellare i collegamenti usando i CSS: un tutorial dettagliato per principianti

In questo tutorial, parleremo di come applicare uno stile ai collegamenti Web tramite CSS. I link sono una parte centrale di qualsiasi sito web. Ti consentono di spostare i visitatori in altre parti di esso, fare riferimento a fonti per sottolineare i punti che stai sottolineando, aiutare i lettori a scoprire post del blog più rilevanti e altro ancora.

Imparare a cambiare il loro design ti consente di assicurarti che siano riconoscibili come collegamenti e si adattino al resto del tuo sito web. CSS offre molti modi e proprietà diversi per questo, quindi esaminiamoli uno per uno.

Standard di collegamento e stile di collegamento predefinito

Prima di approfondire come apportare modifiche al design dei tuoi link, comprendiamo innanzitutto la loro composizione. Ecco come appare un elemento link in HTML:

 <a href="https://torquemag.io/">TorqueMag</a>

Come puoi vedere, è composto da più parti:

• <a> – Questo è l'operatore per la creazione di un elemento di collegamento. Perché a ? Perché in HTML, i collegamenti sono anche chiamati tag di ancoraggio .
• href="" – Tutto ciò che è racchiuso tra virgolette doppie è dove punta questo collegamento. È l'indirizzo a cui atterrerà qualcuno che fa clic su di esso.
• TorqueMag – Questo è il testo del collegamento che appare sulla pagina, ad esempio in questo modo (non fare clic su di esso, questo collegamento non porta da nessuna parte).
• </a> – Le parti che chiudono l'elemento link e comunicano al browser che il testo del link finisce qui.

Fin qui, così facile.

Che aspetto hanno i collegamenti per impostazione predefinita

La cosa interessante è quando guardi come appare questo tipo di link sulla pagina. Probabilmente l'hai già visto.

Se dichiari un vecchio collegamento in un documento HTML e non fornisci alcuna informazione sullo stile, assumerà lo stile predefinito:

1. Il testo del collegamento è blu e il collegamento stesso è sottolineato.
2. Quando ci passi sopra con il mouse, il cursore si trasforma in una piccola icona di una mano.
3. Quando lo fai clic, diventa rosso per un secondo.
4. Dopo aver visitato il collegamento, il suo colore cambierà in viola.
5. Quando accedi al collegamento tramite il tasto tabulatore sulla tastiera, avrà un contorno blu attorno ad esso.

Questi standard sono stati stabiliti agli albori di Internet e non sono cambiati molto dagli anni '90. La cosa divertente è che, anche se non ci hai mai pensato consapevolmente, a un certo livello probabilmente eri consapevole della maggior parte di quanto sopra solo navigando sul web.

Informazioni sugli stati di collegamento

Qualcosa che diventa anche ovvio da quanto sopra è che i collegamenti hanno stati diversi che influenzano il loro aspetto. Puoi indirizzarli con diverse pseudo classi CSS che ti consentono di influenzare il loro stile individuale. Questi sono:

• a – Questo è il suddetto tag di ancoraggio. Si rivolge a tutti i collegamenti in tutte le fasi.
• a:link – Per il collegamento normale, non visitato. In termini tecnici, :link prende di mira tutti i tag di ancoraggio che hanno un attributo href . In realtà, non è molto utilizzato. Molte persone usano semplicemente a , poiché i tag di ancoraggio senza un attributo href sono piuttosto rari, quindi spesso non è necessario questo tipo di differenziazione.
• a:visited – Descrive un collegamento che l'utente corrente ha visitato in precedenza, il che significa che esiste nella cronologia del browser.
• a:hover – Punta lo stile che viene visualizzato quando un utente passa il cursore del mouse su un collegamento.
• a:active – Styling brevemente visibile al momento del clic sul collegamento.
• a:focus – Un collegamento focalizzato, ad esempio a cui un utente è passato utilizzando il tasto Tab. il hover e la messa a focus sono spesso abbinati.

Ciò che è importante notare è che, quando si modifica lo stile per più stati di collegamento contemporaneamente, è necessario farlo nel seguente ordine.

1. a
2. a:link
3. a:visited
4. a:focus
5. a:hover
6. a:active

Lo stile per gli stati dei collegamenti si basano l'uno sull'altro e scendono a cascata. Pertanto, l'ordine è importante per assicurarsi che funzionino come previsto.

Soddisfare le aspettative degli utenti

L'ultima parte prima di entrare nel modo in cui è possibile apportare modifiche allo stile dei collegamenti tramite CSS, è parlare delle aspettative degli utenti. Il motivo per cui molto probabilmente hai riconosciuto facilmente i collegamenti predefiniti come collegamenti è perché alcune impostazioni predefinite sono state radicate in noi come utenti per molto tempo.

Di conseguenza, noi - e tutti gli altri - abbiamo aspettative molto chiare sull'aspetto dei collegamenti. Aspettative che, se non soddisfatte, possono rendere difficile per le persone riconoscere i collegamenti per quello che sono. Per questo motivo, quando lavori al design del tuo sito web, faresti bene a rimanere vicino a quelle aspettative.

In termini pratici ciò significa:

• Assicurati che i link siano evidenziati in qualche modo. I colori o le sottolineature vanno bene fintanto che i link risaltano sulla pagina. Evita cose come il corsivo o il grassetto .
• Fornisci un feedback facendo in modo che i link cambino quando vengono spostati e, in misura minore, cliccati ( a:active , ricordi?). Inoltre, non dovresti pasticciare con il cursore che si trasforma in un simbolo di una mano per indicare un elemento interattivo.

Di seguito, ti diremo come modificare tutto quanto sopra. Tuttavia, tieni presente che dovresti farlo con moderazione per evitare di frustrare i tuoi utenti.

Come modificare lo stile del testo del collegamento tramite CSS

Parliamo prima di tutto di come modificare la parte di testo del collegamento poiché è ciò che ne costituisce la base.

Modifica del colore del testo del collegamento

Le cose che trattiamo in questa sezione sono relativamente simili al nostro articolo su come dichiarare i colori tramite CSS. Quindi, se vuoi entrare davvero nei dettagli, ti consiglio di dare un'occhiata anche a quel post.

È possibile modificare il colore del testo del collegamento in diversi modi: parole colorate e diversi sistemi di notazione a colori come codice HEX, rgb() / rgba() , hsl() / hsla() , ecc.

 #link-one { color: red; } #link-two { color: #3af278; } #link-three { color: rgb(61, 76, 128); }

Ecco come appare quanto sopra sulla pagina:

Più comunemente, utilizzerai qualcosa come HEX o rgb() . L'uso dei nomi dei colori è estremamente raro al di fuori di semplici casi di test.

Il sistema di colori utilizzato dipende da diversi fattori, come la compatibilità del browser o la necessità o meno di trasparenza. Tuttavia, come puoi vedere, l'assegnazione dei colori ai collegamenti è piuttosto semplice tramite la proprietà color e funziona allo stesso modo per tutti gli altri stati dei collegamenti. Di conseguenza, puoi facilmente cambiare il colore del testo anche per :hover o :focus .

Regola il colore di sfondo

Oltre a modificare il colore del testo, puoi anche modificare il colore di sfondo dei tuoi collegamenti e i loro diversi stati. Questo è facile come usare la proprietà background-color .

Ecco il markup per l'esempio sopra:

 #link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { background-color: rgb(61, 76, 128); color: #fff; }

Altre opzioni di stile del testo

Poiché i collegamenti non sono altro che testo, tutti gli altri modi di applicare uno stile al testo nei CSS si applicano anche ad essi. Ciò significa che puoi assegnare altre proprietà ai collegamenti e ai loro diversi stati e fare in modo che cambino la dimensione dei caratteri, le famiglie di caratteri o altre cose quando gli utenti ci passano sopra.

Questo può avere senso per alcuni progetti, tuttavia, sono modi meno comuni per definire i collegamenti tramite CSS.

Ecco il markup per ottenere gli effetti sopra:

 #link-one { background-color: #fadbd8; color: red; font-family: Arial; } #link-two { color: #3af278; font-weight: 600; text-transform: uppercase; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { font-size: 36px; }

Lavora con la sottolineatura

Come abbiamo appreso all'inizio, i collegamenti sono sottolineati per impostazione predefinita. Se vuoi sbarazzartene, puoi usare text-decoration: none; (che è l'uso più comune della proprietà text-decoration ).

 a { text-decoration: none; }

Alcune persone preferiscono anche aggiungere una sottolineatura solo al passaggio del mouse ma non per il collegamento normale. Anche questo è facile da fare.

 a { text-decoration: none; } a:hover { text-decoration: underline; }

Inoltre, puoi usare border: bottom; invece della text-decoration: underline; per aggiungere una riga sotto i tuoi link. Le persone usavano questo perché offriva migliori opzioni di stile. Tuttavia, al giorno d'oggi abbiamo nuove proprietà per il metodo di underline standard che consentono più personalizzazioni.

Ad esempio, text-underline-offset consente di controllare la distanza tra il testo e la riga sottostante quando si utilizza text-decoration . text-decoration-thickness ti consente di impostare un'ampiezza di linea personalizzata. Quindi, percorrere la strada di border non è più necessario come una volta.

A parte questo, ci sono davvero molti modi in cui puoi lavorare con la linea sotto i collegamenti, inclusa l'animazione. Probabilmente potresti scrivere un altro articolo proprio su questo.

Modifica dello stile del cursore al passaggio del mouse

Come abbiamo già detto, quando passi il mouse su un link, il cursore del mouse cambia da una piccola freccia a una minuscola mano che punta.

Ormai, questo è il segno universale che hai a che fare con un elemento HTML cliccabile. Tuttavia, potresti non essere consapevole del fatto che puoi cambiare il cursore anche su altre cose, da un mirino sulle frecce di ridimensionamento a un indicatore di caricamento.

 a { cursor: crosshair; } a { cursor: move; } a { cursor: wait; } a { cursor: n-resize; } a { cursor: grab; }

Se sei curioso, prova quanto sopra in un ambiente di sviluppo locale per vedere il loro effetto. Ci sono molte più opzioni, che puoi trovare qui.

Tuttavia, poiché il puntatore è così universale, questo è sicuramente ciò che gli utenti si aspettano e di solito dovresti mantenerlo. Se, per qualche motivo, non funziona per i tuoi link, puoi correggerlo con il seguente pezzo di codice:

 a { cursor: pointer; }

È anche possibile utilizzare immagini personalizzate se desideri utilizzare i tuoi cursori sul tuo sito web. Ad esempio, un negozio online tedesco di articoli musicali utilizza il proprio cursore puntatore a tema.

Se esamini come lo fanno tramite gli strumenti di sviluppo del tuo browser, troverai il seguente pezzo di codice:

 a { cursor: url(../images/hand.cur),pointer; }

Come puoi vedere, puoi semplicemente utilizzare un cursore personalizzato fornendo l'indirizzo a un file immagine.

Apporta modifiche a: focus

Lo styling per la messa a focus è un importante aiuto per l'accessibilità, quindi assicurati che rimanga in giro. Per impostazione predefinita, l'evidenziazione avviene tramite la proprietà del outline , che fa apparire una casella attorno ad essa.

Perché outline e non border chiedi?

Perché il outline non occupa spazio sulla pagina. Si trova invece sopra lo sfondo dell'elemento. In questo modo, la messa a fuoco di un collegamento non modifica i salti di layout della pagina o simili.

Quindi, quali altre opzioni di stile hai per un collegamento mirato?

Molti di loro. Ci vuole tutto, da background-color a color , font-size , box-shadow , lo chiami.

Ecco come ottenere quanto sopra:

 #link-one:focus { color: red; } #link-two:focus { box-shadow: 0 0 14px 0px; } #link-three:focus { font-size: 36px; }

Usando a:focus , puoi fare praticamente tutto ciò che vuoi. Una delle applicazioni più interessanti, tuttavia, potrebbe essere che puoi anche personalizzare semplicemente l'impostazione predefinita del browser utilizzando la proprietà outline .

 a:focus { outline: 3px dotted green; }

Ecco come appare quanto sopra sulla pagina:

Pulsanti e caselle di collegamento

Naturalmente, i collegamenti non sono solo collegamenti di testo. In alcuni punti, appaiono spesso come riquadri, come menu di navigazione, come parti di moduli o inviti all'azione.

Questo non è troppo difficile da raggiungere. Fondamentalmente, devi solo trovare il modo di aggiungere spazio attorno al testo del link e fornire uno sfondo o un bordo/contorno in modo che venga visualizzato come un pulsante o una casella. A parte questo, sono sempre lo stesso elemento di collegamento che stavamo usando prima.

Esistono diversi modi per raggiungere questo obiettivo, dalla semplice aggiunta di padding a sistemi come flexbox o grid. Di seguito è riportato solo un esempio di come puoi farlo, ci sono molte più opzioni.

 a { background-color: #1a0dab; color: #fff; padding: 1.5rem; }

In questo caso, il CSS contiene sia lo stile per il collegamento che il contenitore in cui risiede. Ovviamente, puoi utilizzare gli stessi stati di collegamento di prima per includere comportamenti diversi per scenari diversi.

Includi icone nei tuoi link

Una cosa veloce che merita una spiegazione è che hai anche la possibilità di includere icone nei tuoi collegamenti. È ciò che alcune persone fanno per rendere ancora più chiaro che qualcosa è un collegamento in uscita che allontanerà gli utenti dalla pagina corrente.

Ecco come farlo. Innanzitutto l'HTML:

 <a id=link-one href="#">Link Text</a> <a id=link-two href="#">Link Text</a> <a id=link-three href="https://wikipedia.org/">Link Text</a>

Quindi, il CSS:

 a[href^="http"] { background: url('external-link-icon.png') no-repeat right center; background-size: 16px 16px; padding-right: 15px; }

L' a[href^="http"] ha come target solo i tag di ancoraggio che hanno un indirizzo che inizia con http href="" . A quelli, il markup aggiunge un'immagine di sfondo, che è l'icona, la imposta su no-repeat, la sposta completamente a destra e la centra verticalmente. Il resto del markup definisce la dimensione dell'icona e crea un po' di spazio tra essa e il testo.

Considerazioni finali: stile CSS per i collegamenti

Cambiare lo stile dei collegamenti tramite CSS non è così difficile una volta che hai le basi. La parte più importante è capire che assumono stati diversi che sono presi di mira da operatori e pseudo-classi diversi. Dopodiché, si tratta semplicemente di utilizzare le proprietà CSS comuni per modificare il loro design in qualsiasi cosa tu voglia. Ora hai tutte le informazioni necessarie per iniziare.

Qual è il tuo modo preferito per applicare uno stile ai link tramite CSS? Qualche altro consiglio da condividere? Per favore, fallo nei commenti!