I collegamenti sono molto comuni nelle pagine Web, ma molti web designer non si rendono conto del potere che hanno con i CSS di manipolare e gestire i loro collegamenti in modo efficace. È possibile definire collegamenti con visitato, hover e stati attivi. Puoi anche lavorare con bordi e sfondi per dare più pizzaz ai tuoi link o renderli simili a pulsanti o persino immagini.
La maggior parte dei web designer inizia definendo uno stile sul un etichetta:
a {colore: rosso; }
Questo modulerà tutti gli aspetti del collegamento (passante, visitato e attivo). Per personalizzare ciascuna parte separatamente, è necessario utilizzare le pseudo-classi di collegamento.
Link Pseudo-Classi
Esistono quattro tipi di base di pseudo-classi di link che puoi definire:
- : link: questo è lo stile predefinito per il collegamento
- : visitato - dopo che è stato fatto clic su un collegamento
- : hover - come un mouse è sospeso su un link (pre-clic)
- : attivo - a destra mentre si fa clic sul collegamento
Per definire una pseudo-classe del link, usalo con un tag nel tuo selettore CSS. Quindi, per cambiare il colore visitato di tutti i tuoi link in grigio, scrivi:
a: visited {color: gray; }
Se stili una pseudo-classe di link, è una buona idea modellarli tutti. In questo modo non sarai sorpreso da risultati estranei. Quindi se vuoi solo cambiare il colore visitato in grigio, mentre tutte le altre pseudo proprietà dei tuoi link rimangono nere, dovresti scrivere:
a: link, a: hover, a: active {color: black; } a: visited {color: gray; }
Cambia i colori dei collegamenti
Il modo più popolare per creare link è quello di cambiare il colore quando il mouse passa sopra di esso:
a {color: # 00f; } a: hover {color: # 0f0; }
Ma non dimenticare che puoi influenzare il modo in cui il link appare mentre cliccano su di esso con la proprietà: active:
a {color: # 00f; } a: active {color: # f00; }
O come il link si guarda dopo averlo visitato con la proprietà: visited:
a {color: # 00f; } a: visited {color: # f0f; }
Per mettere tutto insieme:
a {color: # 00f; } a: visited {color: # f0f; } a: hover {color: # 0f0; } a: active {color: # f00; }
Inserisci sfondi sui collegamenti per aggiungere icone o elenchi puntati
Giocando un po 'con lo sfondo, puoi creare un collegamento con un'icona associata. Scegli un'icona piccola, intorno a 15px per 15px, a meno che il testo non sia più grande. Posiziona lo sfondo su un lato del link e imposta l'opzione di ripetizione su no-repeat. Quindi, collega il link in modo che il testo all'interno del link sia spostato su abbastanza lontano a sinistra oa destra per vedere l'icona.
a {padding: 0 2px 1px 15px; background: #fff url (ball.gif) centro sinistra senza ripetizione; colore: # c00; }
Una volta ottenuta l'icona, puoi impostare un'immagine diversa come icone al passaggio del mouse, attive e visitate per modificare il link:
a {padding: 0 2px 1px 15px; background: #fff url (ball.gif) centro sinistra senza ripetizione; colore: # c00; } a: hover {background: #fff url (ball2.gif) centro sinistra senza ripetizione; } a: active {background: #fff url (ball3.gif) centro sinistra senza ripetizione; }
Crea i tuoi link come pulsanti
I pulsanti sono molto popolari, ma finché non è arrivato CSS, è stato necessario creare pulsanti utilizzando le immagini, il che rende le pagine più lunghe da caricare. Fortunatamente, c'è uno stile di bordo che può aiutarti a creare facilmente un effetto pulsante con i CSS.
a {border: 4px outset; imbottitura: 2px; decorazione del testo: nessuna; } a: active {border: 4px inset; }
Nota, quando metti i colori all'inizio e gli stili inseriti, i browser non hanno la stessa probabilità di renderli come ci si potrebbe aspettare. Quindi, ecco un pulsante più elaborato con bordi colorati:
uno {border-style: solid; border-width: 1px 4px 4px 1px; decorazione del testo: nessuna; imbottitura: 4px; border-color: # 69f # 00f # 00f # 69f; }
E puoi anche influenzare il passaggio del mouse e gli stili attivi di un link pulsante, basta usare quelle pseudo-classi:
a: link {border-style: solid; border-width: 1px 4px 4px 1px; decorazione del testo: nessuna; imbottitura: 4px; border-color: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }
