disign.it | CSS: differenziare i link | a digital sign for a best design!
A digital sign for a best design
Css tips and tricks 2.181 visualizzazioni

CSS: differenziare i link

27/02/2012

Attraverso CSS possiamo differenziare la formattazione dei link anche in base alla destinazione del link stesso: ovvero visualizzare diversamente i link interni dai link a siti esterni, oppure i link su email o su formati di file specifici (musicali, video, zippati etc etc).
Una volta compresa la sintassi, estremamente semplice, possiamo sbizzarirci in moltissime differenziazioni con pochisisme righe di codice!
Ecco un esempio (in cui modifico solo il colore, solo per brevità):

        /*  qualsiasi link esterno */
a[href^="http://"] {
        color: red;
}

        /* link a indirizzo specifico */
a[href="http://www.google.it"] {
        color: green;
}

        /* link interni */
a[href^="/"], a[href^=".."] {
        color: blue;
}

        /* link email */
a[href^="mailto:"] {
        color: orange;
}

        /* link a pdf */
a[href$=".pdf"] {
        color: purple;
}

        /* link a file mp3 */
a[href$=".mp3"] {
}

        /* link a file zippati */
a[href$=".zip"] {

}

← Php: funzione per header location Javascript: intercettare variabile GET →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.