Perch\u00e9 Cambiare il Colore del Font HTML?<\/h2>\n
Cambiare il colore del font \u00e8 utile perch\u00e9 pu\u00f2 aiutare a migliorare la leggibilit\u00e0 e l’accessibilit\u00e0 del vostro sito web. Per esempio, se il vostro sito usa una combinazione di colori pi\u00f9 scuri, lasciare il colore del carattere nero renderebbe difficile la lettura del testo sulle pagine del sito.<\/p>\n
Un’altra ragione per cui considerare di cambiare il colore del font \u00e8 se avete intenzione di usare un colore pi\u00f9 scuro dalla tavolozza dei colori del vostro marchio. Questa \u00e8 un’altra opportunit\u00e0 per rafforzare il vostro marchio. Costruisce la coerenza del marchio e assicura che il testo in tutti i vostri canali di marketing abbia lo stesso aspetto.<\/p>\n
Detto questo, vediamo come potete definire e cambiare il colore del font HTML<\/a>.<\/p>\n\n Ci sono diversi modi per definire il colore nel web design, incluso il nome, i valori RGB, i codici esadecimali e i valori HSL. Diamo un’occhiata a come funzionano.<\/p>\n I nomi dei colori<\/a> sono il modo pi\u00f9 semplice per definire un colore nei vostri stili CSS. Il nome del colore si riferisce al nome specifico del colore HTML. Attualmente, esistono 140 nomi di colore supportati e potete usare uno qualsiasi di questi colori nei vostri stili. Per esempio, potete usare “blue” per impostare il colore di un singolo elemento sul blu.<\/p>\n Tuttavia, il lato negativo di questo approccio \u00e8 che non tutti i nomi di colore sono supportati. In altre parole, se usate un colore che non \u00e8 nella lista dei colori supportati, non potrete usarlo nel vostro progetto con il suo nome di colore.<\/p>\n Poi abbiamo i valori RGB e RGBA<\/a>. RGB sta per Red (rosso), Gren (verde) e Blue (blu). Definisce il colore mescolando i valori di rosso, verde e blu, in modo simile a come mescolereste un colore su una tavolozza reale.<\/p>\n Il valore RGB si presenta cos\u00ec: RGB(153,0,255). Il primo numero specifica l’input di colore rosso, il secondo specifica l’input di colore verde e il terzo specifica il blu.<\/p>\n Il valore di ogni ingresso di colore pu\u00f2 variare tra 0 e 255, dove 0 significa che il colore \u00e8 totalmente assente e 255 significa che quel particolare colore \u00e8 alla sua massima intensit\u00e0.<\/p>\n Il valore RGBA aggiunge un altro valore al mix, ed \u00e8 il valore alfa che rappresenta l’opacit\u00e0. Va da 0 (non trasparente) a 1 (completamente trasparente).<\/p>\n I codici colore hex funzionano in modo simile ai codici RGB. Sono composti da numeri da 0 a 9 e lettere da A a F. Il codice hex appare cos\u00ec: #800080. Le prime due lettere specificano l’intensit\u00e0 del colore rosso, i due numeri centrali specificano l’intensit\u00e0 del colore verde e gli ultimi due impostano l’intensit\u00e0 del colore blu.<\/p>\n Un altro modo per definire i colori in HTML \u00e8 quello di usare i valori HSL. HSL sta per Hue (tonalit\u00e0), Saturation (saturazione) e Lightness (luminosit\u00e0).<\/p>\n La tinta usa i gradi da 0 a 360. Su una ruota dei colori standard, il rosso \u00e8 circa 0\/360, il verde \u00e8 a 120 e il blu \u00e8 a 240.<\/p>\n La saturazione usa le percentuali per definire quanto \u00e8 saturo il colore. 0 rappresenta il bianco e nero e 100 rappresenta il colore completo.<\/p>\n Infine, la luminosit\u00e0 usa le percentuali in modo simile alla saturazione. In questo caso, 0% rappresenta il nero e 100% il bianco.<\/p>\n Per esempio, il colore viola che abbiamo usato durante questo articolo apparirebbe cos\u00ec in HSL: HSL, come RGB, supporta l’opacit\u00e0. In questo caso, usereste il valore HSLA dove A sta per alfa ed \u00e8 definito in un numero da 0 a 1. Se volessimo abbassare l’opacit\u00e0 del viola dell’esempio, useremmo questo codice: Ora che sapete come definire il colore, vediamo diversi modi per cambiare il colore del carattere HTML.<\/p>\n Prima che HTML5<\/a> fosse introdotto e impostato come standard di codifica, potevate cambiare il colore del carattere usando i tag font. Pi\u00f9 precisamente, si usava il tag font con l’attributo color per impostare il colore del testo. Il Ecco un esempio di come appariva questo codice con il codice colore esadecimale:<\/p>\n E questo \u00e8 come potreste impostare il colore del testo in viola usando il nome del colore:<\/p>\n Tuttavia, il tag Quindi se il tag <font> non \u00e8 pi\u00f9 supportato, come si fa a cambiare il colore del carattere in HTML? La risposta \u00e8 con i fogli di stile a cascata o CSS<\/a>.<\/p>\n Per cambiare il colore del font HTML con i CSS, userete la propriet\u00e0 CSS color abbinata al selettore appropriato. I CSS<\/a> vi permettono di usare i nomi dei colori, i valori RGB, hex e HSL per specificare il colore. Ci sono tre modi di usare i CSS per cambiare il colore del carattere.<\/p>\n Il CSS in linea (o inline) viene aggiunto direttamente al vostro file HTML. Userete il tag HTML come <p> e poi lo stilizzerete con la propriet\u00e0 del colore CSS in questo modo:<\/p>\n Se volete usare un valore esadecimale, il vostro codice sar\u00e0 simile a questo:<\/p>\n Se volete usare il valore RGB, lo scriverete cos\u00ec:<\/p>\n Infine, usando i valori HSL, userete questo codice:<\/p>\n Gli esempi qui sopra vi mostrano come cambiare il colore di un paragrafo sul vostro sito web. Ma non dovete limitarvi solo ai paragrafi: potete cambiare anche il colore del font dei vostri titoli e dei link.<\/p>\n Per esempio, sostituendo il tag Se volete cambiare il colore di sfondo dell’intero paragrafo o di un titolo, potete farlo in modo molto simile a come cambiereste il colore del font. Dovete invece usare l’attributo Il CSS incorporato (o embedded) si trova all’interno dei tag Il codice sar\u00e0 simile a questo se volete usare il nome del colore:<\/p>\n Il codice qui sopra cambier\u00e0 il colore di ogni paragrafo della pagina in viola. Simile al metodo CSS in linea, potete usare diversi selettori per cambiare il colore del font dei titoli e dei link.<\/p>\n Se volete usare il codice esadecimale, ecco come sarebbe il codice:<\/p>\n L’esempio qui sotto usa i valori RBGA cos\u00ec potete vedere un esempio di impostazione dell’opacit\u00e0:<\/p>\n E il codice HSL sarebbe come questo:<\/p>\n Infine, potete usare il CSS esterno<\/a> per cambiare il colore del font sul vostro sito web. Il CSS esterno \u00e8 un CSS inserito in un file separato, di solito chiamato style.css o stylesheet.css.<\/p>\n Questo foglio di stile \u00e8 responsabile di tutti gli stili del vostro sito e specifica i colori e le dimensioni dei font, i margini, i padding, le famiglie di font, i colori di sfondo e altro. In breve, il foglio di stile \u00e8 responsabile dell’aspetto visivo del vostro sito.<\/p>\n Per cambiare il colore del carattere con CSS esterno, dovreste usare i selettori<\/a> per dare stile alle parti di HTML che volete. Per esempio, questo codice cambier\u00e0 tutto il testo del corpo del vostro sito:<\/p>\n Ricordate, potete usare i valori RGB, hex e HSL e non solo i nomi dei colori per cambiare il colore del font. Se volete modificare il foglio di stile, vi raccomandiamo di farlo in un editor di codice<\/a>.<\/p>\n Cos\u00ec ora sapete come usare i CSS per cambiare il colore del font. Ma quale dei tre metodi usare?<\/p>\n Se usate il codice CSS in linea, lo aggiungerete direttamente nel vostro file HTML. In generale, questo metodo \u00e8 adatto per correzioni rapide. Se volete cambiare il colore di uno specifico paragrafo o titolo in una singola pagina, questo metodo \u00e8 il pi\u00f9 veloce e il meno complicato.<\/p>\n Tuttavia, gli stili in linea possono rendere la dimensione del vostro file HTML pi\u00f9 grande. Pi\u00f9 grande \u00e8 il vostro file HTML, pi\u00f9 tempo impiegher\u00e0 la vostra pagina web a caricarsi. Oltre a questo, i CSS in linea possono rendere l\u2019HTML disordinato. Per questo, cambiare il colore del font HTML con il metodo dei CSS in linea \u00e8 generalmente sconsigliato.<\/p>\n Il CSS incorporato \u00e8 posizionato tra i tag <head> e all’interno dei tag <style>. Come il CSS in linea, va bene per correzioni veloci e per sovrascrivere gli stili specificati in un foglio di stile esterno.<\/p>\n Una notevole distinzione tra gli stili in linea e incorporati \u00e8 che si applicano a qualsiasi pagina in cui vengono caricati i tag head, mentre gli stili in linea si applicano solo alla pagina specifica in cui si trovano, tipicamente all’elemento a cui mirano in quella pagina.<\/p>\n L’ultimo metodo, il CSS esterno, usa un foglio di stile dedicato per definire i vostri stili visivi. In generale, \u00e8 meglio usare un foglio di stile esterno per mantenere tutti gli stili in un unico posto da cui poterli modificare con facilit\u00e0. Questo permette anche di separare la presentazione e il design, quindi il codice \u00e8 facile da gestire e mantenere.<\/p>\n Tenete presente che gli stili in linea e incorporati possono sovrascrivere gli stili impostati nel foglio di stile esterno.<\/p>\n I due metodi principali per cambiare i colori dei font HTML sono l’utilizzo del tag font o degli stili CSS. Entrambi questi metodi hanno i loro pro e contro.<\/p>\n Il tag font HTML \u00e8 facile da usare, quindi questo \u00e8 un pro a suo favore. In genere, i CSS sono pi\u00f9 complicati e richiedono pi\u00f9 tempo per essere imparati rispetto allo scrivere un semplice Anche se il tag font \u00e8 facile da usare, non dovreste usarlo se il vostro sito web usa l’HTML. Come detto prima, il tag font \u00e8 ormai deprecato in HTML5. L’utilizzo del codice deprecato dovrebbe essere evitato poich\u00e9 i browser potrebbero smettere di supportarlo in qualsiasi momento. Questo pu\u00f2 portare il vostro sito web a rompersi e a non funzionare correttamente o, peggio, a non essere visualizzato dalle persone che lo visitano.<\/p>\n I CSS, come il tag font, hanno i loro pro e contro. Il vantaggio pi\u00f9 significativo dell’utilizzo dei CSS \u00e8 che \u00e8 il modo corretto per cambiare il colore dei font e specificare tutti gli altri stili per il vostro sito web.<\/p>\n Come menzionato prima, permette di separare la presentazione dal design, il che rende il vostro codice pi\u00f9 facile da gestire e mantenere.<\/p>\n Il lato negativo \u00e8 che CSS e HTML5 sono pi\u00f9 complessi da apprendere e richiedono pi\u00f9 tempo per essere scritti correttamente rispetto al vecchio modo di scrivere il codice.<\/p>\n Tenete presente che con i CSS avete diversi modi per cambiare il colore del font e ognuno di questi metodi ha i suoi pro e contro, come discusso in precedenza.<\/p>\n Ora che sapete come cambiare il colore del font HTML, ecco alcuni consigli che vi aiuteranno.<\/p>\n Invece di scegliere i colori a caso, usate i selettori di colore<\/a> per selezionare i colori giusti. Il vantaggio di un selettore di colori \u00e8 che vi dar\u00e0 il nome del colore e i valori esadecimali, RGB e HSL corretti che dovete usare nel vostro codice.<\/p>\n Il testo scuro con lo sfondo scuro cos\u00ec come il testo chiaro con lo sfondo chiaro non funzionano bene insieme. Renderanno il testo del vostro sito difficile da leggere. Tuttavia, potete usare uno strumento di verifica di contrasto<\/a> per assicurarvi che i colori del vostro sito siano accessibili e che il testo sia facile da leggere.<\/p>\nModi per Definire il Colore<\/h2>\n
Nome del Colore<\/h3>\n
![\"Schermata](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/red-color-name.png\")
Valori RGB e RGBA<\/h3>\n
![\"Valori](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/rgb-values.png\")
Valore HEX<\/h3>\n
![\"Schermata](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/hex-values.png\")
Valori HSL e HSLA<\/h3>\n
![\"Schermata](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/HSL-color-values.png\")
hsl(276, 100%, 50%)<\/code>.<\/p>\nhsl(276, 100%, 50%, .85)<\/code> .<\/p>\nOpzione Vecchia: i Tag
<font><\/code><\/h2>\ncolor<\/code> era specificato o con il suo nome o con il suo codice esadecimale.<\/p>\n<font color=\"#800080\">Questo testo \u00e8 viola.<\/font><\/code><\/pre>\n<font color=\"purple\">Questo testo \u00e8 viola.<\/font> <\/code><\/pre>\n<font><\/code> \u00e8 deprecato in HTML5 e non \u00e8 pi\u00f9 utilizzato. Cambiare il colore del font \u00e8 una decisione di design e il design non \u00e8 lo scopo primario dell’HTML. Pertanto, ha senso che il tag <font><\/code> non sia pi\u00f9 supportato in HTML5.<\/p>\nNuova Opzione: Stili CSS<\/h2>\n
CSS in Linea (Inline)<\/h3>\n
<p style=\"color: purple\">Questo \u00e8 un paragrafo viola.<\/p><\/code><\/pre>\n<p style=\"color:#800080\">Questo \u00e8 un paragrafo viola.<\/p><\/code><\/pre>\n<p style=\"color:RGB(153,0,255)\">Questo \u00e8 un paragrafo viola.<\/p><\/code><\/pre>\n<p style=\"color:hsl(276, 100%, 50%)\">Questo \u00e8 un paragrafo viola.<\/p><\/code><\/pre>\n<p><\/code> qui sopra con <h2><\/code> cambierete il colore del testo del titolo, mentre sostituendolo con il tag <a><\/code> cambierete il colore di quel link. Potete anche usare l’elemento <span><\/a> per colorare qualsiasi quantit\u00e0 di testo.<\/p>\nbackground-color<\/code> e usare il nome del colore, i valori hex, RGB o HSL per impostare il colore.
\nEcco un esempio:<\/p>\n<p style=\"background-color: purple\"><\/code><\/pre>\nCSS Incorporato (Embedded)<\/h3>\n
<style><\/code> e posizionato tra i tag head del vostro documento HTML.<\/p>\n<!DOCTYPE html>\n<html>\n<head>\n <style>\n <p> {\n color: purple;\n }\n<\/style>\n<\/head><\/code><\/pre>\n<!DOCTYPE html>\n<html>\n<head>\n <style>\n <p> {\n color: #800080;\n }\n <\/style>\n<\/head><\/code><\/pre>\n<!DOCTYPE html>\n\n<html>\n\n<head>\n\n<style>\n\n<p> {\n\ncolor: RGB(153,0,255,0.75),\n\n}\n\n<\/style>\n\n<\/head><\/code><\/pre>\n<!DOCTYPE html>\n<html>\n<head>\n <style>\n <p> {\n color: hsl(276, 100%, 50%),\n }\n <\/style>\n<\/head><\/code><\/pre>\nCSS Esterno<\/h3>\n
body {color: purple;}<\/code><\/pre>\nIn linea, Incorporato o Esterno?<\/h3>\n
Tag Font o Stili CSS: Pro e Contro<\/h2>\n
Pro e Contro dei Tag Font HTML<\/h3>\n
<font color=\"purple\"><\/code>. Se avete un vecchio sito web che non usa HTML5, allora il tag font \u00e8 un metodo valido per cambiare il colore del font.<\/p>\nPro e Contro dei CSS<\/h3>\n
Suggerimenti per Cambiare il Colore del Carattere HTML<\/h2>\n
Usare un Selettore di Colori<\/h3>\n
![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/Color-picker-tool.png\")
Controllare il Contrasto<\/h3>\n
![\"Schermata](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/Checking-contrast.png\")
Trovare il Colore Usando il Metodo dell’Ispezione del Codice<\/h3>\n
![\"Schermata](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/Using-Inspect-to-get-color-codes.png\")