CSS (Cascading Style Sheets) är en avgörande komponent i modern webbdesign. Det är språket som ger din webbplats dess utseende. Men för att verkligen behärska CSS måste du förstå de enheter den använder för att mäta saker som längd, vinkel, tid och upplösning.
I den här guiden diskuterar vi varje typ av CSS-enhet och ger förklaringar och praktiska exempel för att hjälpa dig förstå hur de används. Vi kommer att täcka allt från absoluta och relativa längdenheter som px, em, rem och utsiktsplatser som vw, vh, till mer specialiserade enheter som grader för rotation, sekunder s och millisekunder ms för animeringstid och till och med punkter per tum dpi för upplösning.
Genom att förstå dessa CSS-enheter får du mer kontroll över dina layouter, vilket resulterar i mer exakta, lyhörda och visuellt tilltalande layouter.
1. Absoluta längder
px (pixlar)
Detta är den mest använda enheten inom webbdesign. En pixel representerar en enda punkt på en datorskärm.
Exempel: teckenstorlek: 16px; ställer in teckensnittsstorleken till 16 pixlar.
cm (centimeter)
Denna enhet används inte ofta i webbdesign eftersom skärmstorlekar och upplösningar varierar mycket mellan enheter. Det kan dock vara användbart för tryckta medier.
Exempel: bredd: 10 cm; ställer in bredden på ett element till 10 centimeter.
mm (millimeter)
Precis som centimeter används inte millimeter ofta i webbdesign, men de kan vara användbara för tryckta medier.
Exempel: bredd: 100 mm; ställer in bredden på ett element till 100 millimeter.
i tum)
Denna enhet är också mer användbar för tryckta medier än webbdesign.
Exempel: Bredd: 4 tum; ställer in bredden på ett element till 4 tum.
pt (poäng)
Points används traditionellt i tryckta medier (1 punkt är lika med 1/72 av en tum). I CSS är punkter användbara för att skapa exakt utskrivbara stilar.
Exempel: teckenstorlek: 12 punkter; ställer in teckenstorleken till 12 punkter.
pc (spicas)
En pica motsvarar 12 poäng. Det är en annan enhet som används mer i tryck än webbdesign.
Exempel: teckenstorlek: 1 st; ställer in teckenstorleken till 12 punkter.
Absolut längd i CSS:
Nedan är ett exempel på hur dessa enheter kan användas i en CSS-regel:
div {
width: 300px;
height: 20cm;
padding: 5mm;
border: 1in solid black;
font-size: 14pt;
margin: 1pc;
}
Kodförklaring:
div-elementet skulle ha en bredd på 300 pixlar, en höjd på 20 centimeter, en stoppning på 5 millimeter, en ram på 1 tum bred, en teckenstorlek på 14 punkter och en marginal på 1 pica.
Observera dock att dessa enheter kan spela olika på olika skärmar och enheter på grund av olika pixeltätheter och skärmstorlekar.
2. Relativa längder
de
Denna enhet är i förhållande till teckenstorleken på elementet.
Exempel: Om ett element har en teckenstorlek på 16px, är 1em = 16px för det elementet. Om du ställer in marginalen: 2em;, kommer marginalen att vara två gånger den nuvarande teckenstorleken.
snabba ögonrörelser
Denna enhet är relativ till teckenstorleken för rotelementet (vanligtvis elementet). Om rotelementet har en teckenstorlek på 20px, då är 1rem = 20px för något element på sidan.
Exempel: teckenstorlek: 1,5 rem; kommer att ställa in teckenstorleken till 1,5 gånger teckenstorleken för rotelementet.
ex
Denna enhet är relativt x-höjden på det aktuella teckensnittet (ungefär höjden på gemener). Det är inte i vanligt bruk.
kap
Denna enhet är lika med bredden på “0” (noll) för det aktuella teckensnittet.
Exempel: bredd: 20 kanaler; kommer att skapa ett element som är 20 “0” tecken brett.
vw (Viewport Width)
Denna enhet är lika med 1 % av visningsportens bredd.
Exempel: bredd: 50vw; kommer att skapa ett element 50 % av visningsportens bredd.
vh (viewport höjd)
Denna enhet är lika med 1 % av visningsportens höjd.
Exempel: höjd: 70vh; kommer att skapa ett element som är 70 % så högt som visningsporten.
vmin
Denna enhet är lika med 1 % av den minsta dimensionen (bredd eller höjd) av visningsporten.
Exempel: teckenstorlek: 4vmin; kommer att ställa in teckensnittsstorleken till 4 % av visningsportens minsta dimension.
vmax
Denna enhet är lika med 1 % av den största dimensionen (bredd eller höjd) av visningsporten.
Exempel: teckenstorlek: 4vmax; kommer att ställa in teckensnittsstorleken till 4 % av visningsportens största dimension.
%
Denna enhet är relativ till det överordnade elementet.
Exempel: Om du ställer in bredden: 50%;, kommer elementet att ta upp halva bredden av sitt överordnade element.
Relativ längd i CSS:
Nedan är ett exempel på hur dessa enheter kan användas i en CSS-regel:
div {
font-size: 2em;
padding: 1.5rem;
width: 75vw;
height: 50vh;
margin: 5vmin;
line-height: 200%;
}
Förklaring:
div-elementet skulle ha en teckenstorlek som är dubbelt så stor som dess överordnade, en utfyllnad 1,5 gånger rotteckensnittsstorleken, en bredd på 75 % av visningsportens bredd, en höjd på 50 % av visningsportens höjd, visningsporten och en marginal på 5 % av visningsportens minsta dimension. Radhöjden är 200 % av den aktuella teckenstorleken.
3. Tidsenheter
s (sekunder)
Denna enhet representerar en tidslängd i sekunder. Det används ofta med animerings- och övergångsegenskaper.
Exempel: animationslängd: 2s; Det skulle göra att en animation varar i 2 sekunder.
ms (millisekunder)
Denna enhet representerar en tidslängd i millisekunder, där 1000 millisekunder är lika med 1 sekund. Används även med animerings- och övergångsegenskaper.
Exempel: övergångslängd: 500 ms; skulle göra en övergång som varar i 500 millisekunder, eller en halv sekund.
Tidsenheter i CSS #1:
Nedan är ett exempel på hur dessa enheter kan användas i en CSS-regel:
div {
transition: background-color 0.5s ease-in-out;
animation: move 2s infinite;
}
@keyframes move {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
Kodförklaring:
div-elementet skulle ha en övergång som ändrar bakgrundsfärgen på 0,5 sekunder och en animering som flyttar elementet från dess nuvarande position 100 pixlar till höger på 2 sekunder. Animeringen upprepas i oändlighet på grund av det oändliga nyckelordet.
Tidsenheter i CSS #2:
Ett annat exempel kan vara en övergång eller animering:
div {
transition: all 2s ease 1s; /* transition will start after 1 second delay */
animation: spin 4s linear 0.5s infinite; /* animation will start after 0.5 second delay */
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
Kodförklaring:
div-elementet har en övergång som startar efter 1 sekunds fördröjning och en animering som startar efter 0,5 sekunders fördröjning. Animationen får div:n att rotera på obestämd tid.
4. Upplösningsenheter
Upplösningsenheter i CSS används för att specificera pixeltätheten för utenheter. De används främst i mediefrågor för att erbjuda olika stilar till enheter med olika pixeltätheter.
dpi (punkter per tum)
Denna enhet representerar antalet pixlar per tum.
Exempel: En mediefråga som @media (minsta upplösning: 300 dpi) {…} skulle tillämpa stilarna i hängslen endast på enheter med en pixeltäthet på minst 300 punkter per tum.
dpcm (punkter per centimeter)
Denna enhet representerar antalet pixlar per centimeter. Det liknar dpi, men använder centimeter istället för tum.
Exempel: @media (minsta upplösning: 118 dpcm) {…} skulle tillämpa stilarna på enheter med en pixeltäthet på minst 118 punkter per centimeter.
dppx (Enhet av poäng per px)
Denna enhet representerar antalet punkter per CSS-pixelenhet. En CSS-pixel kan motsvara flera fysiska pixlar på en högdensitetsskärm.
Exempel: @media (minsta upplösning: 2dppx) {…} skulle tillämpa stilarna på enheter med en pixeltäthet på minst 2 punkter per enhet CSS-pixlar.
Upplösningsenheter i CSS:
Nedan är ett exempel på hur dessa enheter kan användas i en CSS-regel:
@media (min-resolution: 2dppx) {
body {
background-image: url("high-res-background.png");
}
}
@media (max-resolution: 1.5dppx) {
body {
background-image: url("low-res-background.png");
}
}
Kodförklaring:
Enheter med en pixeltäthet på 2 punkter per CSS-pixel eller högre skulle använda den högupplösta bakgrundsbilden, medan enheter med en pixeldensitet på 1,5 punkter per CSS-pixel eller lägre skulle använda den högupplösta bakgrundsbilden.
5. Vinkelenheter
Vinkelenheter i CSS används för att specificera rotation och riktning. De används ofta med egenskaper som transformation och gradient.
grader (grader)
Denna enhet representerar en vinkel i grader.
Exempel:
transformera: rotera (45 grader); skulle rotera ett element 45 grader medurs.
grad (gradianer)
Denna enhet representerar en vinkel i gradianer, där 100 gradianer motsvarar en rät vinkel.
Exempel:
transformera: rotera (100 grader); skulle rotera ett element 90 grader medurs.
rad (radianer)
Denna enhet representerar en vinkel i radianer, där 2 × radianer är lika med en hel cirkel.
Exempel:
transform: rotate(3.14159rad); skulle rotera ett element 180 grader.
vika ihop
Denna enhet representerar en hel cirkel.
Exempel:
transformera: rotera (0,5 varv); skulle rotera ett element 180 grader.
Vinkelenheter i CSS:
Ett exempel på hur dessa enheter kan användas i en CSS-regel:
div {
transform: rotate(45deg);
}
div:hover {
transform: rotate(0.5turn);
}
Kodförklaring:
div-elementet skulle roteras 45 grader som standard. När du håller muspekaren över div:n kommer den att rotera 180 grader (0,5 helt varv).
Bonus: Flexion
fr (brøkenhet)
Denna enhet används med CSS Grid Layout och representerar en bråkdel av det tillgängliga utrymmet i rutnätsbehållaren. Om du har ett rutnät med två kolumner inställda på 1fr 2fr, kommer den första kolumnen att ta upp en tredjedel av det tillgängliga utrymmet och den andra kolumnen kommer att ta upp två tredjedelar.
Exempel:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
}
Det totala tillgängliga utrymmet är uppdelat i 3 lika delar (1fr + 2fr = 3fr), den första kolumnen upptar 1/3 av utrymmet och den andra kolumnen upptar 2/3 av utrymmet.
