Angir størrelse og posisjon med CSS-dummies

I en CSS-stildefinisjon (eller regel ) kan du på mange måter beskrive posisjoner og størrelser, kan bruke forskjellige måleenheter. Du kan ofte velge hvilken enhet du vil, selv om visse spesifikke typer målinger fungerer best i enkelte situasjoner.

For eksempel brukes mange designere som arbeider med papir og blekk til å spesifisere skrifttyper i poeng . Et punkt er en absolutt lengde: 1/72 av en tomme. Bruke absolutte typestørrelsespecifikasjoner for et magasin eller en bok fungerer fint, men brukeren kan ikke krympe, strekke eller endre aspektforholdet til en side i en bok. ( Aspect ratio er forholdet mellom høyde og bredde.) Nettlesere kan imidlertid omformes etter ønske. Hvis du drar en side av en nettleser, endrer du den og gjør den tynnere eller fetere. Med andre ord, du endrer formen, aspektforholdet, for eksempel fra et firkant til et rektangel.

For skrifttyper som vises i en nettleser, er en relativ måleenhet bedre enn de tradisjonelle punktene. I motsetning til absolutt målinger som poeng eller tommer, en relativ enhet skalerer med skriftstørrelser. Som et resultat får du mer forutsigbare resultater på websider med relative måleenheter som angir typen størrelse. En nyttig relativ måleenhet for en webdesigner er em . Selv om em er nyttig, bruker de fleste designere fortsatt poeng eller piksler når de angir type størrelse. Kanskje det bare er vane, men i alle fall ser resultatene seg fint ut i de fleste nettlesere.

Måle lengde

Her er de i et nøtteskall … alle enhetene som måler lengde:

px (piksler): Piksler er den minste enheten på displayet - prikkene Du kan noen ganger se om du kommer nær nok til en TV. For eksempel betyr innstillingen av skjermoppløsningen til 800 × 600 at den er 800 piksler bred med 600 piksler høy.

pt (poeng): Et punkt er lik 1/72 tommer. Poeng (og picas) er klassiske skriftmålinger. De fleste nettlesere er standard på en 12-punkts serif skrifttype.
pc (picas): En pica er 12 poeng.
mm (millimeter): En millimeter er.0394 inches, så en tomme inneholder omtrent 26 millimeter. En centimeter inneholder 10 millimeter. Mye av verden bruker dette metriske systemet.

cm (centimeter): En centimeter er. 3937 inches, så en tomme inneholder omtrent 2 1/2 centimeter.
i (tommer): Tommer er en enhet i systemet Engelsk eller imperial - brukt i USA. England og noen få rester av kolonitiden bodde også lenge i det keiserlige systemet, men forkortet nylig. Den britiske regjeringen fulgte i 2000 med europeisk metriskering, og det er nå en kriminell handling å selge ved pundet hvor som helst i Hennes Majestets rike. En mann i Cornwall, for eksempel, måtte angivelig betale domstolskostnader etter å ha blitt fanget med å selge makrell på £ 1. 50 pund.

em: Em er en måleenhet utledet fra den omtrentlige bredden av brevet < m av en skrifttype. Dette anses generelt som den beste måten å spesifisere skriftstørrelse på CSS, selv om få designere følger dette rådet. ex (x-høyden):
Ex er x-høyden eller høyden på små bokstaver x , av skrifttypen for det aktuelle elementet.) Nettlesere deler vanligvis em med halvparten for å få ex-høyden. Denne måleenheten er for øyeblikket ikke så nyttig som emnet fordi den ikke er så forutsigbar som gjennomsnitt for alle skrifttyper.

% (prosent):

Prosentene er gode for å angi relative størrelse (det kan være i forhold til en forfedre, forelder, og så videre). Måleenheter er ikke sosialfølsomme. Du kan kapitalisere dem eller ikke, som du ønsker. På samme måte, i IE, kan du inkludere et mellomrom mellom tallet og dets enhet, eller ikke: For eksempel er 2 i tilsvarende 2in. Andre nettlesere liker ikke plassen. For enkelhet er det vanligvis en god ide å bruke små bokstaver og unngå unødvendige mellomrom når man arbeider med CSS. Bare bli vant med 2in eller 24px formatet, og du får det bra, med mindre CSS-komiteene bestemmer seg for å reversere seg i fremtiden.

Forstå lite em

Fordi eksperter anbefaler at du bruker em når du utformer en nettside du vil se akkurat slik, er det verdt å se nærmere på hva denne enheten egentlig betyr. Tradisjonelt var emet bredden på brevet

m . Kanskje du har hørt begrepet

m-dash eller em-dash , som er dashet som regel ansatt i publisering. Det er en horisontal linje - som disse - tilsvarer bredden på skrifttallets brev m (dette er ikke strengt en presis ekvivalent i mange skrifttyper). Det er også en en-dash. Gjett hva den er basert på.

Em og ex enheter er

relative til hver skrifttype. Dette er nyttig fordi det betyr at størrelsen som er spesifisert av em, endres på en presis måte basert på brukerens skjermoppløsning, preferanseinnstillinger og andre faktorer.Med andre ord kan du spesifisere hva som skjer relativ til skrifttypen. Resultatet er proporsjonalt med de andre egenskapene til skrifttypen og omgivende tekst. Også, relativt spesifikasjoner som dem tillater personer med funksjonshemninger å forlenge skrifttypen i nettleseren etter behov. Faste spesifikasjoner som px eller pt tilbyr ikke brukeren dette alternativet. Em og ex er tradisjonelle typeretters måleenhet, men deres betydning i CSS er litt modifisert. For en ting beregner datamaskiner ex ved ganske enkelt å dele em i halvparten. Dette er enklere å beregne, men bare en tilnærming for de fleste skriftene. Em i CSS er skriftstørrelsen i piksler. Dette er nyttig fordi du kan angi em-enheter og stole på at de er i forhold til forfatterens (eller andre) elementets skrifttype.

Her er et eksperiment for å få ideen om hvordan em er

relativ til et annet element. I denne koden er tekst i elementet definert som 26px, men tekst i avsnittet element defineres som 1. 5em, eller sett på en annen måte, en og en halv ganger størrelsen på foreldrene. Senere i HTML-koden, er avsnittet elementet vedlagt (parented) av kroppselementet. Derfor blir tekstteksten gjengitt på 1. 5 × 26 piksler (eller 39 piksler). kropp {skriftstørrelse: 26px;}

p {font-size: 1. 5em;}

s. abs {font-size: 39px;}

litt tekst

litt tekst (1. 5 em i overordnet).

litt tekst (39 piksler).

Teksten i abs-klasseversjonen av

gjengis i samme størrelse som det vanlige

. Elementet er et overordnet element i

, og

er definert som 1. 5em av dets overordnede. Overordnet kroppen bruker 26 piksler som tekststørrelse, så 26 × 1. 5 resultater i 39 piksler.