EM Utilizzo in CSS

April 1

Se si visualizza il codice sorgente di una pagina HTML o un documento CSS, si può vedere un valore di attributo CSS denominato "em". Mentre lo SME non sono necessari per creare una pagina Web, sito designer professionisti capire l'importanza di utilizzarli a tracciare disegni per siti web sofisticati dall'aspetto.

CSS unità di misura

Cascading Style Sheet definizioni consentono ai progettisti di siti web per controllare l'aspetto e le dimensioni degli elementi della pagina. Un elemento di testo, per esempio, ha una proprietà font. I font possono variare nello stile, colore e dimensione in una pagina Web, e si può definire un formato con "%", "px" o "pt", che stanno per cento, pixel e punto, rispettivamente. È inoltre possibile impostare le dimensioni di un font utilizzando em.

Unità em

Tipografi originariamente definito un em per rappresentare la larghezza di una lettera maiuscola "M" Oggi, em sta per l'altezza di un carattere invece della sua larghezza. Nella progettazione Web, un em rappresenta la dimensione del carattere del contenitore principale di un elemento - quando il genitore è l'elemento del corpo, ogni elemento figlio della pagina ha un valore di 1em. Poiché gli elementi figli ereditano i valori delle proprietà CSS dei loro genitori, molti designer mettono definizioni em nella classe CSS che definisce l'elemento di corpo, causando tutti gli elementi figli di ereditare lo stesso valore em.

Benefici

L'impiego di unità em per impostare le dimensioni dei caratteri rende la vostra pagina Web scalabile, il che significa che sarà ridimensionare tutti gli elementi in modo proporzionale al variare del formato pagina, come ad esempio quando i visitatori alterano le dimensioni dei caratteri di default del proprio browser. Se la pagina Web non utilizza unità em, è possibile che un titolo H1 sarebbe lo stesso aspetto come testo normale se i visitatori del sito hanno cambiato le dimensioni dei caratteri del browser. Utilizzando EMS per lo stile delle pagine rende anche apparire in modo coerente su più dispositivi di visualizzazione, tra cui tablet PC e smartphone.

altri usi

Ems definire anche altre proprietà della pagina, come margin e padding. Invece di dare un elemento div un margine di 10 pixel, per esempio, è possibile utilizzare la definizione CSS di "margin-left: 1em", che rende il margine sinistro del div pari alla dimensione del carattere corrente della pagina Web. Cambiare 1em a 2em, e aumenta il margine sinistro del elemento div di un fattore due. Poiché queste definizioni di unità em sono anche scalabile, le pagine scalare con grazia ed i loro elementi rimangono proporzionale.