Esercitazioni HTML: interlinea CSS

Interlinea Il CSS è molto necessario per la progettazione del testo. Qualsiasi esperto li usa sempre se crea un bellissimo sito web. Grazie a questi attributi, puoi eseguire qualsiasi operazione con il testo.

Di norma, alla maggior parte dei progettisti non piace il layout di testo predefinito in html. Interlinea CSS ti permette di personalizzare quasi tutto ciò che puoi immaginare. E se vai in profondità, puoi fare ciò che non hai mai pensato.

Come rendere l'interlinea di testo in CSS

È importante capire che è possibile impostare la dimensione di linee, rientri, ecc. Su tutti gli elementi in cui è presente del testo. Ad esempio, tutti questi attributi sono eccellenti per:

• paragrafo;
• liste;
• ;
• tavoli;
• titoli;
• e tutto il resto dove pubblichi il testo.

Considerando l'interlinea CSS, prima di tutto prestare attenzione ai seguenti attributi.

In "Photoshop" c'è il concetto di Leading. Non esiste un attributo simile in CSS, ma grazie ad esso l'essenza può essere spiegata. In realtà è la distanza tra le linee.

Nei CSS, le dimensioni della linea sono impostate dal parametro line-height e font-size. Come puoi vedere, l'immagine indica chiaramente che la dimensione del carattere è la dimensione del carattere. Non una sola lettera va oltre questi limiti.

L'altezza della linea è la distanza dal centro della cima che conduce al centro della linea inferiore. Frecce tutto ciò è mostrato nella figura.

Si noti che se si specifica un'altezza di riga inferiore alla dimensione del carattere, le linee si sovrapporranno l'una con l'altra. Assicurati di seguire questo per evitare una situazione del genere.

Alcune persone pensano perché la dimensione del font sia più bassa della riga con le lettere. È semplice Dopo tutto, ci sono lettere che sono inferiori al livello principale della linea. La figura seguente è un chiaro esempio di dove sono usati i simboli, stirati su e giù.

Come puoi vedere, le lettere occupano solo l'intera gamma di font-size. E l'altezza della linea è maggiore, e lo spazio uguale viene aggiunto su entrambi i lati.

Il valore dell'attributo line-height può essere qualsiasi:

• pixel;
• pollici;
• articoli;
• interessi;
• e altri che sono usati nei CSS.

Non è possibile specificare un valore negativo. Ad esempio, se si specifica un fattore uguale a uno e mezzo, si ottiene un intervallo standard di uno e mezzo nel testo.

Se si specifica in percentuale, tenere presente che il 100% in altezza riga equivale al valore della dimensione carattere.

Inoltre, è possibile specificare il valore normale o ereditario. Se si specifica normale, la distanza tra le linee verrà automaticamente calcolata dal browser a sua discrezione. Il valore potrebbe essere diverso, perché dipende dal browser. Si consiglia di impostare un numero specifico in modo che tutti gli utenti abbiano la stessa cosa.

Eredita significa che il valore sarà esattamente uguale all'elemento genitore.

Design più dettagliato

L'interlinea CSS non è in realtà limitata agli attributi di cui sopra. La distanza è ancora regolata dagli attributi margin e padding. Se si specifica l'attributo esattamente come margin = '5px', quindi da tutti i lati della linea (paragrafo) verrà aggiunta una distanza di 5 pixel.

Se è necessario specificare solo sopra il paragrafo, è possibile specificare un margine superiore. La traduzione è molto semplice. Pertanto, sarà possibile impostare i rientri da ciascun lato.

Si noti che esiste anche un attributo di padding. Funziona esattamente come il margine. È possibile impostare sia il rientro generale che la direzione specifica (sinistra, destra, alto, in basso).

Guarda attentamente il disegno sopra. Margine: rientranza esterna all'oggetto e riempimento interno.

Questi attributi sono globali. Possono essere applicati a tutto: immagini, tabelle, testo, collegamenti e così via.

Ricordalo una volta per tutte. Questo è un punto molto importante nella progettazione di oggetti. Ad esempio, grazie al margine, è possibile specificare i rientri tra il testo e le immagini al suo interno. Se questi rientri non sono presenti, il testo verrà posizionato vicino all'immagine.

Se hai un testo nella tabella, usa il padding per evitare che il testo si attacchi ai bordi del tavolo, poiché questo sembra brutto. E se imposti un rientro di almeno 5 pixel, sarà già molto meglio. Oltre all'altezza, la linea ha una larghezza di attributo.

A volte questa è una proprietà molto necessaria. La figura seguente mostra un esempio di larghezza diversa del testo.

Esempio di design

Creando un design per un sito web, dovresti sempre rendere il testo il più leggibile possibile. Se l'utente trova difficoltà a leggere il testo (è troppo piccolo o troppo grande), semplicemente chiuderà il tuo sito.

Prova a confrontare i due paragrafi mostrati nella figura sottostante. Quale testo preferisci leggere?

L'interlinea CSS è progettata per rendere conveniente la percezione del testo. Inoltre, non dimenticare che diversi tipi di carattere possono differire nella loro altezza iniziale.

Per chiarezza, puoi controllare qualsiasi editor. Confronta alcuni tipi di carattere.

Si noti che tutti i caratteri sono scritti in 24 pixel. Come puoi vedere, differiscono per altezza e larghezza delle lettere. Se si confrontano di più le dimensioni, la differenza sarà più evidente.

CSS: interlinea nella lista

La regolazione degli intervalli viene applicata negli elenchi. Inoltre, negli stili delle liste, il margine e il padding sopra descritti sono caratteristici. Grazie a questa lista diventa più bello dello standard. Utilizzando tutti questi attributi, puoi impostare:

• L'altezza degli elementi dell'elenco.
• Rientro per il testo a sinistra.
• Rientri per linee sopra e sotto.
• La larghezza massima di ogni articolo.

conclusione

Possedendo una tale serie di attributi, puoi giocare con il design non solo delle linee, ma di tutto ciò che desideri. Questi sono parametri globali a cui sono soggetti tutti gli elementi (l'eccezione è la dimensione del font, poiché è solo per il testo).