Farver, typografi og box-modellen
Anvend farver med hex-, rgb- og hsl-værdier, vælg skrifttyper, angiv størrelser og linjehøjder, og brug margin, border og padding til at skabe afstand mellem elementer.
Farver, typografi og box-modellen er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.
CSS-farveværdier
CSS understøtter flere farveformater. Brug det format, der er tydeligst i din sammenhæng: hex-koder til brandfarver, hsl() til nemme farvejusteringer, rgb() til programmatisk genererede værdier og navngivne farver til hurtig prototyping.
color: #2b6cb0; /* hex */
color: rgb(43, 108, 176); /* rgb */
color: hsl(212, 61%, 43%); /* hsl */
color: royalblue; /* named */
color: rgba(0,0,0,0.5); /* rgba with alpha */Baggrundsfarver og -billeder
Angiv elementers baggrunde med background-color. Brug background-image sammen med gradienter eller URL'er. Kortformen background kombinerer farve, billede, position, størrelse og gentagelse i én deklaration.
background-color: #f7fafc;
background-image: linear-gradient(135deg, #667eea, #764ba2);
background: url('/hero.webp') center / cover no-repeat #1a202c;Skrifttypeegenskaber
Styr typografien med: font-family (skrifttype), font-size (em, rem, px), font-weight (100–900), font-style (kursiv), line-height (forhold for læsbarhed) og letter-spacing (bogstavafstand).
body {
font-family: 'Inter', system-ui, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: #1a202c;
}Tekstegenskaber
Yderligere tekstformatering: text-align (left, center, right, justify), text-decoration (underline, line-through, none), text-transform (uppercase, capitalize), text-overflow: ellipsis til afkortning.
h1 { text-align: center; text-transform: uppercase; }
a { text-decoration: none; }
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}rem vs em vs px
px er absolut. em er relativ i forhold til elementets egen skriftstørrelse (kaskaderer). rem er relativ i forhold til rodens skriftstørrelse (forudsigelig). Brug rem til det meste af størrelsesangivelsen, så brugerens skriftindstillinger respekteres.
html { font-size: 16px; } /* 1rem = 16px */
.card { padding: 1.5rem; } /* 24px */
.small { font-size: 0.875rem; } /* 14px */Boksmodellen
Alle HTML-elementer er rektangulære bokse med fire lag: indhold (selve elementets dimensioner), indvendig afstand (plads inden for kanten), kant og udvendig afstand (plads uden for kanten).
/* Total width = content + padding + border */
.box {
width: 200px;
padding: 16px;
border: 2px solid #ccc;
margin: 24px;
}box-sizing: border-box
Som standard (content-box) lægges indvendig afstand og kant til den angivne bredde. Med box-sizing: border-box medregnes indvendig afstand og kant i den angivne bredde — hvilket næsten altid er det, du ønsker.
/* Apply globally */
*, *::before, *::after {
box-sizing: border-box;
}
/* Now width: 200px includes padding and border */
.card {
width: 200px;
padding: 20px; /* doesn't add to width */
}Sammenlægning af margener
Lodrette margener mellem tilstødende blokelementer slås sammen — kun den største margen gælder. En forælders margen og margenen hos det første eller sidste underordnede element slås også sammen. Børn i Flexbox og Grid slår ikke margener sammen.
Kortformen for indvendig afstand
Kortformen padding: top right bottom left angiver alle sider. To værdier angiver lodret og vandret. Tre angiver top, vandret og bottom.
padding: 16px; /* all sides */
padding: 8px 16px; /* top/bottom left/right */
padding: 8px 16px 24px; /* top left/right bottom */
padding: 8px 16px 24px 32px; /* top right bottom left */Kantegenskaber
Angiv kanter med kortformen border: width style color. De enkelte sider kan angives med f.eks. border-top. Brug border-radius til afrundede hjørner. outline minder om en kant, men påvirker ikke layoutet.
.card {
border: 1px solid #e2e8f0;
border-radius: 8px;
}
button:focus {
outline: 2px solid #3182ce;
outline-offset: 2px;
}Overløb
overflow: hidden beskærer indhold, der overskrider elementets størrelse. overflow: scroll tilføjer rullebjælker. overflow: auto tilføjer kun rullebjælker efter behov. Brug overflow-x og overflow-y til at styre akserne uafhængigt af hinanden.
Hurtig kontrol
Med box-sizing: border-box og width: 300px; padding: 20px; border: 2px solid, hvad er elementets samlede gengivne bredde?
Opsummering: Farver, typografi og boksmodellen
Angiv farver med hex, rgb eller hsl. Anvend skrifttyper med font-family, størrelse, vægt og line-height. Alle elementer er bokse: indhold + indvendig afstand + kant + udvendig afstand. Aktivér box-sizing: border-box globalt for at få forudsigelige størrelser.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “Farver, typografi og box-modellen” gratis?
Ja — hele teksten til “Farver, typografi og box-modellen” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Farver, typografi og box-modellen”?
Anvend farver med hex-, rgb- og hsl-værdier, vælg skrifttyper, angiv størrelser og linjehøjder, og brug margin, border og padding til at skabe afstand mellem elementer. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Frontend Academy?
Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Farver, typografi og box-modellen”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Frontend Academy-lektion?
Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Selectors og kaskaden
- Farver, typografi og box-modellen
- Display: grundlæggende block, inline, flex og grid
- Positionering: relative, absolute, fixed og sticky