In programmi come, ad esempio, Microsoft Word, probabilmente ti sei imbattuto in strumenti di allineamento del testo orizzontale. Puoi allineare il testo a sinistra oa destra, al centro o alla larghezza. Lo stesso vale in CSS: l'allineamento del testo viene eseguito utilizzando la proprietà text-align e i valori corrispondenti, che sono mostrati nella tabella:
Un esempio di scrittura di uno stile:
P (allineamento del testo: a sinistra;)
Valori a sinistra, a destra e al centro Il testo allineato a sinistra ha quasi sempre un bell'aspetto sulle pagine Web ed è facile da leggere. L'allineamento corretto nelle lingue europee di solito è usato raramente, ma non può essere definito completamente inutile: questo stile è utile per formattare magnificamente didascalie a foto o citazioni, allineare il contenuto delle celle della tabella o piccoli frammenti di testo. Il value center viene spesso utilizzato per lo stesso scopo. Il valore di giustificazione Testo giustificato in CSS può essere applicato alle versioni stampate delle pagine, ma non è consigliabile lasciarsi trasportare da questo stile nelle pagine Web create per la visualizzazione su un monitor. Come mai? A prima vista, il testo giustificato sembra carino e uniforme, come una colonna in un giornale. Ma per allungare il testo in questo modo, il browser deve aggiungere spazio extra tra le parole, a causa del quale possono formarsi brutti spazi vuoti nel testo, rendendo difficile la lettura. Nei programmi progettati per preparare i dati per la stampa, c'è una regolazione molto più fine della spaziatura nel testo e spesso usa anche il ritorno a capo, che non è disponibile in molti browser. Pertanto, è necessario verificare come appare il testo giustificato per larghezza sulle pagine Web e prima di tutto porsi la domanda: è facile da leggere? Ciò è particolarmente vero per i blocchi di testo stretti (comprese le versioni mobili delle pagine). I valori di inizio e fine I valori di inizio e fine per la proprietà text-align sono incorporati in CSS3 e funzionano più o meno allo stesso modo di left e right, ma c'è una differenza. Applicando il valore iniziale al testo che va da sinistra a destra (LTR - da sinistra a destra), l'allineamento sarà allineato a sinistra (di conseguenza, per il testo che va da destra a sinistra (RTL - da destra a sinistra ), l'allineamento sarà corretto) ... Logicamente, il valore finale funziona in modo opposto (ovvero, giustifica il testo LTR a destra e il testo RTL a sinistra). Questi due valori non sono supportati da alcuni browser, incluso Internet Explorer, quindi consigliamo di utilizzare i valori sinistro e destro a meno che non vi sia un'urgente necessità di utilizzarli.Gli screenshot mostrano esempi di utilizzo di valori diversi per la proprietà text-align CSS:
Schermata 1: Testo LTR allineato a sinistra utilizzando il valore iniziale. Un aspetto simile può essere ottenuto con il valore di sinistra. 
Schermata 2: Allineamento del testo LTR a destra utilizzando il valore finale. Un aspetto simile può essere ottenuto con il valore giusto. 
Schermata 3: Allineamento del testo in larghezza. Con caratteri piccoli e pagine grandi/larghezza blocco, questa opzione per l'allineamento del testo su una pagina web sembra accettabile. 
Schermata 4: aumento della dimensione del carattere e riduzione della larghezza del blocco rispetto all'esempio precedente. Come puoi vedere, nel testo sono apparsi brutti spazi vuoti (sottolineati con una linea rossa). 
Schermata 5: Due modi per allineare il testo nella versione mobile del nostro tutorial (sinistra - allinea testo: sinistra, destra - allinea testo: giustifica). Prova a leggere il testo in entrambe le colonne per determinare quale versione è più comoda da leggere.
Nel caso dei documenti HTML, i tag funzionano più per contrassegnare il contenuto che per indicare come dovrebbe essere presentato. Un maggiore controllo sulla presentazione si ottiene con gli stili. In questo articolo esaminerò gli stili associati alla formattazione dei paragrafi in HTML.
Etichetta
In HTML, ti consente di impostare i paragrafi e l'attributo align li allinea a sinistra, a destra, al centro o alla larghezza. Oltre a questi, utilizzeremo l'attributo di stile globale.
Allineare un paragrafo
Puoi allineare un paragrafo utilizzando l'attributo align con i seguenti valori:
allineare il testo: sinistra | destra | centro | giustificare | iniziale | ereditare;
Copia il seguente codice nel tuo file .html.
Questo paragrafo è centrato
Questo paragrafo è allineato a destra
Questo paragrafo viene visualizzato giustificato nella finestra del browser. Un paragrafo a larghezza divisa viene allineato a destra e giustificato a sinistra aggiungendo spazi aggiuntivi. Puoi vedere che i bordi del paragrafo allineato alla larghezza corrispondono ai bordi dei paragrafi allineati a sinistra ea destra. In un paragrafo allineato a sinistra, il bordo sinistro è pari e in un paragrafo allineato a destra, il bordo destro. Riesci a vedere che questo paragrafo ha entrambi i bordi lisci? Ciò si ottiene grazie allo stile text-align:activate.
In una finestra del browser, il codice HTML per il paragrafo ha questo aspetto.
Interlinea
Puoi controllare l'interlinea di un paragrafo con style = line-height. Utilizza l'attributo style con i seguenti valori:
line-height: normale | numero | lunghezza | iniziale | ereditare;
Di seguito è riportato un esempio di codice HTML che genera paragrafi con un'interlinea diversa:
Questo paragrafo utilizza due valori per l'attributo style. Il primo line-height: 1.5 specifica l'interlinea e mezza per il paragrafo, e il secondo valore text-align: require specifica che il testo nel paragrafo deve essere giustificato.
Questo paragrafo è con interlinea doppia e giustificato. line-height: 2 definisce la doppia spaziatura. L'attributo style non deve avere due valori. Ma se è necessario specificare due valori, è possibile farlo separandoli con punto e virgola.
Ecco alcuni modi diversi per utilizzare il valore dell'altezza della linea per l'attributo style:
: Imposta l'interlinea a 13 pixel;
: Imposta la spaziatura del paragrafo HTML al 200% rispetto alla dimensione del carattere corrente;
: Imposta l'altezza della linea su 14 pixel.
rientro
Ho usato il termine "rientro" per renderlo più facile da capire. Ma in HTML, usiamo spazi vuoti per creare uno spazio bianco attorno all'oggetto. Puoi utilizzare l'attributo style con un valore di riempimento per far rientrare un paragrafo a sinistra oa destra.
Di seguito è riportato un esempio di paragrafi rientrati a sinistra e a destra:
Questo paragrafo non è rientrato, è solo giustificato. Dai un'occhiata all'attributo style dell'elemento P per questo paragrafo.
Per questo paragrafo, ho impostato il padding sinistro su 30px usando lo stile padding-left: 30px. Anche questo paragrafo è giustificato in larghezza usando lo stile text-align:activate. Come già saprai, possiamo utilizzare più valori per l'attributo Style, separandoli con punto e virgola.
E questo paragrafo è rientrato a destra di 30 pixel, ma non rientrato a sinistra. È anche giustificato in larghezza. Il valore "padding-right" dell'attributo style specifica il padding a destra. Se non vedi l'effetto, riduci la larghezza della finestra del browser in modo che il paragrafo HTML giustificato venga visualizzato come previsto.
Rientro tra i paragrafi (rientro prima e rientro dopo il paragrafo)
In HTML o CSS, non ne abbiamo bisogno. Possiamo semplicemente specificare lo stile di riempimento per l'elemento
Padding-top e padding-bottom forniscono uno spazio bianco prima e dopo un paragrafo, che funge da rientro superiore o inferiore. Dai un'occhiata al tag di esempio qui sotto
Ho impostato il primo paragrafo dell'HTML per avere un padding di 10 pixel prima del secondo e 50 pixel dopo il secondo paragrafo:
Questo paragrafo non è rientrato né prima né dopo. Questo è un paragrafo regolare e giustificato. Come già saprai, possiamo giustificare un paragrafo alla sua larghezza usando il codice style = ”text-align: require” all'interno del tag.
Questo paragrafo è stato abbandonato. Viene inoltre riempito di 10 pixel prima del paragrafo e di 50 pixel dopo. All'interno del tag, ho impostato 3 stili.
Questo è un paragrafo normale senza rientri e con allineamento predefinito.
Cose da ricordare
- Un paragrafo HTML può essere allineato usando l'attributo align o lo stile text-align;
- L'HTML verrà visualizzato in modo diverso a seconda delle dimensioni dello schermo, delle dimensioni della finestra del browser;
- L'aggiunta di spazi extra o righe vuote all'HTML non influisce sull'output. Il browser rimuove tutti gli spazi extra;
- I tag definiscono cosa dovrebbe essere visualizzato e gli stili definiscono come dovrebbe essere visualizzato;
- Gli stili possono essere specificati in tre modi diversi: in linea (tag interni), interno ( all'interno dello stesso file HTML utilizzando un elemento