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;
Please follow and like us:

Lascia un commento