CSS - Enheter og Farger
For å mestre CSS må du forstå to helt grunnleggende byggesteiner: hvordan vi angir størrelser og avstander (enheter), og hvordan vi definerer farger. (For hvordan du refererer til eksterne ressurser og filer, se temasiden om filbaner i HTML og CSS).
1. Måleenheter i CSS (Relative vs. Absolutte)
I CSS angir vi størrelser på bredde, høyde, marginer, padding og tekststørrelse ved hjelp av tall etterfulgt av en enhet (f.eks. 20px eller 2rem). Vi deler enhetene inn i to hovedgrupper:
Absolutte enheter
Absolutte enheter har en fast, låst fysisk størrelse og påvirkes ikke av skjermstørrelsen eller foreldreelementet.
- px (piksler): Den desidert mest brukte absolutte enheten på digitale skjermer. 1 piksel tilsvarer 1 bildepunkt på skjermen. Perfekt for rammer (borders) og presis kontroll.
- pt, cm, mm, in: Ekte fysiske måleenheter (punkter, centimeter, tommer). Brukes primært til utskrift (print-stilark), ikke vanlige nettsider.
Relative enheter (Anbefalt)
Relative enheter tilpasser seg størrelsen på andre elementer, fontstørrelsen eller selve nettleservinduet. De er nøkkelen til responsivt design!
- rem (root em): Relativ til skriftstørrelsen på rot-elementet (
<html>). Standard i nettleseren er vanligvis16px. Dermed er1rem = 16px,2rem = 32px,0.5rem = 8px. Svært anbefalt! - % (prosent): Relativ til bredden eller høyden til forelder-elementet. Hvis en container er 800px bred, vil et element med
width: 50%bli 400px. - em: Relativ til fontstørrelsen på det gjeldende elementet (eller forelderen). Kan forårsake uventet skalering i nøstede lister.
- vw (viewport width):
1vw= 1% av hele nettleservinduets bredde (f.eks. er100vwfull skjermbredde). - vh (viewport height):
1vh= 1% av hele nettleservinduets høyde (f.eks. er100vhfull skjermhøyde).
Oversikt over vanlige enheter:
| Enhet | Type | Relativ til | Typisk bruksområde |
|---|---|---|---|
px | Absolutt | 1 bildepunkt | Rammer (border: 1px solid), små faste ikoner |
rem | Relativ | Rot-elementets font-size (16px) | Tekststørrelse (font-size), padding, marginer |
% | Relativ | Foreldreelementets størrelse | Layout-bredder (f.eks. bredde på kolonner) |
vw / vh | Relativ | Nettleservinduet (Viewport) | Helsides helteseksjoner (hero sections: 100vh) |
2. Farger i CSS (Nøkkelord, RGB og HEX)
CSS tilbyr flere måter å spesifisere farger på tekst, bakgrunner og kanter:
A. Fargenøkkelord (Named Colors)
CSS har 140+ forhåndsdefinerte fargenavn som du kan skrive direkte som verdi:
B. RGB og RGBA (Red, Green, Blue, Alpha)
I dataskjermer lages alle farger ved å blande rødt, grønt og blått lys. Hver fargekanal har en verdi fra 0 (ingenting) til 255 (maksimal styrke).
rgb(255, 0, 0)→ Ren rødrgb(0, 255, 0)→ Ren grønnrgb(0, 0, 255)→ Ren blårgb(0, 0, 0)→ Sort (inget lys)rgb(255, 255, 255)→ Hvit (fullt lys på alle)
RGBA og Gjennomsiktighet (Alpha): Den fjerde verdien kalles alpha og styrer gjennomsiktigheten fra 0.0 (helt usynlig) til 1.0 (helt ugjennomsiktig).
/* Halvgjennomsiktig blå bakgrunn */
.glass-boks {
background-color: rgba(56, 189, 248, 0.5);
}C. Heksadesimale Fargekoder (HEX)
HEX-koder starter med en hashtag (#) etterfulgt av seks heksadesimale sifre (0–9 og a–f) som representerer Rød, Grønn og Blå (#RRGGBB). F.eks. er #ffffff hvit og #000000 sort.
3. Interaktiv RGB-Fargemikser 🎛️
Dra i sliderne for rød, grønn, blå og alpha for å mikse din egen farge og se hvordan kodene genereres:
.mitt-element {
background-color: rgba(56, 189, 248, 1); /* RGB med alpha */
color: #38bdf8; /* HEX-kode */
}🗝️ Sentrale Begreper innen Enheter og Farger
- px (Piksel): Den viktigste absolutte måleenheten for skjermer.
- rem (Root em): Relativ måleenhet basert på rot-skriftstørrelsen (vanligvis 16px). Anbefalt for skalerbare layouts og tekst.
- vw / vh: Viewport-enheter som representerer 1% av nettleservinduets bredde og høyde.
- RGB: Fargemodell basert på rød, grønn og blå kanal fra 0 til 255.
- Alpha: Gjennomsiktighetsverdi i RGBA mellom 0.0 (gjennomsiktig) og 1.0 (ugjennomsiktig).