| 7.7 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:
<html>
<head>
<title>Titolo del documento</title>
<style type="text/css">
BODY { background:#FFFFD1; color:#000000 }
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>
</html>
anteprima
7.8 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:
<html>
<head>
<title>Titolo del documento</title>
<style type="text/css">
BODY { background:#FFFFD1; color:#000000 }
p { text-align:center }
.destra { text-align:right }
</style>
</head>
<body>
<p>Questo paragrafo risulta centrato sulla
pagina.</p>
<p class="destra">Quest'altro
parametro, al quale è associato una classe, risulta allineato a destra.</p>
</body>
</html>
anteprima
7.9 Decorazione del testo
E' un elemento che abbiamo già trattato quando abbiamo parlato dei link.
Ovviamente una decorazione si può assegnare anche a dei paragrafi di testo con
l'elemento di stile text-decoration.
Valori ammessi sono:
- none (nessuna decorazione)
- underline (testo sottolineato)
- overline (linea sopra il testo)
- line-through (linea attraverso il testo)
- blink (intermittenza del testo)
Quest'ultimo valore NON E' SUPPORTATO DA MICROSOFT© EXPLORER in nessuna delle sue
versioni.
Vediamo un esempio, aiutandoci ancora con le classi:
<html>
<head>
<title>Titolo del documento</title>
<style type="text/css">
BODY { background:#FFFFD1; color:#000000 }
p { text-decoration:none }
.sopra { text-decoration:overline }
.mezzo { text-decoration:line-through }
</style>
</head>
<body>
<p>Questo paragrafo risulta assolutamente
normale.</p>
<p class="sopra">Quest'altro parametro, al quale è associato una classe, risulta
sovrastato da una linea.</p>
<p class="mezzo">Mentre quest'ultimo paragrafo è sbarrato da una riga
orizzontale</p>
</body>
</html>
anteprima
7.10
Spaziatura tra le lettere e tra le parole
Per assegnare uno spazio predefinito tra una lettera e l'altra della stessa parola si
usa l'elemento di stile letter-spacing, mentre per assegnare uno spazio predefinito tra
una parola e la successiva si usa l'elemento di stile word-spacing.
Il valore può essere espresso in unità di misura come
- px (pixels)
- cm (centimetri)
- mm (millimetri)
- pt (punti)
- pc (pica equivalenti a 12 punti)
Vediamo un esempio:
<html>
<head>
<title>Titolo del documento</title>
<style type="text/css">
BODY { background:#FFFFD1; color:#000000 }
p { letter-spacing:7pt; word-spacing:10px }
</style>
</head>
<body>
<p>Usando questo elemento di stile</p>
<p>ogni lettera di ciascuna parola </p>
<p>sarà distanziata di 7 punti</p>
<p>ed ogni parola sarà distanziata</p>
<p> dalla successiva di 10 pixels.</p>
</body>
</html>
anteprima
7.11 Trasformazione del
testo
L'elemento di stile text-transform serve a far sì che un paragrafo o una parte della
pagina, in qualunque modo sia stata realmente scritta, appaia tutta in caratteri
maiuscoli, tutta in caratteri minuscoli oppure con la prima lettera di ciascuna parola in
maiuscolo.
Valori ammessi sono:
- capitalize (con la prima lettera di ciascuna parola in maiuscolo)
- uppercase (con tutte le lettere in maiuscolo)
- lowercase (con tutte le lettere in minuscolo)
- none (come è stata scritta)
Aiutandoci con le classi, vediamo un esempio:
<html>
<head>
<title>Titolo del documento</title>
<style type="text/css">
BODY { background:#FFFFD1; color:#000000 }
p { text-transform:none}
.maiuscolo {text-transform:uppercase}
.minuscolo {text-transform:lowercase}
.iniziale {text-transform:capitalize}
</style>
</head>
<body>
<p>Tutte le frasi di questa pagina sono state scritte allo
stesso modo,</p>
<p class="maiuscolo">ma questa appare tutta in maiuscolo,</p>
<p class="iniziale">questa appare con l'iniziale di ogni parola in
maiuscolo,</p>
<p class="minuscolo">e questa tutta in minuscolo.</p>
</body>
</html>
anteprima |
