Ultimo aggiornamento: 30 luglio 2021

Corso HTML e Css

Lezione 3 - Le proprietà di testo

Lavorare con i testi: le proprietà font e text. I tipi di font, loro stile e dimensioni. L'allineamento del testo, l'indentazione, la sottolineatura ed altre decorazioni.

1 - Impostare le proprietà dei testi.

Nella maggior parte dei documenti HTML il contenuto testuale ha importanza preminente. Contenuto testuale può essere inserito in, praticamente, tutti gli elementi del body. Vale per tanto la pena di dedicare un po di tempo alle proprietà ad esso attinenti.

CSS definisce un gran numero di proprietà testuali, trattazioni più complete saranno indicate nella sezione "approfondimenti", qui ci limiteremo a quelle più comunemente usate la cui conoscenza ci consentirà comunque di padroneggiare adeguatamente l'argomento.

I gruppi di proprietà di cui ci occuperemo sono text e font.

2 - Le proprietà font.

Le proprietà font definiscono l'aspetto dei caratteri

le proprietà font che esamineremo saranno:

font-family;
font-style;
font-size;
font-weight;

font-family e font-style determinano l'aspetto del carattere, font-size e font-weight ne determinano le dimensioni.

2.1 - font-family.

Le font-family definiscono le forme dei caratteri. Traggono origine dai caratteri tipografici, ne esistono un'enorme varietà. Ricadono nelle seguenti categorie:

serif: caratteri con grazie (con trattini alle estremità dei caratteri). Esempi:
- baskerville; cambria; garamond; times;
san-serif: caratteri senza grazie. Esempi:
- arial; helvetica; verdana; tahoma; ...
cursive: caratteri che assomigliano a quelli scritti a mano. Esempi:
- "bradley hand itc"; "Snell roundhand"; "lucida handwriting"; ...
monospace: caratteri a larghezza fissa. Esempi:
- courier; monaco
fantasy: caratteri decorativi. Esempi:
- florence; stencil

2.2 - font-style.

Font-style modifica l'inclinazione dei caratteri:.

normal è il valore di default;
italic o oblique: inclinano i caratteri verso destra.

2.3 - font-size.

Font-size determina la dimensione dei caratteri: il valore di default è medium. Può essere espressa in molti modi

xx-small; x-small; small; medium; large; x-large; xx-large; xxx-large;
smaller; larger;
in pixel. Esempio 10px, 12px
in em dove kem corrisponde alla largezza della lettera "M" di dimensione normal moltiplicata per il numero decimale k (esempio 1.2em)
in percentuale rispetto al normal. Esempio 85%

2.3 - font-weight.

Font-weight modifica lo spessore dei caratteri:

normal è il valore di default;
lighter; bold;bolder: sono valori espressi testualmente dal significato ovvio: più sottile del normale, marcato, più marcato
100; 200; ... 900: sono valori espressi numericamente: da molto sottile a molto marcato

Normal

Tipo serif. font-family:times; font-style:normal; font-size:medium; font-weight:normal;
Trentatre trentini entrarono a Trento tutti e trentatre trotterellando.

Tipo san-serif. font-family:helvetica; font-style:normal; font-size:medium; font-weight:normal;
Trentatre trentini entrarono a Trento tutti e trentatre trotterellando.

Tipo cursive. font-family:"bradley hand itc"; font-style:normal; font-size:medium; font-weight:normal;
Trentatre trentini entrarono a Trento tutti e trentatre trotterellando.

Tipo monospace. font-family:courier; font-style:normal; font-size:medium; font-weight:normal;
Trentatre trentini entrarono a Trento tutti e trentatre trotterellando.

Tipo fantasy. font-family:stencil; font-style:normal; font-size:medium; font-weight:normal;
Trentatre trentini entrarono a Trento tutti e trentatre trotterellando.

Italic

Tipo serif. font-family:times; font-style:italic; font-size:medium; font-weight:normal;
Trentatre trentini entrarono a Trento tutti e trentatre trotterellando.

Tipo san-serif. font-family:helvetica; font-style:italic; font-size:medium; font-weight:normal;
Trentatre trentini entrarono a Trento tutti e trentatre trotterellando.

Tipo cursive. font-family:"bradley hand itc"; font-style:italic; font-size:medium; font-weight:normal;
Trentatre trentini entrarono a Trento tutti e trentatre trotterellando.

Tipo monospace. font-family:courier; font-style:italic; font-size:medium; font-weight:normal;
Trentatre trentini entrarono a Trento tutti e trentatre trotterellando.

Tipo fantasy. font-family:stencil; font-style:italic; font-size:medium; font-weight:normal;
Trentatre trentini entrarono a Trento tutti e trentatre trotterellando.

Large

Tipo serif. font-family:times; font-style:normal; font-size:large; font-weight:normal;
Trentatre trentini entrarono a Trento tutti e trentatre trotterellando.

Tipo san-serif. font-family:helvetica; font-style:normal; font-size:large; font-weight:normal;
Trentatre trentini entrarono a Trento tutti e trentatre trotterellando.

Tipo cursive. font-family:"bradley hand itc"; font-style:normal; font-size:large; font-weight:normal;
Trentatre trentini entrarono a Trento tutti e trentatre trotterellando.

Tipo monospace. font-family:courier; font-style:normal; font-size:large; font-weight:normal;
Trentatre trentini entrarono a Trento tutti e trentatre trotterellando.

Tipo fantasy. font-family:stencil; font-style:normal; font-size:large; font-weight:normal;
Trentatre trentini entrarono a Trento tutti e trentatre trotterellando.

Bold

Tipo serif. font-family:times; font-style:normal; font-size:medium; font-weight:bold;
Trentatre trentini entrarono a Trento tutti e trentatre trotterellando.

Tipo san-serif. font-family:helvetica; font-style:normal; font-size:medium; font-weight:bold;
Trentatre trentini entrarono a Trento tutti e trentatre trotterellando.

Tipo cursive. font-family:"bradley hand itc"; font-style:normal; font-size:medium; font-weight:bold;
Trentatre trentini entrarono a Trento tutti e trentatre trotterellando.

Tipo monospace. font-family:courier; font-style:normal; font-size:medium; font-weight:bold;
Trentatre trentini entrarono a Trento tutti e trentatre trotterellando.

Tipo fantasy. font-family:stencil; font-style:normal; font-size:medium; font-weight:lighter;
Trentatre trentini entrarono a Trento tutti e trentatre trotterellando.

3 - Le proprietà text

Le proprietà text definiscono la disposizione del testo.

Le proprietà che esamineremo saranno:

text-align
text-indent
text-decoration

Esistono molte altre proprietà text. Per sapere quali sono puoi consultare la sezione text della specifica w3.org/tr/CSS22 o cerca fra i tanti altri documenti presenti in rete.

3.1 - text-align.

text-align determina l'allineamento del testo rispetto ai limiti della "content area" del box contenitore.
Può assumere uno fra i seguenti valori:

left: testo allineato sinistra;
right: testo allineato a destra;
center: testo allineato al centro;
justify: testo justificato;

Proviamo i possibili valori nei quattro successivi paragrafi:

Paragrafo con testo allineato a sinistra.

Madrid è piena di ragazzi di nome Paco, che è il diminutivo di Francisco, e a Madrid si racconta la storiella di quel padre che giunto a Madrid inserì su El Liberal un annuncio economico: PACO ATTENDOTI HOTEL MONTANA MARTEDI' MEZZOGIORNO TUTTO PERDONATO PAPA'; e per disperdere gli ottocento giovanotti che risposero all'annuncio dovette intervenire uno squadrone della Guardia Civil.

Paragrafo con testo allineato a destra.

Madrid è piena di ragazzi di nome Paco, che è il diminutivo di Francisco, e a Madrid si racconta la storiella di quel padre che giunto a Madrid inserì su El Liberal un annuncio economico: PACO ATTENDOTI HOTEL MONTANA MARTEDI' MEZZOGIORNO TUTTO PERDONATO PAPA'; e per disperdere gli ottocento giovanotti che risposero all'annuncio dovette intervenire uno squadrone della Guardia Civil.

Paragrafo con testo allineato al centro.

Madrid è piena di ragazzi di nome Paco, che è il diminutivo di Francisco, e a Madrid si racconta la storiella di quel padre che giunto a Madrid inserì su El Liberal un annuncio economico: PACO ATTENDOTI HOTEL MONTANA MARTEDI' MEZZOGIORNO TUTTO PERDONATO PAPA'; e per disperdere gli ottocento giovanotti che risposero all'annuncio dovette intervenire uno squadrone della Guardia Civil.

Paragrafo con testo giustificato:

Madrid è piena di ragazzi di nome Paco, che è il diminutivo di Francisco, e a Madrid si racconta la storiella di quel padre che giunto a Madrid inserì su El Liberal un annuncio economico: PACO ATTENDOTI HOTEL MONTANA MARTEDI' MEZZOGIORNO TUTTO PERDONATO PAPA'; e per disperdere gli ottocento giovanotti che risposero all'annuncio dovette intervenire uno squadrone della Guardia Civil.

3.2 - text-indent.

text-indent determina il rientro della prima riga del testo in un box contenitore.
Può assumere un valore numerico espresso in valore percentuale o in valore assoluto.

Paragrafo con indentazione di 50px:

Madrid è piena di ragazzi di nome Paco, che è il diminutivo di Francisco, e a Madrid si racconta la storiella di quel padre che giunto a Madrid inserì su El Liberal un annuncio economico: PACO ATTENDOTI HOTEL MONTANA MARTEDI' MEZZOGIORNO TUTTO PERDONATO PAPA'; e per disperdere gli ottocento giovanotti che risposero all'annuncio dovette intervenire uno squadrone della Guardia Civil.

Paragrafo con indentazione del 20%:

Madrid è piena di ragazzi di nome Paco, che è il diminutivo di Francisco, e a Madrid si racconta la storiella di quel padre che giunto a Madrid inserì su El Liberal un annuncio economico: PACO ATTENDOTI HOTEL MONTANA MARTEDI' MEZZOGIORNO TUTTO PERDONATO PAPA'; e per disperdere gli ottocento giovanotti che risposero all'annuncio dovette intervenire uno squadrone della Guardia Civil.

3.3 - text-decoration.

Può assumere uno fra i seguenti valori:

none: nessuno, valore di default;
underline: sottolineato;
overlaine: sopralineato;
line-through: attraversato;
blink: lampeggiante;

Sottolineato. Il testo di questo paragrafo è tutto sottolineato.

Sottolineato. In questo paragrafo ho sottolineato solo una parola.

Sopralineato. In questo paragrafo ho sopralineato solo una parola.

Attraversato. In questo paragrafo ho atraversato attraversato solo una parola che avevo scritto male.

Blink può anche non lampeggiare, dipende dal browser.

Esercizi.

Per prima cosa scarica il file HTML_03.rar nella cartella CorsoHTML che avrai creato in precedenza.

Estrai la cartella HTML_03 e apri in Notepad++ i file HTML_03.html e HTML_03.css.

Esegui gli esercizi proposti.

Se vuoi vedere il file dell'esempio prima di scaricarlo clicca qui.

Nota.

Il lettore potrà ora fare altre prove ed eventualmente annotare propri appunti nella sezione dedicata.

Un ultima raccomandazione:durante gli esercizi tenere aperti di due strumenti di validazione del codice: W3C Markup Validation Service e W3C CSS Validation Service e verificare i file su cui si è lavorato dopo aver eseguito le modifiche. I browser sono molto tolleranti, e visulizzano bene le pagine anche in presenza di errori, ma gli errori è meglio evitarli.

Per approfondire.

Nelle specifiche ufficiali del w3 consortium puoi consultare:

Nel sito developer mozilla puoi consultare:

In questo sito puoi vedere:

Lavorare con i testi