Elenchiamo di seguito le principali proprietà che servono per la gestione e la tipografia in CSS in css:
| font-family | serve a impostare il tipo di carattere tipografico (Arial, Karla, Roboto ecc.) |
| font-size | serve ad impostare la dimensione del carattere |
| font-weight | serve a definire la consistenza o “peso” visivo del testo |
| font-style | serve per impostare le caratteristiche del testo |
| line-height | serve ad impostare uno spazio tra le righe |
| text-decoration | serve ad impostare particolari decorazioni e stili per il testo |
| text-transform | serve ad trasformare il testo in maiuscolo, minuscolo ecc. |
| line-height | serve ad impostare uno spazio tra le righe |
| letter-spacing | serve ad impostare lo spazio tra le lettere |
| word-spacing | serve ad impostare lo spazio tra le parole |
| text-indent | serve ad indentazione della prima riga |
| white-space | serve a gestire il trattamento degli spazi bianchi di un elemento |
| word-wrap | taglia le parole e va a capo per rispettare le dimensioni fisse del suo contenitore |
| wordbreak | serve a gestire la segmentazione del testo |
Impostare il carattere tipografico del testo
h1 { font-family: Roboto; }
Impostare la dimensione del carattere
h1 { font-size: 15px; }
h2 { font-size: 2em; }
Impostare consistenza/peso del testo
Valori possibili:
| valori numerici | 100 – 200 – 300 – 400 – 500 – 600 – 700 – 800 – 900 dal più leggero al più pesante |
| normal | valore di default, è l’aspetto normale del font ed equivale al valore 400 |
| bold | il carattere acquista l’aspetto che definiamo in genere ‘grassetto’; equivale a 700 |
| lighter | misura relativa; il testo sarà più leggero di quello dell’elemento parente |
| bolder | misura relativa; serve a specificare che una determinata porzione di testo dovrà apparire più pesante a livello visuale rispetto al testo dell’elemento parente |
Impostare lo stile del testo
Valori possibili:
| normal | mantiene il suo aspetto normale |
| italic | formatta il testo in corsivo |
| oblique | simile a italic |
Imposare l'allineamento del testo
Valori possibili:
| left | allineamento a sinistra |
| right | allineamento a destra |
| center | allineamento centrale |
| justify | giustifica il testo |
h1 { text-align: left; }
p { text-align: center; }
Impostiamo la decorazione del testo (sottolineato, barrato ecc.)
Valori possibili:
| none | valore di default |
| underline | il testo sarà sottolineato |
| overline | il testo avrà una linea superiore |
| line-through | il testo sarà barrato |
| blink | testo lampeggiante |
h1 { text-decoration: line-through; }
p { text-decoration: blink; }
Impostare/trasformare la formattazione del testo
Valori possibili:
| none | valore di default |
| capitalize | le prime lettere di ogni parola in maiuscolo |
| uppercase | testo tutto in maiuscolo |
| lowercase | testo tutto in minuscolo |
h1 { text-transform: uppercase; }
p { text-transform:: lowercase; }
Impostare lo spazio tra le righe
Valori possibili: normal, valore con unità di misura e valore percentuale
h1 { line-height: 2px;}
Impostare lo spazio tra le lettere
Valori possibili: normal, valore con unità di misura e valore percentuale
p { letter-spacing: 1px; }
Impostare lo spazio tra le parole
Valori possibili: normal, valore con unità di misura e valore percentuale
p { word-spacing: 3px; }
Impostare indentazione della prima riga
Valori possibili: valore con unità di misura e valore percentuale
p { text-indent: 50px; }
Con questa proprietà è possibile gestire il trattamento degli spazi bianchi di un elemento
| none | valore di default |
| pre | gli spazi bianchi e l’inizio di nuove righe sono mantenuti così come sono nel codice HTML |
| nowrap | gli spazi bianchi sono ridotti a uno e l’andata a capo è disabilitata |
Note: Se nel codice html di una pagina si lasciano spazi bianchi tra le parole, essi saranno automaticamente convertiti in un solo spazio quando la pagina viene visualizzata nel browser; il valore "pre" ci aiuta a mantenere questi spazi.
La proprietà word-wrap risolve il problema di quando ci troviamo di fronte ad un box a larghezza fissa ed al suo interno sono presenti parole molte lunghe.
#box {
width: 200px;
word-wrap: break-word;
}
Molto similmente alla proprietà word-warp ma con ben più opzioni abbiamo la proprietà wordbreak, con cui è possibile stabilire il comportamento di segmentazione del testo.
| normal | è il comportamento di default |
| keep-all | completa le parole possibili sulla stessa riga in base allo spazio disponibile e va accapo (coincide con “normal”) |
| break-all | la parola può essere spezzata in qualsiasi carattere |
Simile a box-shadow ma dedicata agli elementi di tipo testo. Con questa proprietà possiamo gestire l'effetto di ombreggiatura sui testi.
p {
text-shadow: 2px 2px 3px #333;
}
| Primo valore | spostamento dell’ombra sull’asse orizzontale (x) |
| Secondo valore | spostamento dell’ombra sull’asse verticale (y) |
| Terzo valore | imposta il livello di sfocatura (blur) dell’ombra |
| Quarto valore | colore dell’ombra |