Testo

I colori dei testi nei fogli di stile

Il colore può essere espresso come:

• esadecimale;
• rgb;
• nome del colore;

La notazione esadecimale è molto simile a quella rgb, in entrambi viene specificata una combinazione dei tre colori base. Per i nomi dei colori in passato si poteva scegliere tra 16 colori standard, oggi la lista è di 140 colori.

La proprietà consente di impostare un colore per il testo di un elemento, è una proprietà che viene ereditata dagli elementi figli.

Formattare il testo

Possiamo impostare il tipo di carattere, le dimensioni, il corsivo e il grassetto:

• font-family – permette di impostare uno o più font, se il primo font non è presente nel dispositivo si passa al secondo e così via. Le famiglie di caratteri tipografici sono:
  serif, san-serif, coursive, fantasy, monospace;
• font-size – permette di impostare la dimensione del testo. Il valore può essere espresso in px, pt o em, si possono utilizzare le keyword:
  xx-small, x-small, small, medium, large, x-large e xx-large;
• font-style – permette di impostare lo stile normal o italic;
• font-weight – permette di impostare il testo normale o bold;

Anche per questa proprietà esiste la versione compatta, gli unici valori obbligatori sono font-size e font-family.

Un’altra proprietà è text:

• text-align – possiamo definire l’allineamento (left, right, center, justify);
• text-decoration – applicare una decorazione (none, underline, overline, line-through);
• text-indent – specifica il rientro della prima linea, espresso in px;
• text-trasform – modificare il case di un testo (none, capitalize, uppercase, lowercase);

Possiamo definire la disposizione delle lettere e delle parole.

• letter-spacing – regola lo spazio tra le singole lettere espresso in px;
• word-spacing – regola lo spazio tra le diverse parole espresso in px;
• white-spacing – regola gli spazi bianchi in presenza di testo
  • none – più spazi bianchi vengono ridotti a uno;
  • pre – si comporta come il tag pre;
  • nowrap – spazi bianchi ridotti a uno e disabilitato ritorno a capo;
• line-height – per definire l’altezza della linea
  • normal – il browser calcola automaticamente l’altezza;
  • valore numerico con unità di misura – specifica l’altezza della linea;
  • valore numerico senza unità di misura – un moltiplicatore rispetto all’altezza del font;
  • percentuale – calcolata in percentuale rispetto all’altezza del font;