Login | Iscriviti | FAQ
Anonymous

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.



<< Lezione 4: Font

Lezione 6: Link >>