Proprietà Per Il Testo

Prerequisiti: struttura HTML, sintassi di una regola CSS e inserimento dei fogli di stile.

Con CSS possiamo modificare la presentazione del testo senza riscrivere i contenuti HTML. In questa lezione le proprietà sono divise per funzione. Ogni tabella contiene una spiegazione, il codice HTML, una regola CSS completa e il risultato nel browser.

Non occorre memorizzare tutti i valori. Parti dalle proprietà più frequenti: color, font-family, font-size, font-weight, text-align e line-height. Le altre rispondono a esigenze più specifiche.

Come leggere e provare gli esempi

Il selettore p individua i paragrafi; le dichiarazioni tra parentesi graffe ne modificano la presentazione. Ogni anteprima è una pagina separata: la regola di una riga non modifica gli esempi delle altre righe.

p {
    color: navy;
    font-size: 18px;
}

Per provare un esempio, inserisci il frammento HTML nel <body> e il CSS in un tag <style> nella <head>, oppure in un foglio esterno collegato alla pagina. Nel file CSS non si inseriscono i tag <style>.

Queste proprietà definiscono il colore e le caratteristiche del carattere. Il loro effetto dipende anche dai font disponibili sul dispositivo.

<p>Questo testo è blu.</p>

p {
    color: blue;
}

<p>Un carattere senza grazie.</p>

p {
    font-family: Arial, Helvetica, sans-serif;
}

<p>Questo testo è grande.</p>

p {
    font-size: 28px;
}

<p>Questo testo è in grassetto.</p>

p {
    font-weight: bold;
}

<p>Questo testo è in corsivo.</p>

p {
    font-style: italic;
}

<p>Un titolo in maiuscoletto</p>

p {
    font-variant-caps: small-caps;
}

Queste proprietà controllano l’allineamento del testo nel suo contenitore e alcuni effetti visivi. Non cambiano il significato degli elementi HTML.

<p>Questo testo è centrato.</p>

p {
    text-align: center;
}

<p>Una frase sottolineata.</p>

p {
    text-decoration: underline;
}

<p>Una frase da evidenziare.</p>

p {
    text-transform: uppercase;
}

<p>Un titolo con ombra</p>

p {
    font-size: 26px;
    text-shadow: 2px 2px 3px #999999;
}

La leggibilità dipende anche dalla distanza tra righe, lettere e parole. Queste proprietà agiscono sul testo; margin e padding, invece, gestiscono gli spazi del riquadro.

<p>Questa frase occupa più righe.<br>Osserva lo spazio tra una riga e l’altra.<br>Il testo rimane più arioso.</p>

p {
    font-size: 18px;
    line-height: 1.6;
}

<p>LETTERE DISTANZIATE</p>

p {
    letter-spacing: 2px;
}

<p>Queste parole sono più distanti.</p>

p {
    word-spacing: 10px;
}

<p>La prima riga di questo paragrafo comincia con un rientro. Le righe successive tornano al normale margine del testo. Il risultato dipende dalla larghezza disponibile.</p>

p {
    text-indent: 30px;
}

Queste proprietà servono quando il testo contiene spazi da conservare, parole molto lunghe oppure deve rimanere su una sola riga.

<p>Nome:    Anna
Corso:   CSS</p>

p {
    white-space: pre-wrap;
}

<p>UnIndirizzoMoltoLungoSenzaSpaziCheDeveRimanereNelRiquadro</p>

p {
    width: 180px;
    border: 1px solid #999999;
    overflow-wrap: anywhere;
}

<p>Questa frase è troppo lunga per essere mostrata interamente.</p>

p {
    width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Gli stili del testo possono essere ereditati

Molte proprietà del testo, come color e font-family, vengono ereditate dai discendenti quando questi non hanno un proprio valore applicabile. Per impostare un aspetto generale della pagina possiamo partire dal body:

body {
    font-family: Arial, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #333333;
}

h1 {
    color: #17365d;
    font-size: 2rem;
}

Il titolo usa il carattere impostato sul body, ma ha un proprio colore e una propria dimensione. Non tutte le proprietà CSS sono ereditate: per esempio margin e padding normalmente non lo sono.

In una pagina reale combiniamo più dichiarazioni. Qui distinguiamo il titolo dal paragrafo e utilizziamo un’altezza di riga che facilita la lettura.

<h1>Imparare il CSS</h1>
<p>Il CSS permette di scegliere colori, caratteri e spaziature.
Un testo ben organizzato rende più semplice leggere una pagina.</p>

body {
    font-family: Arial, sans-serif;
    color: #333333;
}

h1 {
    color: #17365d;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
}

p {
    font-size: 18px;
    line-height: 1.6;
}

La proprietà abbreviata font

Dopo aver imparato le singole proprietà, possiamo utilizzare font per raccoglierne diverse in una dichiarazione:

p {
    font: italic bold 18px/1.6 Arial, sans-serif;
}

Questo esempio imposta corsivo, grassetto, dimensione di 18 pixel, altezza di riga pari a 1,6 e famiglia Arial con alternativa sans-serif. La dimensione e la famiglia devono essere presenti. La proprietà abbreviata reimposta anche le proprietà del font che non vengono specificate: all’inizio è più semplice usare le dichiarazioni separate.

• Scegli un colore che si distingua chiaramente dallo sfondo.
• Usa dimensioni adeguate e controlla il risultato anche su uno schermo piccolo.
• Lascia spazio tra le righe: puoi partire da line-height: 1.5 o 1.6 e valutare il testo concreto.
• Evita interi paragrafi in maiuscolo e spaziature eccessive tra le lettere.
• Usa ombre e decorazioni con moderazione.
• Con justify controlla che non compaiano spazi troppo ampi tra le parole, soprattutto nelle colonne strette.
• Se usi text-overflow: ellipsis, prevedi un modo per leggere il contenuto completo quando è necessario.

Prova a rispondere prima di aprire le risposte.