Lezione 5: 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à:
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;
}
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;
}
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;
}
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;
}
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;
}
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.