|
Home -> Manuali e Tutorials -> Guida CSS -> Formattazione del Testo (3/4)
Scarica il tutorial  | Stampa il tutorial  | Cerca nel sito 
RIENTRO E DECORAZIONI DI UN TESTO
Rientro del Testo
L'elemento di stile che consente di assegnare un rientro alla prima riga di un blocco di testo è text-indent.
Il valore può essere espresso in unità di misura come:
- px (pixels)
- cm (centimetri)
- mm (millimetri)
- pt (punti)
- pc (pica equivalenti a 12 punti)
o in percentuale.
Vediamo un esempio:
<head>
<style type = "text/css">
p { text-indent:100px }
</style>
</head>
<body>
<p> La prima riga di questo testo appare rientrata di 100 pixels rispetto al resto del paragrafo: anche questo effetto si può ottenere con un elemento di stile. </p>
<p> Ovviamente l'elemento di stile verrà applicato a ciascun paragrafo presente nella pagina e quindi anche questa seconda riga subirà la stessa sorte. </p>
</body>
|
Allineamento del testo
L'elemento di stile utilizzato per allineare il testo è text-align.
Valori ammessi sono:
- left (a sinistra)
- right (a destra)
- center (centrato)
- justify (giustificato)
Vediamo un esempio con un paragrafo allineato al centro ed un altro allineato a destra, con l'ausilio, in questo caso, di una classe:
<head>
<style type = "text/css">
p { text-align:center }
.all_destra { text-align:right }
</style>
</head>
<body>
<p> Questo paragrafo risulta centrato sulla pagina. </p>
<p class = "all_destra"> Quest'altro parametro, al quale è associato una classe, risulta allineato a destra. </p>
</body>
|
Decorazione del Testo
Ovviamente una decorazione si può assegnare anche a dei paragrafi di testo con l'elemento di stile text-decoration, oltre che ai link.
Valori ammessi sono:
- none (nessuna decorazione)
- underline (testo sottolineato)
- overline (linea sopra il testo)
- line-through (linea attraverso il testo)
Vediamo un esempio, aiutandoci ancora con le classi:
<head>
<style type = "text/css">
p { text-decoration:none }
.riga_sopra { text-decoration:overline }
.riga_mezzo { text-decoration:line-through }
</style>
</head>
<body>
<p> Questo paragrafo risulta assolutamente normale. </p>
<p class = "riga_sopra">Quest'altro parametro, al quale è associato una classe, risulta sovrastato da una linea. </p>
<p class = "riga_mezzo">Mentre quest'ultimo paragrafo è sbarrato da una riga orizzontale </p>
</body>
|
Ecco un altro esempio che mostra un effetto fuoco:
div.fire {
color: #FFFFFF;
font-family: Arial;
font-size: 12px;
font-weight: Bold;
text-align: center;
letter-spacing: 10px;
filter: glow(color: #800000, strength: 5);
}
|
Eccone un altro:
Questo è un esempio di testo sfumato verso una certa direzione, stabilita dal valore di Direction. Questo effetto può essere applicato anche ad una immagine.
|
.font
{
FILTER:Blur(Strength=10,Direction=225);
} |
Torna su  | Indice Guida  | Pagina << 5 >>
|
