Personalizzare i link con CSS

Personalizzare i link con CSS

I link o hyperlink sono una parte costante e fondamentale delle nostre pagine web, modificare il loro aspetto in base al contesto permette di rendere una pagina gradevole e chiara, in questo articolo ti mostro come fare con i fogli di stile CSS.

Perché cambiare stile

Come accennato nella guida hyperlink html su tutti i browser, per permettere una facile identificazione dei link, è presente una regola che ne stabilisce l’aspetto standard:

  • colore blu link non ancora visitato
  • colore viola link visitato
  • colore rosso link attivo

Queste impostazioni però potrebbero risultare graficamente incompatibili con il proprio progetto web e per questo si rende necessario agire sui parametri di stile per modificare colori, font e dimensioni.

CSS per agire sullo stile delle pagine

Per modificare lo stile dei link delle pagine web è necessario utilizzare il CSS (Cascading Style Sheets), un linguaggio che se incorporato alle nostre pagine permette la modifica dello stile di molti parametri grafici come i colori di sfondo, dimensioni delle aree della pagina e il font del testo.

i CSS possono essere usati in varie versioni:

  • Inline style
  • Internal style sheet
  • External style sheet

Inline style

E’ la versione in apparenza più semplice ed immediata, permette di aggiungere modifiche stilistiche ad uno specifico elemento di una pagina html incorporando il codice necessario all’interno della stessa pagina web  lasciando inalterato il resto del contenuto. Questo sistema risulta pratico quando si ha un elemento o poco più da modificare, risulta invece gravoso, al crescere del numero degli elementi da modificare.

Internal style sheet

La versione dei fogli di stile interni invece permette di replicare un unico comando a tutti gli elementi comuni contenuti nella pagina, attraverso istruzioni racchiuse tra i tag <style> inseriti nella sezione head di quella pagina. Il limite di questo metodo consiste nel dover replicare per ogni pagina che si vuole mantenere con la stessa personalizzazione il codice di stile.

External style sheet

La versione con i fogli di stile esterni invece permette di agire attraverso un’unica regola su più elementi comuni contenuti su più pagine, attraverso la semplice inclusione di un link che collega il documento di stile alla pagina web.

Per integrare un file di stile esterno bisogna aggiungere nella sezione head delle pagine web che si desidera modificare il seguente codice:

<head>

<link rel=”stylesheet” type=”text/css” href=”stile.css”>

</head>

Modificare l’aspetto dei link

Per modificare l’aspetto di un link è sufficiente creare una regola CSS dove si indicano le caratteristiche del tag <a>, per farlo basta produrre il seguente codice:

a {

color: red;

}

Oltre al colore è possibile modificare qualsiasi proprietà CSS, come il font e la sua dimensione, il colore di sfondo, l’allineamento, le decorazioni(sottolineato, barrato) e la posizione.

 

Per personalizzare ancora di più l’aspetto dei link è possibile creare delle regole in base allo stato in cui essi si trovano, infatti un ink ha 4 possibili stati:

  • da visitare a:link
  • visitato a:visited
  • indicato dal puntatore del mouse a:hover
  • attivo a:active (con le attuali velocità di internet questo stato risulta impercettibile durante la navigazione)

Per caratterizzare questi stati è sufficiente specificare nel foglio di stile a quale stato ci si riferisce, esempio:

a:link {color: rgb(255,0,0);/* rosso se non visitato*/}

a:visited {color: rgb(0,255,0);/*verde se visitato*/}

a:hover {color: blue;/* blu al passaggio del mouse*/}

a:active {color: rgb(0,0,255);/*nero se attivo*/}

Quando si vuole personalizzare lo stile dei link in base al loro stato è molto importante che nel foglio di stile si specifichi sempre prima lo stato a:link dello stato a:visited e lo stato a:hover prima dello stato a:active.


Spero che questa breve guida ti sia stata d’aiuto, se però ti ritrovi in una situazione che non è stata tratta in questo post non esitare a contattarmi attraverso la pagina contattami

LASCIA UN COMMENTO

Per favore inserisci il tuo commento!
Per favore inserisci il tuo nome qui