Come regolare l'interlinea in HTML

November 1

Come regolare l'interlinea in HTML


Durante gli anni dell'infanzia e dell'adolescenza del web, stampa i progettisti hanno lottato per portare gli strumenti precisi del loro mestiere nel regno del design basata su HTML. Per lungo tempo, concetti come leader erano difficili da eseguire ed in modo poco reso dai browser diversi lettori. Come il Web maturata, tuttavia, la tecnologia denominata CSS designer ha il potere di eseguire in modo affidabile concetti come leader con facilità e affidabilità. È possibile modificare il leader di un paragrafo di testo semplicemente usando la proprietà CSS "line-height".

istruzione

Regolare il leader in un paragrafo di testo

1 Aprire un file di testo con un editor di testo e creare una pagina di esempio HTML con un singolo paragrafo in questo modo:

<Html>

<Body>

<P>

Lorem ipsum dolor sit amet...

</ P>

</ Body>

</ Html>

Sostituire il testo "Lorem ipsum" con testo abbastanza per assicurarsi che il paragrafo avvolge per formare diverse linee.

Salvare il file di testo con estensione ".html".

2 Aggiungere il codice CSS per il vostro tag di paragrafo (<p>) per impostare la proprietà "line-height". Questa proprietà è come CSS si riferisce al concetto di leader. Impostare anche la proprietà "font-size" per 12 punti in modo da poter vedere come diverse unità di altezza della linea modificare l'aspetto. Modificare il tag di paragrafo in questo modo:

<P style = "line-height: 2em; font-size: 12pt">

Salvare il file. Aprire il file di testo in un browser Web. Vedrete che il leader del testo è più alto di testo standard nel browser. L'impostazione che hai ora cambierà il leader con sede sulla dimensione del carattere corrente. In questo caso, il principale è due SME o due volte la dimensione del carattere.

3 Modificare la dimensione del carattere a otto punti e vedere come i cambiamenti che portano insieme con la dimensione del testo, come questo:

<P style = "line-height: 2em; font-size: 8pt">

Salvare il file e aggiornare il browser per visualizzare la modifica. Il leader deve essere la stessa di prima rispetto alle dimensioni del carattere.

4 Modificare il tag di paragrafo per definire il leader con i pixel anziché lo SME, come questo:

<P style = "line-height: 20px; font-size: 12pt">

Salvare il file e aggiornare il browser. Questa nuova impostazione metterà esattamente dieci pixel tra le linee di base delle righe di testo di 12 punti.

5 Modificare la dimensione del carattere a otto punti e vedere come i cambiamenti che portano insieme con la dimensione del testo, come questo:

<P style = "line-height: 20px; font-size: 8pt">

Salvare il file e aggiornare il browser per visualizzare la modifica. Vedrete che la quantità di leader è diverso, rispetto alla dimensione del carattere, dalla versione di carattere di 12 punti. Questo è perché utilizzando pixel come unità per la regolazione altezza della linea fa sì che la porta a essere statico, e non in base alle dimensioni del carattere.