Mr. Webmaster Menu
  • Home
  • Cerca
  • Didattica
    • A
    • Android
    • Apache
    • Apple
    • ASP
    • ASP.Net
    • C
    • Cloud
    • CMS
    • CSS
    • D
    • Database
    • E
    • Editor
    • G
    • Grafica
    • H
    • Hosting
    • HTML
    • J
    • Java
    • Javascript
    • jQuery
    • L
    • Leggi e Fisco
    • Linux
    • M
    • Mobile
    • MySQL
    • N
    • NET Framework
    • P
    • Photoshop
    • PHP
    • Primi Passi
    • Programmazione
    • R
    • Reti
    • Ruby
    • S
    • Sicurezza
    • Social Media
    • SQL
    • W
    • Web Design
    • Web Marketing
    • Web Server
    • Windows
    • WordPress
    • X
    • XML
    • Di tendenza
    • Android Studio
    • Bootstrap
    • GDPR
    • Hosting Wordpress
    • Node.js
    • Registrazione Domini
  • Download
    • Software
    • Script
    • Plugin CMS
    • Flash Movies
    • Sound Loops
    • Templates
    • Web Grafica
    • Font Gratis
  • Risorse
    • SEO Tools
    • WebApps
  • News
  • Blog
  • Forum
  • Network
    • Toolset.it
    • SiteMarket.it
    • Codalo.it
  • Corsi on-line
Mr. Webmaster → CSS → Guida CSS → Stilizzare e formattare il testo

Stilizzare e formattare il testo coi CSS

  • CommentaScrivi un commento
  • ForumDiscuti sul forum
  • PrecedenteDefinire un colore per il testo: la proprietà color
  • SuccessivoGestire la disposizione del testo nello spazio
  • Pubblicato il
  • 17/02/2015
  • Autore
  • Massimiliano Bossi

Nella precedente lezione abbiamo già visto un'importante proprietà del testo, cioè la proprietà color attraverso la quale è possibile definire il colore degli elementi testuali. Vediamo adesso quali sono le principali proprietà CSS per la stilizzazione del testo.

Per prima cosa vediamo le proprietà della famiglia font attraverso le quali è possibile impostare il tipo di carattere da utilizzare, le dimensioni del font, il corsivo ed il grassetto. Queste proprietà sono:

  • font-family
  • font-size
  • font-style
  • font-weight

Vediamo un esempio che contempla tutte e quattro queste proprietà CSS:

p
{
  font-family: verdana, arial, sans-serif;
  font-size: 12px;
  font-style: italic;
  font-weight: bold;
}

Vediamole una ad una.

Continua dopo la pubblicità...

font-family

La proprietà font-family permette di impostare uno o più caratteri tipografici (cd. font) per il testo. In questo modo il web-designer ha la facoltà di specificare quale tipo di font vuole utilizzare per specifici blocchi di testo; è possibile, ad esempio, impostare un tipo di caratteri differente per gli heading (H1, H2, ecc.) e per il testo:

h1, h2, h3
{
  font-family: 'Comic Sans', coursive;  
}
p
{
  font-family: verdana, arial, sans-serif;    
}

Ma perchè abbiamo indicato più di un carattere? Semplicemente perchè è stato previsto un meccanismo tale per cui qualora il primo carattere non fosse presente sul computer client che visualizza la pagina verrà utilizzato il secondo, altrimenti il terzo, e cosi via. E' bene ricordare, infatti, che nelle specifiche di CSS 2.1 il font specificato nella proprietà font-family fa sempre riferimento alla libreria di caratteri installati all'interno del computer client.

Solitamente l'ultima posizione (nel nostro caso corrispondente a "sans-serif") è utilizzata per specificare la "famiglia del font" in modo generico in modo da suggerire al client, in caso di assenza di tutti i font specificati, di utilizzare quello di default per quella data famiglia.

Le famiglie di caratteri tipografici sono:

  • serif
  • sans-serif
  • coursive
  • fantasy
  • monospace

Si noti ancora che i caratteri tipografici i cui nomi sono composti da più di una parola vanno scritti tra singoli apici, come ad esempio:

font-family: 'times new roman';

E' bene precisare che per una corretta visualizzazione delle nostre pagine web è bene limitarsi all'utilizzo dei caratteri più diffusi come ad esempio:

  • arial
  • verdana
  • tahoma
  • times new roman

font-size

La proprietà font-size permette di impostare la dimensione del testo. Questa può essere utilizzata specificando un valore percentuale oppure numerico seguito da un unità di misura (solitamente si usa "px", "pt" o "em"). In alternativa è possibile utilizzare una keyword tra "xx-small", "x-small", "small", "medium", "large", "x-large" e "xx-large".

Vediamo un esempio:

p {
  font-size: 12px;    
}
p.piccolo {
  font-size: small;    
}

Si noti che la definizione in pixel (px) o punti (pt) consente di specificare in modo diretto la dimensione del testo, utilizzando "em", percentuali o una delle keyword citate, invece, la dimensione del testo viene calcolata in modo automatico dal browser sulla base dei valori esplicitati per l'elemento contenitore.

font-style e font-weight

Le proprietà font-style e font-weight trasformano il carattere utilizzato impostando rispettivamente uno stile (ad esempio "italic") e il grassetto ("bold"). Il valore di default per entrambi è "normal".

Vediamo qualche esempio di utilizzo:

span.grassetto
{
  font-weight: bold;
}
span.corsivo
{
  font-style: italic;
}

Si noti che attraverso queste proprietà è possibile anche sovvertire la stilizzazione di default impostata per taluni tag come <b> e <i>, in questo modo:

/* Tolgo il grassetto ai tag b e strong */
b, strong
{
  font-weight: normal;
}
/* Tolgo l'italico ai tag i e em */
i, em
{
  font-style: normal;
}

La proprietà font

Anche per questa famiglia esiste una versione compatta rappresentata dalla proprietà font. Anche questa volta possiamo usare una singola proprietà CSS per definire tutti gli aspetti della relativa famiglia in un colpo solo. Vediamo un esempio:

p
{
  font: italic bold 12px/1.5 arial, tahoma, sans-serif;    
}

Gli unici valori obbligatori sono font-size e font-family; tutti gli altri sono facoltativi. Ad esempio:

p
{
  font: 12px arial, tahoma, sans-serif;    
}

Una precisazione importante: nel primo esempio di questa proprietà abbiamo definito il font-size in questo modo:

12px/1.5

In realtà, con questa sintassi, abbiamo definito non solo la dimensione del font (12px) ma anche il valore di line-height (1.5). Vedremo in seguito a cosa corrisponde quest'ultima proprietà.

Le proprietà della famiglia text

Oltre alle proprietà della famiglia font, CSS prevede altre proprietà per la stilizzazione degli elementi di testo. Si tratta delle proprietà della famiglia text, cioè:

  • text-align
  • text-decoration
  • text-indent
  • text-transform

text-align

Attraverso la proprietà text-align è possibile definire l'allineamento del testo in senso orizzontale; possiamo, ad esempio, impostare un testo a destra oppure centrato a seconda dei nostri gusti e delle nostre esigenze. Questa proprietà ammette questi valori:

  • left - (default) allineamento a sinistra;
  • right - allinemaneto a destra;
  • center - allineamento centrato;
  • justify - allineamento giustificato.

Vediamo un esempio:

p.articolo
{
    text-align: justify;
}

text-decoration

Questa proprietà CSS consente di applicare una "decorazione" al testo. I valori possibili sono:

  • none - (default) nessuna decorazione;
  • underline - mette una linea sotto al testo (testo sottolineato);
  • overline - mette una linea sopra al testo;
  • line-through - testo barrato (euqivalente al tag HTML <strike>).

Vediamo un esempio:

span.sottolineato
{
    text-decoration: underline;
}

text-indent

Questa proprietà è utilizzata per specificare il rientro da sinistra della prima linea di un blocco di testo. Ammette valori percentuali o numerici accompagnati da un'unità di misura (ad esempio "px"):

span.tab
{
    text-indent: 100px;
}

text-transform

La proprietà text-transform permette di variare il case di un testo. Ammette i seguenti valori:

  • none - (default) nessuna trasformazione;
  • capitalize - mette in maiuscolo la prima lettera di ciascuna parola;
  • uppercase - mostra tutto il testo in maiuscolo;
  • lowercase - mostra tutto il testo in minuscolo.

Qualche esempio:

span.maiuscolo
{
    text-transform: uppercase;
}
span.minuscolo
{
    text-transform: lowercase;
}
span.iniziali_maiuscole
{
    text-transform: capitalize;
}

Sfoglia le lezioni

← Definire un colore per il testo: la proprietà color
→ Gestire la disposizione del testo nello spazio

Commenti

I commenti sono sottoposti alle linee guida di moderazione e prima di essere visibili devono essere approvati da un moderatore.
  • Facebook
  • Twitter
  • Google+
  • YouTube
  • Feed RSS
Frequenta i nostri corsi
  • Corso CSSCorso CSS
    Stilizzare siti Web coi CSS e CSS3. A partire da 39 €
  • Corso HTMLCorso HTML
    Il linguaggio di markup delle pagine web. A partire da 29 €
  • Corso Webmaster AvanzatoCorso Webmaster Avanzato
    Diventa un Webmaster professionista. A partire da 49 €
Vedi anche...
  • Introduzione ai fogli di stile CSS
  • CSS: Fogli di stile interni, esterni e stili inline
  • Selettori CSS: universale, per tipo, classe e ID
  • Background: gestione dello sfondo coi CSS
  • CSS: stilizzare liste e tabelle
Mr. Webmaster
  • RSS
  • Contattaci
  • Torna su
IKIweb
© 2003 - 2019 Mr. Webmaster
Mr. Webmaster ® è un marchio registrato.
E' vietata ogni forma di riproduzione.
IKIweb Internet Media S.r.l. - P.IVA 02848390122

Parliamo di noi: chi siamo / cronologia
Contatti: pubblicità / contattaci / segnala abusi
Note Legali: condizioni d'uso / privacy / cookie
Altro: sondaggi / feed