Con le proprietà del testo, possiamo specificare lo stile css del testo d’un elemento:
- color: il colore del testo
- text-align: l’allineamento del testo a sinistra, destra, centrato o giustificato
- text-decoration: la ‘decorazione’ del testo come sottolineato, sopralineato, sbarrato o anche lampeggiante
- text-transform: la trasformazione della prima lettera di ogni parola o di tutto il testo in maiuscolo o in minuscolo
- text-indent: l’indentazione della prima riga del testo
- letter-spacing: lo spazio tra ogni lettere
- word-spacing: lo spazio tra ogni parola
- line-height: lo spazio tra ogni linee
- white-space: l’interpretazione dei spazi bianchi nel html
- direction: la direzione del testo da sinistra a destra o destra a sinistra
1. color - il colore del testo
Il color permette di dare un colore al testo usando valori esadecimale, RGB o un nome specifico (le stesse che per il background-color)
Esempi di ‘color’:
color: #FF0000;
color: red;
color: rbg(255,0,0);
2. text-align - allineamento del testo
Il text-align permette di allineare il testo a sinistra (valore ‘left’), a destra (valore ‘right’), centrato (valore ‘center’) o allineare tutte le righe tra di loro sia a sinistra che destra (valore ‘justify’).
Esempi di ‘text-align’:
text-align:left;
Il testo di questo paragrafo è allineato a sinistra
Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione.
text-align:right;
Il testo di questo paragrafo è allineato a destra
Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione.
text-align:center;
Il testo di questo paragrafo è centrato
Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione.
text-align:justify;
Il testo di questo paragrafo è giustificato
Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione.
3. text-decoration
Il text-decoration permette di specificare se il testo è sottolineato (valore ‘underline’), sopralineato (valore ‘overline’), sbarrato (valore ‘line-through’), lampeggiante (valore ‘blink) o anulare uno dei 4 primi valori impostati con il valore ‘none’ (il valore di default, anche spesso usato per rimuovere la sottolineatura dei link).
Esempi di ‘text-decoration’:
text-decoration:none;
Il testo di questo paragrafo non ha nessuna decorazione - vale il valore di default del testo
Sono un link senza sottolineatura con a{text-decoration:none;}
text-decoration:underline;
Il testo di questo paragrafo è sottolineato
text-decoration:overline;
Il testo di questo paragrafo è sopralineato
text-decoration:through;
Il testo di questo paragrafo è sbarrato
text-decoration:blink;
Il testo di questo paragrafo è lampeggiante
NB: valore ‘blink’ supportato solo da Firefox
4. text-transform
Il text-transform permette di convertire ogni prima lettera delle parole in maiuscolo (valore ‘capitalize’),
tutte le parole da minuscolo a maiuscolo (valore ‘uppercase’) o da maiuscolo a minuscolo (valore ‘lowercase’)
o annulare uno dei 3 primi valori impostati con il valore ‘none’ (il valore di default).
Esempi di ‘text-transform’:
text-transform:none;
Il testo di questo paragrafo non ha subito trasformazione da default
text-transform:capitalize;
Ogni parola di questo paragrafo inzierà con un maiuscolo
text-transform:uppercase;
Questo paragrafo era scritto in minuscolo e trasformato in maiuscolo
text-transform:lowercase;
QUESTO PARAGRAFO ERA SCRITTO IN MAIUSCOLO E TRASFORMATO IN MINUSCOLO
5. text-indent
Il text-indent permette di specificare in unità di misura o in percentuale l’indentazione della prima riga di testo.
Esempi di ‘text-indent’:
text-indent:30px;
La prima riga di questo paragrafo ha un identazione di 30px
Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione.
La prima riga di questo paragrafo ha un identazione di 50% con text-indent:50%;
Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione.
NB: la misura in percentuale non è in rapporto alla misura dell’elemento stesso ma in rapporto alla larghezza del suo elemento genitore.
Esempio con lo stesso paragrafo dentro un <div> contenitore’ largo 200px:
text-indent:50%;
6. letter-spacing
Il letter-spacing permette di specificare lo spazio (negativo o positivo) tra le lettere in unità di misura.
Il valore di default è normal.
Esempi di ‘letter-spacing’:
letter-spacing: normal;
Lo spazio tra le lettere di questo paragrafo è normale da default
letter-spacing: 5px;
Lo spazio tra le lettere di questo paragrafo è di 5px
letter-spacing: -2px;
Lo spazio tra le lettere di questo paragrafo è di -2px
7. word-spacing
Il word-spacing permette di specificare lo spazio (negativo o positivo) tra le parole in unità di misura.
Il valore di default è normal.
Esempi di ‘word-spacing’:
word-spacing: normal;
Lo spazio tra le parole di questo paragrafo è normale da default
word-spacing: 10px;
Lo spazio tra le parole di questo paragrafo è di 10px
word-spacing: -5px;
Lo spazio tra le parole di questo paragrafo è di -5px
8. line-height
Il line-height permette di specificare lo spazio tra le linee in unità di misura (cioè lo spazio tra le parte inferiore dei caratteri), in percentuale o cifra(in rapporto alla misura del carattere).
Il valore di default è normal.
NB: La proprietà css line-height è spesso usata per centrare verticalmente una unica riga di testo nel suo elemento genitore. Leggi qui…
Esempi di ‘line-height’:
line-height: normal;
Lo spazio tra le linee di questo paragrafo è normale da default
Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione.
line-height: 10px;
Lo spazio tra le linee di questo paragrafo è di 10px
Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione.
line-height: 30px;
Lo spazio tra le linee di questo paragrafo è di 30px
Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione.
line-height: 150%; o line-height:1.5;
Lo spazio tra le linee di questo paragrafo è di 150%, eguale 150% della misura del font o anche il valore 1.5
Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione.
9. white-space
Il white-space indica al browser che fare con i spazi bianchi del testo quando interpreta l’html
Di default (valore ‘normal’), il testo si adattera alle misure del suo elemento ritornando a capo se necessario ed extra spazi bianchi vengono ignorati.
Con il valore pre, questi spazi bianchi vengono presi in considerazione (come è scritto nel html viene interpretato) ignorando la misura del suo elemento, mentre con il valore nowrap se anche i spazi bianchi extra e misura dell’elemento sono ignorati, tutto il testo sarà inserito su una unica linea senza ritorno a capo.
Esempi di ‘white-space’:
white-space: normal;
Questo paragrafo è normal come da default
Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione.
white-space: pre;
Tutti i spazi bianchi di questo paragrafo sono interpretati come scritti nel html
Lorem Ipsum è un testo segnaposto utilizzato nel settore della
tipografia e della stampa.
Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo,
quando un
anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione.
white-space: nowrap; Questo paragrafo è su una unica lineaLorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione.
10. direction
Il direction dovrebbe specificare la direzione del testo, da sinistra a destra (valore ltr - Left To Right) o da destra a sinistra (valore rtl - Right To Left). Questa proprietà del testo non è supportata da nessun browser.
Esempi di ‘direction’:
direction: ltr;
direction: rtl;
{ 5 trackbacks }
{ 0 comments… add one now }