Come evidenziare con i colori nei CSS

March 17

Come evidenziare con i colori nei CSS


Cascading Style Sheets consentono ai progettisti web per modificare i colori di primo piano e di sfondo di elementi HTML. Anche se non è ben noto, è anche possibile utilizzare i CSS per modificare il colore di sfondo il browser mostra quando si utilizza un mouse per evidenziare il testo. Questo trucco aggiunge un tocco speciale in più per i vostri disegni e può anche renderli più utilizzabili in alcuni scenari. Cambiare il colore di evidenziazione richiede CSS3, però. Dal momento che non tutti i browser supportano CSS3, si dovrebbe aspettare che i vecchi browser sarà ancora visualizzare il colore predefinito evidenziazione.

istruzione

1 Aprire il file .CSS principale per il tuo sito web in un editor di codice. Se il vostro sito non fa uso di uno, creare ora e aggiungere il seguente codice sotto il tag <title> del tuo sito web:

<Link rel = "stylesheet" type = "text / css" href = "path / to / yourstyle.css" />

Se codificato il tuo sito web per utilizzare un file di intestazione per l'intero sito, allora avete solo bisogno di aggiungere che tag al file di intestazione. Nel caso di un sito HTML statico, è necessario aggiungere questa riga di codice per ogni file HTML.

2 Aggiungere il seguente codice al file .CSS per controllare il colore di evidenziazione:

:: selezione {background: # ff5e99; }

:: - Moz-selezione {background: # ff5e99; }

: selezione {background: # ff5e99; }

I primi due sono le linee specifici del fornitore di codice per quello che le specifiche CSS3 chiamano la "selezione pseudo-classe". browser basati su WebKit Chrome e Safari utilizzano la prima riga di codice, che in questo caso aggiunge un due punti di troppo. Firefox utilizza la seconda riga di codice, che aggiunge un due punti di troppo e il prefisso fornitore "-moz". L'ultimo esempio è il codice che dovrebbe funzionare quando i browser diventano completamente CSS3-compatibile, ma a partire dal 2011 questo non è ancora il caso.

3 Modificare i sei caratteri dopo il segno hash per il valore esadecimale del colore della vostra scelta. Utilizzare un selettore di colori o un grafico di colore, entrambi disponibili gratuitamente on-line. È inoltre possibile utilizzare i nomi dei colori come "nero" o "bianco" per i colori di base, ma si dovrebbe consultare un grafico per coloro che, troppo.

4 Aggiungere gli ID o nomi di classe per i tag HTML e poi indirizzare in CSS di utilizzare diversi colori evidenziazione su diversi elementi delle tue pagine web. Ecco un esempio di un punto impostato con un nome di classe di "verde":

<P class = "green"> Testo verde ... </ p>

È possibile aggiungere il nome di classe "verde" per il maggior numero di tag che si desidera. Utilizzare gli ID quando si desidera raggiungere un solo tag, come ad esempio un tag specifico <p> in una pagina Web.

5 Aggiungere il nome della classe o l'ID per il CSS per indirizzare un tag specifico o un gruppo di tag. Per rendere i paragrafi dato un nome di classe di "verde" un colore di evidenziazione verde, utilizzare il seguente:

p.green :: selezione {background: # 00FF00; }

p.green :: - moz-selezione {background: # 00FF00; }

p.green: selezione {background: # 00FF00; }

Consigli e avvertenze

  • Abbinare il colore di evidenziazione per la tavolozza dei colori del tuo sito web per dare un aspetto più "tirato-insieme".
  • Giocare con i colori per ottenere la combinazione più leggibile del fondo sito, colore di evidenziazione e il colore del testo.