Link e pseudoclassi CSS

Andrea Leti — Mon, 17 Aug 2009 21:31:43 +0000

Prima di parlare della gestione dei link bisogna capire cosa sono le pseudo-classi. Grazie a questa secondo me potentissima funzione dei css, che per altro è assolutamente facile da utilizzare, possiamo definire diversi stili ai nostri collegamenti ipertestuali piu comodamente chiamati link.

Una pseudo-classe non definisce infatti un elemento ma uno stato di quest’ultimo.

In buona sostanza imposta uno stile per un elemento al verificarsi di certo stato.
Cosa significa: non definisce infatti unelemento ma uno stato di quest’ultimo?

Quando crei un link involontariamente hai dato al browser 4 principali direttive o stati da interpretare, che sono: link non visitato, visitato, passaggio del mouse sul link,e click.
Questi 4 stati del link possono essere definiti singolarmente andando a creare un bell’effetto nelle nostre pagine.

A livello sintattico le pseuso-classi non possono essere mai dichiarate da sole, ma per la loro stessa natura devono sempre appoggiarsi ad un selettore. ma vediamo un esempio semplice:

a:link {color: #ff0000;}

La regola vuol dire: i collegamenti ipertestuali () non visitati (:link) avranno il colore rosso. Da qui risulta più chiaro il concetto espresso all’inizio: la pseudo-classe :link definisce uno stato di un link (colore quando non è stato visitato). Appena ciò dovesse avvenire, il testo non sarà più rossoe, perchè la condizione originaria è venuta meno e assumerà il colore di predefinito dal browser, questo se non abbiamo definito lo stato di VISITED cioè link visitato.

Torniamo alla sintassi. La pseudo-classe (tutte iniziano con i due punti) segue senza spazi l’elemento.

Subito dopo si crea nel modo consueto il blocco delle dichiarazioni.
Una pseudo-classe può anche essere associata a selettori di tipo classe. I costrutti possibili sono due. Il primo è quello sancito nella specifica CSS1. La pseudo-classe doveva seguire la dichiarazione della classe:

a.collegamento:link {color: green;}

Come va letta questa regola? Avranno il testo verde (green) solo i link non visitati che abbiano come attributo class=”collegamento”. Sarà verde questo collegamento:

 LINK

A partire dalla specifica CSS2 è consentita anche questa sintassi:

a:link.collegamento

in cui la classe segue la pseudo-classe. Significato e risultati sono comunque identici al primo esempio. Il primo tipo di sintassi garantisce una maggiore compatibilità con i browser più datati. Gli esempi e la sintassi presentati valgono per tutte le pseudo-classi.

Detto questo passiamo ora capire quali sono gli stati che un link può assumere e come definire i parametri per ciascuno di essi. Gli stati che un link può assumere abbiamo detto sono 4: link non visitato, visitato, passaggio del mouse sul link e click. Nel linguaggio CSS si traducono in :LINK, :HOVER, :VISITED e :ACTIVE.

Prendiamo come esempio lo stile utilizzato dal nostro sito per i link nel menu quindi colore sempre nero e semplice sottolineatura al passaggio del mouse:

Per questo esempio abbiamo utilizzato un blocco di codice incorporato alla pagina e lo riconosciamo subito dalla presenza del tag . Ricordiamo inoltre, che per utilizzare gli stili incorporati alla pagina di deve scrivere il codice fra e .

Le pseudoclassi dinamiche: :hover, :focus, :active.

Le pseudoclassi dinamiche rispondono come per javascript ad azioni o eventi compiuti esclusivamente dall’utente, come il posizionamento del puntatore del mouse su un determinato oggetto, la selezione di un elemento o l’attivazione di un oggetto.

Ecco un piccolo trucco.

Anche se queste ultime pseudoclassi possano essere associate agli elementi piu disparati come paragrafi, campi di un form, bottoni ecc Internet Explorer 6, sempre lui…, e precedenti versioni per Windows le supporta solo quando vengono applicate ai collegamenti, mentre IE 7 suppora la pseudoclasse :hover su tutto. Essendo un linguaggio a CASCATA il css è importante scrivere bene il codice onde evitare inutili conflitti di “stato” per i vari link. Facciamo subito un esempio:

a:link{ .. }
a:visited:{  .. }
a:hover{ ... }
a:focus{ ... }
a:active{ ... }

In questo modo non ci saranno conflitti di stato di un collegamento poiche tutte le pseudoclassi hanno la medesima importanza, se per esempio, la regola associata a :visited fosse scritta dopo la regola:hover allora per tutti i collegamenti gia visitati la regola hover non avrebbe piueffetto poiche verrà sovrascritta dalla regola associata a :visited.

Spero vi sia utile questo articolo. Adesso avete le conoscenze necessarie per utilizzare i CSS per la gestione dei vostri link, cosa bisogna fare: provare provare e….vediamo un po provare si si provare! L’unico modo per rendersi conto di cosa si stia facendo. La semplice lettura non basta! Alla prossima lezione!

Tutorial Photoshop | WebDesign » link css

Link e pseudoclassi CSS

Le pseudoclassi dinamiche: :hover, :focus, :active.

Ecco un piccolo trucco.