Lezione05: Testo

Formattare e aggiungere dello stile al testo è una delle prerogative principali per ogni web designer. In questa lezione ti verranno introdotte alcune sorprendenti opportunità fornite dai CSS per aggiungere stile al testo. Descriveremo le seguenti proprietà:

• text-indent
• text-align
• text-decoration
• letter-spacing
• text-transform

Indentazione del testo [text-indent]

La proprietà text-indent ti permette di aggiungere un tocco elegante ai paragrafi di testo, applicando una indentazione alla prima linea del paragrafo. Nell'esempio sotto abbiamo applicato una indentazione di 30px a tutti i paragrafi marcati con il tag <p>:

 p {
  text-indent: 30px;
 }
 
 

• Visualizza l'esempio

Allineamento del testo [text-align]

La proprietà text-align corrisponde all'attributo align usato nelle precedenti versioni di HTML. Il testo può essere allineato a sinistra, a destra o centrato. Oltre a questo il valore justify permetterà di allineare ogni linea del testo sia a destra che a sinistra. Già conosci questo tipo di allineamenti da esempi sui giornali o sulle riviste.

Nell'esempio sotto il testo nel titolo della tabella <th> verrà allineato a destra mentre i dati nella tabella <td> saranno centrati. Inoltre i normali paragrafi di testo saranno giustificati:

 th {
  text-align: right;
 }

 td {
  text-align: center;
 }

 p {
  text-align: justify;
 }
 
 

• Visualizza l'esempio

Decorazione del testo [text-decoration]

La proprietà text-decoration permette di aggingere al testo diverse "decorazioni" o "effetti". Per esempio puoi sottolineare il testo, inserire una linea sul testo o sopra il testo, ecc. Nell'esempio che segue i titoli <h1> vengono sottolineati con una linea sopra il testo e i titoli <h3> con una liena sul testo.

 h1 {
  text-decoration: underline;
 }

 h2 {
  text-decoration: overline;
 }

 h3 {
  text-decoration: line-through;
 }
 
 

• Visualizza l'esempio

Spazio fra i caratteri [letter-spacing]

Lo spazio tra i caratteri del testo può essere specificato usando la proprietà letter-spacing. Il valore della proprietà è semplicemente la distanza desiderata. Per esempio, se vuoi uno spazio tra i caratteri del testo di un paragrafo <p> di 3px e una distanza tra i caratteri del titolo <h1> di 6px, il codice che dovresti usare sarà:

 h1 {
  letter-spacing: 6px;
 }

 p {
  letter-spacing: 3px;
 }
 
 

• Visualizza l'esempio

Trasformazione del testo [text-transform]

La proprietà text-transform controlla l'uso delle maiuscole in un testo. Puoi scegliere capitalize, usare uppercase o lowercase a seconda di come appare il testo nel codice HTML.

Un esempio potrebbe essere la parola "headline" che può essere mostrata ll'utente come "HEADLINE" o "Headline". Esistono quattro possibili valori per la proprietà text-transform:

capitalize

Usa la maiuscola per il primo carattere di ogni parola. Per esempio: "john doe" sarà "John Doe".

uppercase

Converte tutti i caratteri in maiuscole. Per esempio: "john doe" sarà "JOHN DOE".

lowercase

Converte tutte i caratteri in minuscole. Per esempio: "JOHN DOE" sarà "john doe".

none

Nessuna trasformazione - il testo viene presentato come appare nel codice HTML.

Come esempio useremo una lista di nomi. I nomi sono tutti marcati con <li> (list-item). Diciamo che vogliamo i nomi in lettere maiuscole e i titoli in minuscolo.

Cerca di guardare il codice HTML di questo esempio e vedrai che in effetti il testo è in lettere minuscole.

 h1 {
  text-transform: uppercase;
 }

 li {
  text-transform: capitalize;
 }
 
 

• Visualizza l'esempio

Riepilogo

Nelle ultime tre lezioni hai già imparato molte proprietà dei CSS ma ce ne sono ancora molte altre. Nella prossima lezione vedremo i link.

Postato sotto: Lezioni CSS