Stilizzazione del testo

Font, colori, dimensioni del testo...

HTML di esempio

Font

Per cambiare il colore del testo:

Per scegliere un font (attenzione: verrà applicato solo se il font esiste nel computer dell'utente):

Esiste una lista di font "web-safe" che possono essere visualizzati da tutti i browser:

In questo sito è possibile vedere una lista più estesa dei font, con le percentuali di compatibilità nei sistemi Windows e Mac:

https://www.cssfontstack.com/

CSS definisce cinque nomi generici di font: saranno il browser e il sistema operativo a decidere poi quale font usare effettivamente:

Non avendo la garanzia che un font sia effettivamente installato, è possibile specificare delle liste di font per cui se il primo non è presente nel sistema si passa al successivo:

Google fonts

Google mette a disposizione una serie di font facili da inserire nel proprio sito:

https://fonts.google.com/

Dopo aver scelto i font desiderati, viene fornito il codice sorgente da aggiungere al proprio CSS per farli funzionare:

 

Dimensione del testo

Quando si dimensiona il testo di una pagina, è una buona consuetudine impostare il font-size del documento a 10px. In questo modo quando si usano le unità di misura relative come rem, il calcolo è facile, ad esempio:

1.2 rem equivale a 12px

Font style, weight, text-transform, text-decoration

• font-style: imposta il corsivo (normal, italic, oblique)
• font-weigth: imposta lo spessore del grassetto (normal, bold, lighter, bolder, valori da 100 a 900)
• text-transform: permette di mostrare tutto in maiuscolo (none, uppercase, lowercase, capitalize, full-width)
• text-decoration: sottolineature (none, underline, overline, line-through)

Ombreggiature

Si impostano offset orizzontale e verticale, raggio di sfocatura, colore dell'ombra:

Layout del testo

• text-align (allineamento): left, right, center, justify
• line-height (altezza della linea): ad es. 1.6
• letter-spacing (spaziatura tra le lettere): ad es. 4px
• word-spacing (spaziatura tra le parole): ad es. 4px

Stilizzazione dei link

Come abbiamo già visto è possibile stilizzare in modo differente i vari stati di un link:

• link (non visitato)
• visited
• hover
• focus
• active

 

Approfondimenti

Stilizzazione delle liste

Stilizzazione dei link

Web fonts

Esercizi

Apri la seguente pagina che elenca i vari tipi di fibra ottica:

https://www.gqitalia.it/news/2018/10/12/fibra-ottica-le-tipologie-qual-e-quella-vera-come-sceglierla-e-velocita

Come vedrai ci sono un titolo principale, due titoli di sezione (tipologie e velocità), e poi dei titoli per le varie tipologie di fibra.

Ricrea la pagina definendo lo stile per i tre livelli di titolo H1, H2, H3 impostano tre dimensioni diverse e scegliendo tre caratteri diversi dai Google Fonts.

Scegli dei colori per lo sfondo e per i testi a tuo piacere.

• HTML
• CSS