Formattazione del testo con i Css

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

Creiamo ora un primo esempio concreto di foglio di stile sulla scorta delle nozioni di base fin ora acquisite, preoccupiamoci di formattare una serie di testi utilizzando tutti gli attributi di stile dediti allo svolgimento di tali funzioni e tutti i trucchi per snellire il codice ed il lavoro.

La prima cosa che ci preoccupiamo di stabilire per la formattazione di un file testuale è la dimensione del testo, il carattere, ovvero il font da utilizzare ed eventualmente il colore, immaginiamo di voler stilizzare il testo contenuto in un Tag <div>, più frequentemente utilizzato per i Css rispetto a <p>:

<style type="text/css">
   div {
      color: 003366;
      font-size: 12px;
      font-family: Verdana;
   }
</style>
Lì dove tutti gli elementi di testo rispettino un determinato tipo di stilizzazione, conviene stabilire all'interno del body le proprietà, ad esempio:
<style type="text/css">
   body {
      color: 003366;
      font-size: 12px;
      font-family: Verdana;
   }
</style>
Prego di prestare attenzione ad un particolare, non a caso ho evidenziato il codice inerente alle dimensioni del testo, lì dove un testo si trova all'interno di una cella di una tabella Html, anche se contenuto in un Tag <div>, le dimensioni del testo non saranno prese in considerazione, visualizzandole di default, è opportuno definire le dimensione dei <td> a parte, la soluzione migliore è questa:
<style type="text/css">
   body {
      color: 003366;
      font-family: Verdana;
   }
   td, div { font-size: 12px; }
</style>
Vediamo in questo modo anche come è possibile formattare due elementi contemporaneamente, ovvero col solo utilizzo di una virgola di separazione ed uno spazio opzionale, in questo caso "td, div".

Immaginiamo ora che una singola parola di un testo debba essere scritta in grassetto, con un carattere più grande ed un font diverso, utilizzeremo il Tag <span> che, a differenza del <div> non comporta un ritorno a capo, e gli assegneremo questo stile:
<span style="font-size: 15px; font-family: Tahoma; font-weight: Bold;">lukeonweb.net</span>
Diventa in questo modo addirittura più conveniente utilizzare una formattazione Html semplice, proviamo a riscrivere il tutto:
<span style="font: Bold, 15px, Tahoma;">lukeonweb.net</span>
Nota: nel caso in cui il nome del font che si desidera utilizzare sia composto da più parole, sarà necessario inserirlo per intero tra singoli apici, ad esempio:

<div style="font-family: 'Times New Roman';">lukeonweb.net</div>
Passiamo alla definizione di altri elementi di formattazione da assegnare ad elementi testuali:

Testo centrato: text-align: Center;

Colore di sfondo: background-color: #FFFFBB;

Corsivo: font-style: Italic;

Sottolineato: text-decoration: Underline; (da utilizzare con moderazione data la somiglianza con i link testuali)

Per una definizione completa di tutti gli elementi di formattazione utilizzabili consiglio di consultare le Referenze Css messe a disposizione da questo sito.

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (48.003)

:: Referenze dei fogli di stile Css (41.760)

:: Menu ad effetto mouseover con i Css (39.091)

:: Effetti sui link con i Css (29.617)

:: Testo verticale coi Css (19.875)

:: Angoli smussati in un box coi Css (18.851)

:: Box con effetto ombra con i CSS3 (16.159)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (16.140)

:: Stilizzare i form Html con i Css (15.906)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (15.555)

IN EVIDENZA
DOWNLOAD