History

softchris a7d39944e9 🌐 Update translations via Co-op Translator		1 month ago
..
README.md	🌐 Update translations via Co-op Translator	1 month ago
assignment.md	🌐 Update translations via Co-op Translator	1 month ago

README.md

Unescape Escape

Terrarium Projekt Del 2: Introduktion til CSS

Sketchnote af Tomomi Imura

Kan du huske, hvordan dit HTML-terrarium så ret enkelt ud? Med CSS kan vi forvandle den enkle struktur til noget visuelt tiltalende.

Hvis HTML er som at bygge rammen til et hus, så er CSS alt det, der får det til at føles som et hjem - farverne på væggene, møblernes placering, belysningen og hvordan rummene hænger sammen. Tænk på, hvordan Versailles-paladset startede som en simpel jagthytte, men med omhyggelig opmærksomhed på dekoration og layout blev det forvandlet til en af verdens mest storslåede bygninger.

I dag vil vi forvandle dit terrarium fra funktionelt til poleret. Du vil lære, hvordan man placerer elementer præcist, skaber layouts, der reagerer på forskellige skærmstørrelser, og skaber den visuelle appel, der gør hjemmesider engagerende.

Ved slutningen af denne lektion vil du se, hvordan strategisk CSS-styling kan forbedre dit projekt dramatisk. Lad os tilføje lidt stil til dit terrarium.

Quiz før lektionen

Kom godt i gang med CSS

CSS bliver ofte betragtet som "at gøre tingene pæne," men det tjener et langt bredere formål. CSS er som at være instruktør for en film - du styrer ikke kun, hvordan alt ser ud, men også hvordan det bevæger sig, reagerer på interaktion og tilpasser sig forskellige situationer.

Moderne CSS er utroligt kapabelt. Du kan skrive kode, der automatisk justerer layouts til telefoner, tablets og computere. Du kan skabe glidende animationer, der leder brugernes opmærksomhed derhen, hvor det er nødvendigt. Resultaterne kan være ret imponerende, når alt fungerer sammen.

💡 Pro Tip: CSS udvikler sig konstant med nye funktioner og kapaciteter. Tjek altid CanIUse.com for at verificere browserstøtte til nyere CSS-funktioner, før du bruger dem i produktionsprojekter.

Her er, hvad vi vil opnå i denne lektion:

Skaber et komplet visuelt design til dit terrarium ved hjælp af moderne CSS-teknikker
Udforsker grundlæggende begreber som kaskade, arv og CSS-selektorer
Implementerer responsive positionerings- og layoutstrategier
Bygger terrariumbeholderen ved hjælp af CSS-former og styling

Forudsætning

Du bør have fuldført HTML-strukturen for dit terrarium fra den forrige lektion og have det klar til at blive stylet.

📺 Videomateriale: Se denne nyttige video-gennemgang

Opsætning af din CSS-fil

Før vi kan begynde at style, skal vi forbinde CSS til vores HTML. Denne forbindelse fortæller browseren, hvor den skal finde stylinginstruktionerne til vores terrarium.

I din terrarium-mappe skal du oprette en ny fil kaldet style.css og derefter linke den i din HTML-dokuments <head>-sektion:

<link rel="stylesheet" href="./style.css" />

Hvad denne kode gør:

Opretter en forbindelse mellem dine HTML- og CSS-filer
Fortæller browseren at indlæse og anvende stilarterne fra style.css
Bruger attributten rel="stylesheet" for at specificere, at dette er en CSS-fil
Refererer til filstien med href="./style.css"

Forstå CSS-kaskaden

Har du nogensinde undret dig over, hvorfor CSS kaldes "Cascading" Style Sheets? Stilarter kaskaderer ned som et vandfald, og nogle gange konflikter de med hinanden.

Tænk på, hvordan militære kommandostrukturer fungerer - en generel ordre kan sige "alle tropper skal bære grønt," men en specifik ordre til din enhed kan sige "bær blå uniformer til ceremonien." Den mere specifikke instruktion har forrang. CSS følger lignende logik, og det gør fejlfinding meget mere håndterbart, når man forstår denne hierarki.

Eksperimenter med kaskadeprioritet

Lad os se kaskaden i aktion ved at skabe en stilkonflikt. Først skal du tilføje en inline-stil til din <h1>-tag:

<h1 style="color: red">My Terrarium</h1>

Hvad denne kode gør:

Anvender en rød farve direkte på <h1>-elementet ved hjælp af inline-styling
Bruger attributten style til at indlejre CSS direkte i HTML
Skaber den højeste prioritet for stilreglen for dette specifikke element

Tilføj derefter denne regel til din style.css-fil:

h1 {
  color: blue;
}

I ovenstående har vi:

Defineret en CSS-regel, der målretter alle <h1>-elementer
Indstillet tekstfarven til blå ved hjælp af et eksternt stylesheet
Skabt en lavere prioritet regel sammenlignet med inline-stilarter

✅ Videnscheck: Hvilken farve vises i din webapp? Hvorfor vinder den farve? Kan du tænke på scenarier, hvor du måske vil tilsidesætte stilarter?

💡 CSS-prioritetsrækkefølge (højeste til laveste):

Inline-stilarter (style-attribut)

IDs (#myId)

Klasser (.myClass) og attributter

Element-selektorer (h1, div, p)

Browser-standarder

CSS-arv i praksis

CSS-arv fungerer som genetik - elementer arver visse egenskaber fra deres forældrelementer. Hvis du indstiller skrifttypen på body-elementet, vil al tekst indeni automatisk bruge den samme skrifttype. Det er lidt som hvordan Habsburg-familiens karakteristiske kæbelinje dukkede op gennem generationer uden at være specificeret for hver enkelt person.

Men ikke alt bliver arvet. Tekststilarter som skrifttyper og farver arves, men layoutegenskaber som marginer og kanter gør ikke. Ligesom børn kan arve fysiske træk, men ikke deres forældres tøjstil.

Observering af skrifttypearv

Lad os se arv i aktion ved at indstille en skrifttype på <body>-elementet:

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Hvad der sker her:

Indstiller skrifttypen for hele siden ved at målrette <body>-elementet
Bruger en skrifttype-stak med alternative muligheder for bedre browserkompatibilitet
Anvender moderne systemskrifttyper, der ser godt ud på tværs af forskellige operativsystemer
Sikrer, at alle underordnede elementer arver denne skrifttype, medmindre det specifikt tilsidesættes

Åbn din browsers udviklerværktøjer (F12), naviger til fanen Elements, og inspicer dit <h1>-element. Du vil se, at det arver skrifttypen fra body:

✅ Eksperimenttid: Prøv at indstille andre arvelige egenskaber på <body> som color, line-height eller text-align. Hvad sker der med din overskrift og andre elementer?

📝 Arvelige egenskaber inkluderer: color, font-family, font-size, line-height, text-align, visibility

Ikke-arvelige egenskaber inkluderer: margin, padding, border, width, height, position

Mestre CSS-selektorer

CSS-selektorer er din måde at målrette specifikke elementer for styling. De fungerer som at give præcise anvisninger - i stedet for at sige "huset," kan du sige "det blå hus med den røde dør på Maple Street."

CSS tilbyder forskellige måder at være specifik på, og det at vælge den rigtige selektor er som at vælge det passende værktøj til opgaven. Nogle gange skal du style alle døre i nabolaget, og andre gange kun én specifik dør.

Element-selektorer (Tags)

Element-selektorer målretter HTML-elementer efter deres tag-navn. De er perfekte til at indstille basisstilarter, der gælder bredt på tværs af din side:

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  color: #3a241d;
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

Forståelse af disse stilarter:

Indstiller konsekvent typografi på hele siden med body-selektoren
Fjerner standard browser-marginer og -polstring for bedre kontrol
Styler alle overskriftselementer med farve, justering og afstand
Bruger rem-enheder for skalerbar, tilgængelig skrifttypestørrelse

Selvom element-selektorer fungerer godt til generel styling, har du brug for mere specifikke selektorer for at style individuelle komponenter som planterne i dit terrarium.

ID-selektorer til unikke elementer

ID-selektorer bruger symbolet # og målretter elementer med specifikke id-attributter. Da ID'er skal være unikke på en side, er de perfekte til at style individuelle, specielle elementer som vores venstre og højre plantebeholdere.

Lad os oprette styling til vores terrariums sidebeholdere, hvor planterne skal være:

#left-container {
  background-color: #f5f5f5;
  width: 15%;
  left: 0;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

#right-container {
  background-color: #f5f5f5;
  width: 15%;
  right: 0;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

Hvad denne kode opnår:

Placerer beholdere ved de yderste venstre og højre kanter ved hjælp af absolute positionering
Bruger vh (viewport height) enheder for responsiv højde, der tilpasser sig skærmstørrelsen
Anvender box-sizing: border-box, så polstring inkluderes i den samlede bredde
Fjerner unødvendige px-enheder fra nulværdier for renere kode
Indstiller en subtil baggrundsfarve, der er mere behagelig for øjnene end skarp grå

✅ Kodekvalitetsudfordring: Bemærk, hvordan denne CSS bryder DRY-princippet (Don't Repeat Yourself). Kan du omstrukturere det ved at bruge både en ID og en klasse?

Forbedret tilgang:

<div id="left-container" class="container"></div>
<div id="right-container" class="container"></div>

.container {
  background-color: #f5f5f5;
  width: 15%;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

#left-container {
  left: 0;
}

#right-container {
  right: 0;
}

Klasse-selektorer til genanvendelige stilarter

Klasse-selektorer bruger symbolet . og er perfekte, når du vil anvende de samme stilarter på flere elementer. I modsætning til ID'er kan klasser genbruges i hele din HTML, hvilket gør dem ideelle til konsistente stylingmønstre.

I vores terrarium har hver plante brug for lignende styling, men også individuel placering. Vi vil bruge en kombination af klasser til fælles stilarter og ID'er til unik placering.

Her er HTML-strukturen for hver plante:

<div class="plant-holder">
  <img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.da.png" />
</div>

Vigtige elementer forklaret:

Bruger class="plant-holder" for ensartet container-styling på tværs af alle planter
Anvender class="plant" for fælles billedstyling og adfærd
Inkluderer unik id="plant1" for individuel placering og JavaScript-interaktion
Giver beskrivende alt-tekst for skærmlæser-tilgængelighed

Tilføj nu disse stilarter til din style.css-fil:

.plant-holder {
  position: relative;
  height: 13%;
  left: -0.6rem;
}

.plant {
  position: absolute;
  max-width: 150%;
  max-height: 150%;
  z-index: 2;
  transition: transform 0.3s ease;
}

.plant:hover {
  transform: scale(1.05);
}

Nedbrydning af disse stilarter:

Skaber relativ positionering for planteholderen for at etablere en positioneringskontekst
Indstiller hver planteholder til 13% højde, så alle planter passer lodret uden scrolling
Flytter holdere lidt til venstre for bedre at centrere planter inden for deres beholdere
Tillader planter at skalere responsivt med max-width og max-height egenskaber
Bruger z-index til at placere planter over andre elementer i terrariet
Tilføjer en subtil hover-effekt med CSS-overgange for bedre brugerinteraktion

✅ Kritisk tænkning: Hvorfor har vi brug for både .plant-holder og .plant selektorer? Hvad ville der ske, hvis vi kun prøvede at bruge én?

💡 Designmønster: Containeren (.plant-holder) styrer layout og positionering, mens indholdet (.plant) styrer udseende og skalering. Denne adskillelse gør koden mere vedligeholdelsesvenlig og fleksibel.

Forstå CSS-positionering

CSS-positionering er som at være scenedirektør for et teaterstykke - du styrer, hvor hver skuespiller står, og hvordan de bevæger sig rundt på scenen. Nogle skuespillere følger standardformationen, mens andre har brug for specifik placering for dramatisk effekt.

Når du forstår positionering, bliver mange layoutudfordringer håndterbare. Har du brug for en navigationsbjælke, der forbliver øverst, mens brugerne scroller? Positionering klarer det. Vil du have en tooltip, der vises på et specifikt sted? Det er også positionering.

De fem positioneringsværdier

Positioneringsværdi	Adfærd	Brugsscenarie
`static`	Standardflow, ignorerer top/left/right/bottom	Normal dokumentlayout
`relative`	Positioneret relativt til sin normale position	Små justeringer, skaber positioneringskontekst
`absolute`	Positioneret relativt til nærmeste positionerede forfader	Præcis placering, overlays
`fixed`	Positioneret relativt til viewport	Navigationsbjælker, flydende elementer
`sticky`	Skifter mellem relativ og fast baseret på scroll	Overskrifter, der klæber ved scrolling

Positionering i vores terrarium

Vores terrarium bruger en strategisk kombination af positioneringstyper til at skabe det ønskede layout:

/* Container positioning */
.container {
  position: absolute; /* Removes from normal flow */
  /* ... other styles ... */
}

/* Plant holder positioning */
.plant-holder {
  position: relative; /* Creates positioning context */
  /* ... other styles ... */
}

/* Plant positioning */
.plant {
  position: absolute; /* Allows precise placement within holder */
  /* ... other styles ... */
}

Forståelse af positioneringsstrategien:

Absolutte containere fjernes fra det normale dokumentflow og fastgøres til skærmkanten
Relativ planteholder skaber en positioneringskontekst, mens den forbliver i dokumentflowet
Absolutte planter kan placeres præcist inden for deres relative containere
Denne kombination gør det muligt for planter at stables lodret, mens de kan placeres individuelt

🎯 Hvorfor dette er vigtigt: plant-elementerne har brug for absolut positionering for at kunne blive trukket og flyttet i den næste lektion. Absolut positionering fjerner dem fra det normale layoutflow, hvilket gør drag-and-drop-interaktioner mulige.

✅ Eksperimenttid: Prøv at ændre positioneringsværdierne og observer resultaterne:

Hvad sker der, hvis du ændrer .container fra absolute til relative?
Hvordan ændrer layoutet sig, hvis .plant-holder bruger absolute i stedet for relative?
Hvad sker der, når du skifter .plant til relative positionering?

Bygning af terrariet med CSS

Nu skal vi bygge en glasbeholder ved hjælp af kun CSS - ingen billeder eller grafisk software er nødvendige.

At skabe realistisk udseende glas, skygger og dybdeeffekter ved hjælp af positionering og gennemsigtighed demonstrerer CSS's visuelle kapaciteter. Denne teknik minder om, hvordan arkitekter i Bauhaus-bevægelsen brugte simple geometriske former til at skabe komplekse, smukke strukturer. Når du forstår disse principper, vil du genkende CSS-teknikkerne bag mange webdesigns.

Skabelse af glasbeholderens komponenter

Lad os bygge terrarium-krukken stykke for stykke. Hver del bruger absolut positionering og procentbaseret størrelsesangivelse for responsivt design:

.jar-walls {
  height: 80%;
  width: 60%;
  background: #d1e1df;
  border-radius: 1rem;
  position: absolute;
  bottom: 0.5%;
  left: 20%;
  opacity: 0.5;
  z-index: 1;
  box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
}

.jar-top {
  width: 50%;
  height: 5%;
  background: #d1e1df;
  position: absolute;
  bottom: 80.5%;
  left: 25%;
  opacity: 0.7;
  z-index: 1;
  border-radius: 0.5rem 0.5rem 0 0;
}

.jar-bottom {
  width: 50%;
  height: 1%;
  background: #d1e1df;
  position: absolute;
  bottom: 0;
  left: 25%;
  opacity: 0.7;
  border-radius: 0 0 0.5rem 0.5rem;
}

.dirt {
  width: 60%;
  height: 5%;
  background: #3a241d;
  position: absolute;
  border-radius: 0 0 1rem 1rem;
  bottom: 1%;
  left: 20%;
  opacity: 0.7;
  z-index: -1;
}

Forståelse af terrarium-konstruktionen:

Bruger procentbaserede dimensioner for responsiv skalering på tværs af alle skærmstørrelser
Positionerer elementer absolut for at stable og justere dem præcist
Anvender forskellige opacitetsværdier for at skabe glaseffekten
Implementerer z-index lagdeling, så planterne vises inde i krukken
Tilføjer subtile skygger og raffineret afrunding af kanter for et mere realistisk udseende

Responsivt design med procentangivelser

Bemærk, hvordan alle dimensioner bruger procentangivelser i stedet for faste pixelværdier:

Hvorfor det er vigtigt:

Sikrer, at terrariet skalerer proportionalt på enhver skærmstørrelse
Bevarer de visuelle relationer mellem krukkens komponenter
Giver en ensartet oplevelse fra mobiltelefoner til store desktop-skærme
Tillader, at designet tilpasser sig uden at bryde den visuelle layout

CSS-enheder i praksis

Vi bruger rem-enheder til afrunding af kanter, som skalerer i forhold til rodens skriftstørrelse. Dette skaber mere tilgængelige designs, der respekterer brugerens skriftpræferencer. Læs mere om CSS relative enheder i den officielle specifikation.

✅ Visuel eksperimentering: Prøv at ændre disse værdier og observer effekterne:

Ændre krukkens opacitet fra 0.5 til 0.8 – hvordan påvirker det glaseffekten?
Juster jordens farve fra #3a241d til #8B4513 – hvilken visuel effekt har det?
Modificer jordens z-index til 2 – hvad sker der med lagdelingen?

GitHub Copilot Agent-udfordring 🚀

Brug Agent-tilstand til at fuldføre følgende udfordring:

Beskrivelse: Opret en CSS-animation, der får terrarium-planterne til at svaje blidt frem og tilbage, som om de bevæger sig i en naturlig brise. Dette vil hjælpe dig med at øve CSS-animationer, transformationer og keyframes, samtidig med at det forbedrer terrariets visuelle appel.

Opgave: Tilføj CSS-keyframe-animationer for at få planterne i terrariet til at svaje blidt fra side til side. Opret en svajende animation, der roterer hver plante let (2-3 grader) til venstre og højre med en varighed på 3-4 sekunder, og anvend den på .plant-klassen. Sørg for, at animationen kører uendeligt og har en easing-funktion for naturlig bevægelse.

Læs mere om agent-tilstand her.

🚀 Udfordring: Tilføj glasreflektioner

Klar til at forbedre dit terrarium med realistiske glasreflektioner? Denne teknik vil tilføje dybde og realisme til designet.

Du vil skabe subtile highlights, der simulerer, hvordan lys reflekteres på glasoverflader. Denne tilgang minder om, hvordan renæssancemalere som Jan van Eyck brugte lys og refleksion til at få malet glas til at fremstå tredimensionelt. Her er, hvad du sigter efter:

Din udfordring:

Skab subtile hvide eller lyse ovale former til glasreflektionerne
Positioner dem strategisk på venstre side af krukken
Anvend passende opacitet og sløringseffekter for realistisk lysreflektion
Brug border-radius til at skabe organiske, boblelignende former
Eksperimenter med gradienter eller skygger for forbedret realisme

Quiz efter forelæsning

Udvid din CSS-viden

CSS kan virke komplekst i starten, men forståelse af disse kernekoncepter giver et solidt fundament for mere avancerede teknikker.

Dine næste CSS-læringsområder:

Flexbox - gør det nemmere at justere og fordele elementer
CSS Grid - giver kraftfulde værktøjer til at skabe komplekse layouts
CSS-variabler - reducerer gentagelse og forbedrer vedligeholdelse
Responsivt design - sikrer, at websites fungerer godt på tværs af forskellige skærmstørrelser

Interaktive læringsressourcer

Øv dig på disse koncepter med disse engagerende, praktiske spil:

🐸 Flexbox Froggy - Bliv mester i Flexbox gennem sjove udfordringer
🌱 Grid Garden - Lær CSS Grid ved at dyrke virtuelle gulerødder
🎯 CSS Battle - Test dine CSS-færdigheder med kodningsudfordringer

Yderligere læring

For omfattende CSS-grundlæggende, gennemfør dette Microsoft Learn-modul: Style your HTML app with CSS

Opgave

CSS Refactoring

Ansvarsfraskrivelse:
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten Co-op Translator. Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi er ikke ansvarlige for eventuelle misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse.

README.md Unescape Escape