Måttenheterna i CSS
När man är nybörjare på CSS kan det te sig väldigt förvirrande med alla olika måttenheter som finns. När använder man em, px, cm, pc och allt vad de nu heter.
Här ska jag försöka reda ut lite i oredan och beskriva hur du kan tänka och vilka enheter du kan hålla dig till.
Dynamiska och statiska enheter
I CSS skiljer man på dynamiska (relativa) och statiska (fasta) enheter. Dynamiska enheter är lämpliga när du vill att text och andra element ska anpassas efter omkringliggande mått och storlekar, medan de statiska används när de inte ska förändras beroende på det som finns runtomkring.
Ett tips är att hålla sig till några få av alla enheter som finns. Själv har jag klarat mig mycket bra på att bara använda em, % och px. Enheter som cm och mm används när du gör stilmallar som tillämpas vid utskrift av din webbsida.
Storlek på text
På text använder man gärna relativa enheter som t.ex. em’s eller procent (skrivs %). De relativa enheterna (undantaget px) jämförs hela tiden med storleken på sin närmaste förälder.
Anger du storleken för väljaren body, betyder det att den jämförs med webbläsarens förinställda textstorlek i läget normal/medium. Fördelen med relativa textstorlekar är att användaren kan ändra textstorleken i webbläsaren vid behov. Hur pass många som verkligen utnyttjar just denna funktion, nu när vi kan zooma in hela sidan i alla nya webbläsare, är ju frågan.
Enheten em fungerar på liknande sätt som procent. Skriver du t.ex. 0.8em så ger det samma resultat som att skriva 80%, 1em motsvarar 100%, 1.4em är 140% osv. Tänk på att när du sätter storleken 1em på en rubrik, får den samma storlek som normaltexten. Den jämförs där inte med sin egen ursprungsstorlek utan med just normaltexten (som du anger för body).
body { font-size:0.8em } /* Jämförs med webbläsarens förinställning */
h1 { font-size:1em } /* Jämförs med body som är föräldern */
Angivelser i pixlar
Pixlar (skrivs px) motsvarar inte helt oväntat bildskärmens bildpunkter. Man kan ju tycka att man får ett statiskt och oföränderligt resultat av att ange exempelvis en layout-div i ett bestämt antal pixlar. Det får du också, så länge din sida visas på en vanlig datorskärm. Pixlar anses dock vara en relativ enhet, på grund av att det kan finnas olika typer av skärmar, där pixlarna har olika beskaffenhet.
Tänk dig i exemplet nedan att #spalt (barn) ligger inuti #layout (förälder).
div#layout { width:800px } /* Jämförs med aktuell skrivbordsstorlek */
div#spalt { width:50% } /* Ger bredden 400px omräknat till bildpunkter */
Marginaler, utfyllnad och indrag
Marginaler, utfyllnad och indrag angivna med relativa enheter (jag räknar bort pixlar här) jämförs även de med det aktuella elementets textstorlek. En botten-marginal på 1em får därför olika visuell höjd beroende på vilken texsstorlek elementet har som får marginalen.
Fördelen med att också ange sådana här mått med em’s eller procent är att alla avstånd, indrag och annat du ställer in för dina textelement följs åt på ett smidigt och dynamiskt sätt när användaren ändrar textstorleken i webbläsaren.
Du hittar fullständig information om ”lengths” i CSS på W3C’s webbplats.
2009-06-08 (11:49)
Webbdesign och webbutveckling
Relaterade inlägg
Inga relaterade inlägg finns.
Dela med dig: