Il colore del testo può essere impostato con color. Si aspetta un valore colore.
p {
color: red;
}Come valore è possibile specificare nomi di colori o un valore colore esadecimale.
Impostare la direzione della scrittura
Con la proprietà direction è possibile forzare la direzione della scrittura negli elementi. È interessante la direzione invertita in relazione alle lingue che vengono scritte da destra a sinistra.
Inoltre, tramite questa proprietà è possibile determinare da quale lato i contenuti sovradimensionati verranno tagliati con overflow.
• ltr – da sinistra a destra
• rlt – da destra a sinistra
L'esempio seguente mostra come utilizzare la proprietà.
.normale {direction:ltr;}
.invertita {direction:rtl;}
Sono state definite due classi qui.
<p class="normale">Testo scritto da sinistra a destra. 1 2 3 4 5 6 7 8 9 0</p> <p class="invertita">Testo scritto da destra a sinistra. 1 2 3 4 5 6 7 8 9 0</p>
Il risultato nel browser appare come segue:
Allineamento orizzontale dei testi
Con la proprietà text-align viene definito l'allineamento orizzontale dei paragrafi di testo e di altri testi in elementi di blocco o elementi in linea. L'impostazione predefinita è l'allineamento a sinistra.
• left – allineamento a sinistra
• right – allineamento a destra
• center – centrato
• justify – allineamento giustificato
Un esempio:
<p style="text-align:right;">
Benvenuti
</p>
Il risultato sarà il seguente:
Allineamento verticale
Con la proprietà vertical-align viene determinato l'allineamento verticale del testo all'interno di una riga rispetto all'altezza della riga. La specifica fa sempre riferimento all'elemento genitore che deve essere un elemento in linea. È inoltre possibile allineare il testo all'interno delle tabelle.
I seguenti valori sono disponibili:
• sub – in pedice
• super – in apice
• baseline – allineato alla linea di base
• top – allineamento all'estremità superiore dell'elemento genitore
• bottom – allineamento all'estremità inferiore dell'elemento genitore
• middle – allineato al centro tra l'estremità superiore e inferiore dell'elemento genitore
• text-top – all'estremità superiore del testo
• text-bottom – all'estremità inferiore del testo
• Valore in lunghezza – un valore positivo o negativo sposta l'elemento sopra o sotto la linea di base.
• Valore percentuale – un valore positivo o negativo sposta l'elemento sopra o sotto la linea di base.
Un esempio:
.linea-base {
vertical-align: baseline;
}
Considerate che i valori di vertical-align sono interpretati in modo molto diverso dai vari browser. Dovreste quindi testare attentamente i risultati prima di pubblicare online le pagine.
Definire la decorazione del testo
text-decoration viene utilizzato per assegnare proprietà aggiuntive ai testi o ai collegamenti ipertestuali.
• none – nessuna decorazione del testo
• underline – sottolineato
• overline – linea sopra il testo
• line-through – testo barrato
• blink – lampeggiante
Anche qui un esempio:
a:link {
text-decoration: none;
}
In questo modo i collegamenti ipertestuali della pagina non verranno più sottolineati.
È possibile definire anche lo spaziamento tra le singole parole in modo esplicito.
<span style="word-spacing:0.5em">Benvenuti su PSD-Tutorials.de!</span><br /> <span style="word-spacing:1em">Benvenuti su PSD-Tutorials.de!</span>
Si attente un valore numerico. Gli specifici percentuali non sono possibili.
Simile a word-spacing è anche letter-spacing. Tuttavia, con letter-spacing si definisce lo spazio tra le singole lettere di un testo. Anche qui sono ammessi valori numerici, ma non percentuali.
<span style="letter-spacing:0.1em">Testo di esempio con spaziatura delle lettere di 0.1em</span><br> <span style="letter-spacing:0.3em">Testo di esempio con spaziatura delle lettere di 0.3em</span><br>
Con la proprietà text-transform è possibile stabilire se il testo deve essere in maiuscolo o minuscolo. E ciò indipendentemente dalla notazione effettiva nel codice sorgente. Inoltre, è possibile forzare le maiuscole.
• lowercase – lettere minuscole
• uppercase – lettere maiuscole
• capitalize – iniziali delle parole in maiuscolo
• none – nessuna trasformazione del testo
Esempio:
.klein {
text-transform: lowercase;
}Nel browser, il risultato appare così:
Spazi e interruzioni di riga
Con la proprietà white-space viene definito come gli spazi vuoti e le interruzioni di riga presenti nel codice sorgente devono essere visualizzati nel browser.
• normal – viene inserita un'interruzione di riga automatica. Inoltre, più spazi vuoti vengono uniti insieme.
• pre – Le interruzioni di riga vengono visualizzate come nel codice sorgente.
• nowrap – non vi è alcuna interruzione di riga automatica.
• pre-line – più spazi vuoti vengono uniti insieme. Inoltre, viene effettuata un'interruzione se il box di visualizzazione non è abbastanza grande.
• pre-wrap – viene effettuata un'interruzione se il box di visualizzazione non è abbastanza grande.
Anche qui un esempio:
<pre class="brush:xml;"><!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body>p {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
body p {
color:#0066FF;
}
</style>
</head>
<body>
<p>Assatz 1</p>
<p>Assatz 2</p>
<p>Assatz 3</p>
<div>
<p>Assatz 4</p>
</div>
</body>
</html></pre>Nel browser, appare così:
Implementazione dell'ombra
Con la proprietà text-shadow è possibile creare un'ombra per i testi. Si noti che questa proprietà è supportata solo dai browser relativamente recenti. I browser che non possono interpretare text-shadow mostreranno il testo senza ombra.text-shadow viene utilizzato come segue:
text-shadow: hV vV blur #xxxxxx;
E i valori significano:
• hV – Spostamento orizzontale
• vV – Spostamento verticale
• blur – Sfocatura
• #xxxxxx – Il colore dell'ombra
Il seguente esempio mostra un'applicazione tipica di text-shadow.
.ombra {
color: #444;
font-size: 34px;
text-shadow: 2px 2px 3px #333;
}
La classe definita viene poi applicata a un'intestazione di primo livello.
<h1 class="ombra">PSD-Tutorials.de</h1>
E anche qui uno sguardo al risultato:
Come già descritto, potete utilizzare text-shadow senza problemi, poiché una mancata interpretazione da parte dei browser non ha effetti negativi. Il testo verrà quindi semplicemente visualizzato senza ombra.
