EM Bruk i CSS

Hvis du viser kildekoden til en HTML-side eller CSS-dokument, kan du se en CSS attributtverdi som heter "em". Mens EMS er ikke nødvendig å opprette en webside, profesjonelle site designere forstår viktigheten av å bruke dem til å legge ut design for sofistikerte utseende nettsteder.

CSS måleenheter

Cascading Style Sheet definisjoner lar webdesignere å kontrollere utseendet og størrelser av sideelementer. En tekstelement, for eksempel, har en font eiendom. Fonter kan variere i stil, farge og størrelse på en webside, og du kan definere en størrelse med "%", "px" eller "pt", som står for prosent, pixel og punkt, henholdsvis. Du kan også sette en font størrelse du bruker dem.

Em Units

Typografer opprinnelig definert en em å representere bredden av en stor bokstav "M." I dag står dem for høyden på en skrift i stedet for bredden. I Web design, representerer et em skriftstørrelsen for et element moder container - når som forelder er kroppen element, hvert barn element på siden har en verdi på 1em. Fordi ordnede objekter arver CSS eiendomsverdiene på sine foreldre, mange designere plassere em definisjoner i CSS-klasse som definerer kroppen element, slik at alle underordnede objekter å arve den samme em verdi.

fordeler

Ansette em enheter for å angi skriftstørrelser gjør websiden skalerbar, noe som betyr at det vil endre størrelsen på alle elementer proporsjonalt når siden endres størrelse, for eksempel når besøkende endre standardskriftstørrelser av sine nettlesere. Hvis websiden ikke bruker em enheter, er det mulig at en H1 overskrift ville se det samme som vanlig tekst om besøkende endret sine leserskriftstørrelser. Ved hjelp av EMS å style sidene dine også gjør dem vises konsekvent på tvers av flere visnings enheter, inkludert nettbrett og smarttelefoner.

andre bruksområder

Ems definerer også andre sideegenskaper, som for eksempel margin og padding. I stedet for å gi en div element en 10-piksel margin, for eksempel, kan du bruke CSS definisjonen av "margin-left: 1em", som gjør at div venstre marg lik websiden gjeldende skriftstørrelse. Endre 1em til 2em, og div elementets venstre øker margin med en faktor på to. Fordi disse em enhets definisjoner også er skalerbar, sidene skalere grasiøst og deres elementer forbli proporsjonal.