Buona web design riguarda spesso una buona tipografia. Poiché gran parte del contenuto di una pagina Web viene presentato come testo, essere in grado di modellare quel testo in modo che sia sia attraente che efficace è un'abilità importante da possedere come web designer. Sfortunatamente, non abbiamo lo stesso livello di controllo tipografico online che abbiamo sulla carta stampata. Ciò significa che non possiamo sempre modellare in modo affidabile il testo su un sito Web nello stesso modo in cui potremmo farlo in un pezzo stampato.
Uno stile di paragrafo comune che vedi spesso in stampa (e che possiamo ricreare online) è dove la prima riga di quel paragrafo è rientrata di uno spazio di tabulazione. Ciò consente ai lettori di vedere dove inizia un paragrafo e finisce un altro.
Non vedi questo stile visivo tanto nelle pagine web perché i browser, per impostazione predefinita, visualizzano i paragrafi con uno spazio sotto di loro come un modo per mostrare dove finisce uno e inizia un altro, ma se vuoi dare uno stile a una pagina per averlo have ispirato alla stampa
stile di rientro sui paragrafi, puoi farlo con il indentatura del testo proprietà di stile.La sintassi di questa proprietà è semplice. Ecco come aggiungere un rientro di testo a tutti i paragrafi di un documento.
p {
rientro del testo: 2em;
}
Personalizzazione dei rientri
Un modo in cui puoi specificare esattamente i paragrafi da indentare, puoi aggiungere una classe ai paragrafi che vuoi far rientrare, ma ciò richiede che tu modifichi ogni paragrafo per aggiungere una classe ad esso. Questo è inefficiente e non segue Codifica HTML migliori pratiche.
Invece, dovresti considerare quando rientri i paragrafi. Rientri i paragrafi che seguono direttamente un altro paragrafo. Per fare ciò, puoi utilizzare il selettore di fratelli adiacente. Con questo selettore, selezioni ogni paragrafo immediatamente preceduto da un altro paragrafo.
p + p {
rientro del testo: 2em;
}
Poiché stai rientrando la prima riga, dovresti anche assicurarti che i tuoi paragrafi non abbiano spazio extra tra di loro (che è l'impostazione predefinita del browser). Stilisticamente, dovresti avere uno spazio tra i paragrafi o indentare la prima riga, ma non entrambe.
p {
margine inferiore: 0;
fondo-imbottitura: 0;
}
p + p {
margine superiore: 0;
imbottitura: 0;
}
Rientri negativi
Puoi anche usare il indentatura del testo proprietà, insieme a un valore negativo, per far sì che l'inizio di una riga vada a sinistra anziché a destra come un normale rientro. Puoi farlo se una riga inizia con una virgoletta in modo che il carattere di virgoletta appaia nel un leggero margine a sinistra del paragrafo e le lettere stesse formano ancora una bella sinistra allineamento.
Diciamo, ad esempio, che hai un paragrafo che è un discendente di un blockquote e vuoi che sia rientrato negativamente. Potresti scrivere questo CSS:
citazione p {
rientro del testo: -.5em;
}
Ciò darebbe all'inizio del paragrafo, che presumibilmente include il carattere di citazione di apertura, di essere leggermente spostato a sinistra per creare una punteggiatura sospesa.
Per quanto riguarda i margini e il riempimento
Spesso nel web design, usi valori di margine o padding per spostare gli elementi e creare uno spazio bianco. Tuttavia, queste proprietà non funzioneranno per ottenere l'effetto del paragrafo rientrato. Se applichi uno di questi valori al paragrafo, l'intero testo di quel paragrafo, inclusa ogni riga, verrà spaziato anziché solo la prima riga.