Angivelse af størrelse og position med CSS-dummies

I en CSS-stildefinition (eller regel ) kan du på mange måder beskrive positioner og størrelser, ved at bruge forskellige måleenheder. Du kan ofte vælge hvilken enhed du ønsker, selvom visse specifikke målinger fungerer bedst i visse situationer.

For eksempel bruges mange designere, der arbejder med papir og blæk, til at angive skrifttyper i punkter . Et punkt er en absolut længde: 1/72 af en tomme. Brug af absolutte typestørrelsespecifikationer til et magasin eller en bog fungerer fint. Brugeren kan ikke desto mindre krympe, strække eller ændre billedforholdet mellem en side i en bog. ( Aspect ratio er forholdet mellem højde og bredde.) Browsere kan dog ændres ved vilje. Hvis du trækker en side af en browser, ændrer du det, hvilket gør det tyndere eller federe. Med andre ord, du ændrer sin form, dets billedformat, fra f.eks. En firkant til et rektangel.

For skrifttyper, der vises i en browser, er en relativ måleenhed bedre end de traditionelle punkter. I modsætning til absolutte målinger såsom punkter eller tommer, en relative enhed skalaer med skriftstørrelser. Som følge heraf får du mere forudsigelige resultater på websider med relative måleenheder, der angiver typestørrelse. En nyttig relative måleenhed for en webdesigner er em . Selvom em er nyttigt, bruger de fleste designere i praksis stadig punkter eller pixels, når de angiver typestørrelse. Måske er det bare vanevægt, men resultaterne ser under alle omstændigheder fint ud i de fleste browsere.

Måle længde

Her er de i en nøddeskal … Alle enheder der måler længde:

px (pixels): Pixler er den mindste enhed på displayet - prikkerne du kan undertiden se, om du kommer tæt nok til et tv. Hvis du f.eks. Indstiller din skærmopløsning til 800 × 600, betyder det, at den er 800 pixel bred med 600 pixel høj.

pt (point): Et punkt er lig med 1/72 tommer. Punkter (og picas) er klassiske skriftmålinger. De fleste browsere er standard til en 12-punkts serif skrifttype.
pc (picas): En pica svarer til 12 point.
mm (millimeter): En millimeter er.0,394 inches, så en tomme indeholder ca. 26 millimeter. Et centimeter indeholder 10 millimeter. Meget af verden bruger dette metriske system.

cm (centimeter): En centimeter er. 3937 inches, så en tomme indeholder ca. 2 1/2 centimeter.
i (tommer): Tommer er en enhed i systemet Engelsk eller imperial - der anvendes i USA. England og et par rester af kolonitiden var også i lang tid med det kejserlige system, men for nylig forkælet. Den britiske regering fulgte i 2000 med europæisk metricering, og det er nu en forbrydelse at sælge ved pundet hvor som helst i Hendes Majestæt. En mand i Cornwall, for eksempel, skulle angiveligt betale sagens omkostninger efter at være blevet fanget med at sælge makrel til £ 1. 50 pund.

em: Em er en måleenhed, der stammer fra den omtrentlige bredde af brevet < m af en skrifttype. Dette anses generelt for den bedste måde at angive skriftstørrelse i CSS, selvom få designere følger dette råd. ex (x-højden):
Ex er x-højden eller højden af det lille bogstav x , af skrifttypen for det aktuelle element.) Browsere deler normalt em med halvdelen for at få ex-højden. Denne måleenhed er for øjeblikket ikke så nyttig som emnet, fordi den ikke er så forudsigelig som gennemsnittet for alle skrifttyper.

% (procent):

Procentdelene er fremragende til angivelse af relative størrelse (det kan være i forhold til en forfader, forælder osv.). Måleenheder er ikke sagerfølsomme. Du kan kapitalisere dem eller ej, som du ønsker. Ligeledes i IE kan du inkludere et mellemrum mellem tallet og dets enhed, eller ej: For eksempel er 2 in svarende til 2in. Andre browsere kan ikke lide rummet. For at gøre det lettere at bruge små bogstaver og undgå unødvendige mellemrum er det generelt en god ide, når du arbejder med CSS. Bliv bare vant til 2'en eller 24px formatet, og du får det fint, medmindre CSS-udvalgene beslutter at vende sig om i fremtiden.

Forstå lille em

Fordi eksperter anbefaler at du bruger em, når du designer en webside, du gerne vil se lige så, er det værd at se nærmere på, hvad denne enhed rent faktisk betyder. Traditionelt var em'en bredden af brevet

m . Måske har du hørt udtrykket

m-dash eller em-dash , hvilket er bindestreg, der normalt bruges til udgivelse. Det er en vandret linje - som disse - svarer til bredden af bogstavets bogstav m (dette er ikke strengt et præcist svar på mange skrifttyper). Der er også en en-dash. Gæt hvad det er baseret på.

Em og ex enheder er

relative til hver skrifttype. Dette er nyttigt, fordi det betyder, at den størrelse, der er angivet af em, ændres på en præcis måde baseret på brugerens skærmopløsning, præferenceindstillinger og andre faktorer.Med andre ord giver du mulighed for at angive, hvad der sker relative til skrifttypen. Resultatet er proportional med de øvrige kvaliteter af skrifttyper og omgivende tekst. Også relative specifikationer som dem giver folk med handicap mulighed for at forstørre skrifttypen i deres browser, hvis det er nødvendigt. Faste specifikationer som px eller pt tilbyder ikke brugeren denne mulighed. Em og ex er traditionelle typesetters måleenhed, men deres betydning i CSS er lidt ændret. For en ting beregner computere ex ved simpelthen at dele em i halvdelen. Dette er lettere at beregne, men kun en tilnærmelse for de fleste skrifttyper. Em i CSS er skrifttypestørrelsen i pixels. Dette er nyttigt, fordi du kan angive em-enheder og stole på, at de er i forhold til forældelsens (eller andet) elementets skrifttype.

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

relative til et andet element. I denne kode er tekst i elementet defineret som 26px, men tekst inden for stykkeelementet defineres som 1. 5em, eller på anden måde en og halv gange forældrenes størrelse. Senere i HTML-koden er stykkeelementet lukket (parentes) af kropselementet. Derfor gengives afsnitsteksten på 1. 5 × 26 pixel (eller 39 pixel). krop {skriftstørrelse: 26px;}

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

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

nogle tekst

noget tekst (1. 5 em i overordnet legeme).

lidt tekst (39 pixels).

Teksten i abs klasseversionen af

er af samme størrelse som den almindelige

. Elementet er et overordnet element i

, og

er defineret som 1. 5em af dets forælder. Overordnet krop bruger 26 pixel som sin tekststørrelse, så 26 × 1. 5 resultater i 39 pixels.