Corsi on-line

Stili diversi per estensioni differenti

Si immagini di avere una pagina Web in cui sono presenti i collegamenti a diverse tipologie di risorse, non sarebbe male associare ad essi un’immagine rappresentativa del contenuto linkato; ciò è possibile in modo abbastanza semplice sfruttando le potenzialità di CSS e alcuni metacaratteri.

Si osservi il seguente esempio:

a[href^="mailto:"]
{
padding-right: 10px;
background: url(posta.gif) no-repeat center right;
}

Il metacarattere “^” viene utilizzato per rilevare la presenza di una sotto-stringa (in questo caso ” =”mailto:” “) all’inizio di una stringa, ogni volta che la sotto- stringa richiesta viene intercettata in un link ad essa viene associata l’immagine di sfondo definita dallo stile.

Lo stesso potrebbe avvenire nel caso in cui si desideri intercettare l’estensione di un file:

a[href$=".docx"]
{
padding-right: 1opx;
background: url(msword.gif) no-repeat center right;
}
a[href$=".pdf"]
{
padding-right: 1opx;
background: url(pdf.gif) no-repeat center right;
}

In questo caso viene utilizzato però il metacarattere “$” che, a differenza di “^”, permette di rilevare una sotto-stringa (nel nostro caso l’estensione del file linkato) alla fine di una stringa su cui effettuare la ricerca.

Post correlati
I più letti del mese
Tematiche