Il buon design tipografico è una parte importante di un sito web di successo. I CSS ti danno un grande controllo sull'aspetto del testo sulle pagine web che costruisci. Ciò include la possibilità di modificare il colore di qualsiasi carattere che si utilizza.
Di seguito, vedremo come cambiare il colore del carattere usando un foglio di stile esterno e uno stile che è usato in un tag di paragrafo. È possibile applicare la stessa proprietà di stile per modificare il colore del carattere su qualsiasi tag che circonda il testo, incluso il etichetta.
Aggiunta di stili per cambiare il colore del carattere
Per questo esempio, è necessario disporre di un documento HTML per vedere le modifiche CSS e un file CSS separato allegato a quel documento. Daremo un'occhiata all'elemento paragrafo, in particolare.
Per cambiare il colore del testo per ogni paragrafo nel file HTML, vai al foglio di stile esterno e digita p {}. Posiziona il colore proprietà nello stile seguita da due punti, come p {color:}. Quindi, aggiungi il valore del colore dopo la proprietà, terminandolo con un punto e virgola: p {color: black;}.
I valori di colore possono essere espressi come parole chiave a colori, numeri di colore RGB o numeri di colore esadecimali. Nel nostro esempio, il testo del paragrafo è cambiato in nero.
Tuttavia, se vuoi cambiare il colore del testo in verde, blu, rosso, ecc., Usare le parole chiave colorate non ti darà la flessibilità che potresti voler creare sfumature diverse. Ecco dove entrano in gioco i valori esadecimali.
p {color: # 000000; }
Questo stile CSS può essere utilizzato per colorare i paragrafi in nero perché il codice esadecimale # 000000 si traduce in nero. Potresti anche usare la stenografia con quel valore esadecimale e scriverlo come # 000 con gli stessi risultati. p {color: # 2f5687; }
Come menzionato sopra, i valori esadecimali funzionano bene quando hai bisogno di un colore che non sia semplicemente nero o bianco. Il valore esadecimale CSS sopra riportato imposterà i paragrafi in un colore blu, ma a differenza della parola chiave "blu", questo codice esadecimale ti dà la possibilità di impostare una tonalità molto specifica di blu, un blu di medio raggio, simile a una lavagna in questo caso . p {color: rgba (47,86,135,1); }
Infine, puoi utilizzare anche i valori di colore RGBA per i colori dei caratteri. RGCA è supportato in tutti i browser moderni, quindi puoi utilizzare questi valori con la certezza che funzionerà per la maggior parte degli spettatori, ma puoi anche impostare un semplice fallback. Questo valore RGBA è uguale al colore blu ardesia specificato in precedenza. I primi tre valori impostano i valori Rosso, Verde e Blu e il numero finale è l'impostazione alfa per la trasparenza. L'impostazione alfa è impostata su 1 per indicare il 100 percento, quindi questo colore non ha trasparenza. Se si imposta tale valore su un numero decimale, ad esempio .85, si traduce in un'opacità dell'85 percento e il colore sarebbe leggermente trasparente. p { colore: # 2f5687; colore: rgba (47,86,135,1);}
Se si desidera evidenziare i valori dei colori a prova di proiettile, imitare il codice CSS precedente. Questa sintassi imposta prima il codice esadecimale e quindi sovrascrive quel valore con il numero RGBA. Ciò significa che qualsiasi browser precedente che non supporta RGBA otterrà il primo valore e ignorerà il secondo. I colori dei caratteri possono essere modificati con un foglio di stile esterno, un foglio di stile interno o uno stile in linea all'interno del documento HTML. Tuttavia, le best practice impongono di utilizzare un foglio di stile esterno per i tuoi stili CSS. Un foglio di stile interno, che sono stili scritti direttamente nella "testa" del documento, viene generalmente utilizzato solo per piccoli siti Web di una pagina. Gli stili in linea dovrebbero essere evitati poiché sono simili ai vecchi tag "font" che abbiamo trattato molti anni fa. Questi stili in linea rendono molto difficile gestire lo stile del carattere poiché è necessario modificarli in ogni istanza dello stile in linea. Altri modi per disegnare una pagina HTML
