NOTA! Questo sito utilizza i cookie e tecnologie simili.

Se non si modificano le impostazioni del browser, l'utente accetta. Per saperne di piu'

Approvo

Capitolo 4: Le istruzioni per il testo: font e text.

 

E' possibile modificare l'aspetto del testo mediante le regole del gruppo font e quelle del gruppo text.

 

Il colore del testo va impostato con color, descritto nel capitolo precedente.

 

Le proprietà vengono ereditate, per cui se specificheremo un aspetto per il testo in un div, esso verrà applicato agli elementi testuali presenti al suo interno, a meno di non definire esplicitamente altre proprietà per certi elementi o classi di elementi.

 

 

Iniziamo dalle proprietà del gruppo font:

  • font-family: [varie possibilità, vd. descrizione]

Imposta il tipo di font da utilizzare.

Ci sono cinque famiglie generiche, ossia (sulla sinistra la famiglia, sulla destra un font specifico appartenente a tale famiglia):

serif Times New Roman
sans-serif arial
cursive Comic Sans
fantasy Allegro BT
monospace Courier
E' possibile inserire i nomi di font specifici separati da virgole e lasciare per ultima l'opzione generica; in pratica, al caricamento della pagina il browsercercherà il font 1 della lista sul sistema e, se presente, lo utilizzerà, altrimenti passerà al font 2, e così via... per questo motivo si consiglia di mettere, per ultimo, uno dei 5 font "generici" (le famiglie), riconosciuti da tutti i sistemi.

Es.: font-family: arial, Verdana, sans-serif.

 

  • font-style: normal | italic | oblique

Utilizzato per creare del testo in corsivo (con italic o con oblique).

Il valore di default è normal (aspetto normale del testo).

Es.: font-style: italic; .

 

  • font-variant: normal | small-caps

Se viene specificato small-caps, il testo apparirà in maiuscoletto.

Es.: font-variant: small-caps;   .

 

  • font-weight: [varie possibilità, vd. descrizione]

    Serve a definire la consistenza ("l'incisività visiva") del testo.

    E' possibile utilizzare le costanti normal (normale), bold (grassetto), bolder (misura relativa alla consistenza specificata per il contenitore; lett.: "più grassetto" del testo che lo circonda) oppure dei valori numerici nel range da 100 a 900 con passo 100 (in pratica: 100, 200, 300, 400, 500, 600, 700, 800, 900); per inciso, nella scala numerica normal equivale a 400, bold a 700.

    Es.: font-weight: bold;    font-weight: 500;   .

 

  • font-size: [varie possibilità, vd. descrizione]

Definisce la dimensione (il carattere) del testo.

E' possibile utilizzare valori ASSOLUTI, espressi mediante:

  • le parole chiave xx-small, x-small, small, medium, large, x-large, xx-large;
  • le unità di misura: px, cm, mm, pt, pc (picas), in, ex (x-height);

o RELATIVI (che si riferiscono, cioè, alla dimensione del testo dell'elemento parente), con:

  • parole chiave: smaller, larger;
  • percentuale; es: 50%;
  • valori in em.

Es.: font-size: 12px;    font-size: 10mm;   font-size: x-large;   font-size: smaller.

 

 

Passiamo quindi alle regole del gruppo text:

  • text-indent: [varie possibilità, vd. descrizione]

Utilizzato per impostare l'indentazione della prima riga del testo.

Valori (numerici) possibili:

  • relativi, in percentuale (rispetto alla larghezza del paragrafo); es.: 10%;
  • assoluti, mediante un numero con una unità di misura, come quelle viste per font-size; es.: 10px; .

 

  • text-align: left | right | center | justify

Allineano il testo, rispettivamente: a sinistra, a destra, centrato, giustificato.

Es.: text-align: justify;   .

 

  • text-decoration: none | underline | overline | linethrough | blink

Underline, linethrough e overline servono a far passare una linea rispettivamente sotto (sottolineatura), in mezzo e sopra il testo.

Blink rende il testo lampeggiante.

Es.: text-decoration: underline;   .

 

  • text-transform: none | capitalize | lowercase | uppercase

Con capitalize, la prima lettera di ogni parola viene resa maiuscola; con uppercase, tutte le lettere vengono rese maiuscole, mentre con lowercase vengono rese minuscole.

Es.: text-transform: capitalize.

 

Infine, letter-spacing e word-spacing: servono ad aumentare, rispettivamente, gli spazi tra le lettere di una parola e tra le parole comprese in un elemento.

 

Valori possibili:

  • normal (valore di default);
  • valore numerico assoluto, seguito da una unità di misura, proprio come visto per font-size.

Es.: letter-spacing: normal;   word-spacing: 10px;    .

 

 
Vai all'inizio della pagina