È possibile allineare paragrafi o contenuti delle celle della tabella secondo le vostre esigenze utilizzando le seguenti proprietà. Queste proprietà possono essere applicate anche a tutti gli altri elementi a cui è stata assegnata un'altezza o larghezza definita o calcolata.
Rientro della prima riga
Iniziamo con la proprietà text-indent. Questa proprietà definisce come la prima riga di un paragrafo deve essere rientrata. È anche possibile spostare il testo a sinistra. Per fare ciò, deve essere utilizzato un valore negativo di text-indent. (Informazioni dettagliate su quando un'intensa spaziatura può essere utile verranno fornite successivamente). Deve essere fornito un valore numerico.
Un esempio:
.paragrafo { text-indent: 2em; }
Nel browser appare come segue:
Se si utilizza un valore negativo, il testo verrà spostato nella prima riga del testo in corrente.
.paragrafo {
text-indent: -2em;
}
Anche in questo caso un'anteprima del risultato nel browser:
Anche questo è possibile. Tuttavia, quando si definiscono spaziature, assicuratevi che i contenuti siano ancora leggibili quando lo si desidera. In effetti, text-indent può diventare interessante anche in relazione all'ottimizzazione per i motori di ricerca. Ad esempio, a volte si preferisce mostrare immagini anziché testo.
Tuttavia, se si desidera che il testo sia comunque accessibile per i motori di ricerca, ci si trova in un dilemma. Questo dilemma può essere risolto utilizzando text-indent. Questa proprietà vi consente di spostare i testi come ben noto. Pertanto, potete far scomparire i testi dalla vista degli utenti.
Vantaggio della variante text-indent: Il testo da sostituire con un'immagine è ancora presente inalterato nel codice sorgente.
<h1>PSD-Tutorials.de</h1>
...
h1 {
background: url(logo.png) 0 0 no-repeat;
text-indent: -99999px;
height:200px;
}
Con questa sintassi, viene assegnata un'immagine di sfondo all'elemento h1. (La proprietà background è stata già presentata in questa serie). Con text-indent: -99999px, il testo dell'intestazione viene spostato di 99999 pixel a sinistra. Di conseguenza, il testo non è più visibile. Ora viene visualizzata solo l'immagine.
Disattivando il foglio di stile, il testo è nuovamente visibile come di consueto.
Impostare l'altezza della riga
Ho già menzionato l'altezza della riga in relazione alla proprietà font. A questo punto parleremo più dettagliatamente di questo argomento. È interessante definire l'altezza della riga in relazione alla dimensione del carattere (font-size).
L'altezza della riga può essere definita tramite la proprietà line-height. Sono ammessi valori numerici. Sono possibili anche valori percentuali. Questi si riferiscono alla dimensione del carattere dell'elemento per cui è stata specificata l'altezza della riga. Prima di definire l'altezza della riga, considera quanto segue: può capitare che un browser/dispositivo dia la priorità all'altezza della riga rispetto ad altre proprietà e tagli gli elementi se sono più alti. Questo può essere fastidioso soprattutto con le immagini. Quindi, testate i risultati prima di pubblicare il sito online.
L'esempio seguente mostra come utilizzare line-height.
<p style="line-height:1.4em; font-size:1em;">A volte si è creato un layout fantastico, ma mancano ancora le foto e se si utilizzano solo cornici vuote, il layout sembra piuttosto spoglio. Si può fare di meglio:<br /> In questo video training vi mostro i migliori siti web per ottenere rapidamente immagini segnaposto gratuite e adatte. Una lista geniale si trova ad esempio <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">qui</a>.</p> <p style="line-height:2em;font-size:1em;">A volte si è creato un layout fantastico, ma mancano ancora le foto e se si utilizzano solo cornici vuote, il layout sembra piuttosto spoglio. Si può fare di meglio:<br /> In questo video training vi mostro i migliori siti web per ottenere rapidamente immagini segnaposto gratuite e adatte. Una lista geniale si trova ad esempio <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">qui</a>.</p> <p style="line-height:1em; font-size:1em;">A volte si è creato un layout fantastico, ma mancano ancora le foto e se si utilizzano solo cornici vuote, il layout sembra piuttosto spoglio. Si può fare di meglio:<br /> In questo video training vi mostro i migliori siti web per ottenere rapidamente immagini segnaposto gratuite e adatte. Una lista geniale si trova ad esempio <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">qui</a>.</p>
Sono stati definiti qui tre paragrafi a cui sono stati assegnate diverse altezze di riga.
Come potete vedere, l'altezza di riga può influenzare notevolmente la leggibilità dei testi in flusso. Quindi usate con cautela il line-height.
Infine sorge naturalmente la domanda su quale altezza di riga si dovrebbe scegliere. Di solito si considerano altezze di riga tra il 130 e il 150 percento.
p {
line-height: 150%;
}
In ultima analisi, la buona leggibilità dipende soprattutto dalla larghezza del testo. Si applica il seguente principio: l'altezza di riga dovrebbe essere tanto maggiore quanto più lunghe sono le righe di testo. Quindi assicuratevi che la leggibilità rimanga effettivamente preservata testando la pagina.
Allineamento orizzontale del testo
Attraverso la proprietà text-align viene impostato l'allineamento orizzontale dei paragrafi e di altri testi in flusso o elementi inline contenuti in elementi blocco. I seguenti valori possono essere utilizzati per text-align:
• left – allineamento a sinistra
• right – allineamento a destra
• center – centrato
• justify – giustificato
Ecco un esempio:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<h2>PSD-Tutorials.de</h2>
<h3>PSD-Tutorials.de</h3>
</body>
</html>E questo è come appare il risultato nel browser:
Notate che text-align non riguarda solo i contenuti di testo. La proprietà si applica effettivamente a tutti gli elementi inline. Pertanto, se si incorpora un'immagine, la definizione di text-align si applica anche a tale elemento.
Un'osservazione: text-align – almeno secondo la specifica ufficiale CSS – non dovrebbe influenzare gli elementi blocco. (Anche se ci sono browser che lo applicano anche agli elementi blocco). Se si desidera allineare elementi blocco, in questi casi è consigliabile utilizzare le proprietà margin già illustrate.
