21 KiB

Raw Blame History Unescape Escape

Terrarium Prosjekt Del 2: Introduksjon til CSS

Sketchnote av Tomomi Imura

Husker du hvordan HTML-terrariumet ditt så ganske enkelt ut? CSS er der vi forvandler den enkle strukturen til noe visuelt tiltalende.

Hvis HTML er som å bygge rammen til et hus, er CSS alt som får det til å føles som et hjem – malingsfarger, møblering, belysning og hvordan rommene flyter sammen. Tenk på hvordan Versailles-palasset startet som en enkel jaktlodge, men nøye oppmerksomhet til dekorasjon og layout forvandlet det til en av verdens mest praktfulle bygninger.

I dag skal vi forvandle terrariumet ditt fra funksjonelt til polert. Du vil lære hvordan du posisjonerer elementer presist, lager layout som tilpasser seg ulike skjermstørrelser, og skaper den visuelle appellen som gjør nettsteder engasjerende.

Ved slutten av denne leksjonen vil du se hvordan strategisk CSS-styling kan forbedre prosjektet ditt dramatisk. La oss legge til litt stil i terrariumet ditt.

Quiz før forelesning

Komme i gang med CSS

CSS blir ofte sett på som bare "å gjøre ting pene," men det har et mye bredere formål. CSS er som å være regissør for en film – du kontrollerer ikke bare hvordan alt ser ut, men også hvordan det beveger seg, reagerer på interaksjon og tilpasser seg ulike situasjoner.

Moderne CSS er utrolig kapabel. Du kan skrive kode som automatisk justerer layout for telefoner, nettbrett og stasjonære datamaskiner. Du kan lage jevne animasjoner som guider brukernes oppmerksomhet dit det trengs. Resultatene kan være ganske imponerende når alt fungerer sammen.

💡 Proff-tips: CSS utvikler seg stadig med nye funksjoner og kapabiliteter. Sjekk alltid CanIUse.com for å verifisere nettleserstøtte for nyere CSS-funksjoner før du bruker dem i produksjonsprosjekter.

Dette skal vi oppnå i denne leksjonen:

Skaper et komplett visuelt design for terrariumet ditt ved hjelp av moderne CSS-teknikker
Utforsker grunnleggende konsepter som kaskade, arv og CSS-selektorer
Implementerer responsive posisjonerings- og layoutstrategier
Bygger terrariumbeholderen ved hjelp av CSS-former og styling

Forutsetning

Du bør ha fullført HTML-strukturen for terrariumet ditt fra forrige leksjon og ha det klart til å styles.

📺 Videoressurs: Sjekk ut denne nyttige videoen

Sette opp CSS-filen din

Før vi kan begynne å style, må vi koble CSS til HTML-en vår. Denne koblingen forteller nettleseren hvor den finner stylinginstruksjonene for terrariumet vårt.

I terrarium-mappen din, opprett en ny fil kalt style.css, og koble den deretter til HTML-dokumentets <head>-seksjon:

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

Dette gjør koden:

Oppretter en kobling mellom HTML- og CSS-filene dine
Forteller nettleseren å laste og bruke stilene fra style.css
Bruker attributtet rel="stylesheet" for å spesifisere at dette er en CSS-fil
Refererer til filbanen med href="./style.css"

Forstå CSS-kaskaden

Har du noen gang lurt på hvorfor CSS kalles "Cascading" Style Sheets? Stiler kaskader ned som et fossefall, og noen ganger kommer de i konflikt med hverandre.

Tenk på hvordan militære kommandostrukturer fungerer – en generell ordre kan si "alle tropper skal ha på seg grønt," men en spesifikk ordre til enheten din kan si "ha på deg blå uniform til seremonien." Den mer spesifikke instruksjonen har forrang. CSS følger lignende logikk, og å forstå denne hierarkien gjør feilsøking mye enklere.

Eksperimentere med kaskadeprioritet

La oss se kaskaden i aksjon ved å lage en stilkonflikt. Først, legg til en inline-stil i <h1>-taggen din:

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

Hva denne koden gjør:

Bruker en rød farge direkte på <h1>-elementet ved hjelp av inline-styling
Bruker attributtet style for å legge inn CSS direkte i HTML
Oppretter den høyeste prioriteten for stilregelen for dette spesifikke elementet

Legg deretter til denne regelen i style.css-filen din:

h1 {
  color: blue;
}

I det ovennevnte har vi:

Definert en CSS-regel som retter seg mot alle <h1>-elementer
Satt tekstfargen til blå ved hjelp av et eksternt stilark
Opprettet en lavere prioritet regel sammenlignet med inline-stiler

✅ Kunnskapssjekk: Hvilken farge vises i webappen din? Hvorfor vinner den fargen? Kan du tenke på scenarier der du kanskje vil overstyre stiler?

💡 CSS-prioritetsrekkefølge (høyest til lavest):

Inline-stiler (style-attributt)

ID-er (#myId)

Klasser (.myClass) og attributter

Element-selektorer (h1, div, p)

Nettleserens standardinnstillinger

CSS-arv i praksis

CSS-arv fungerer som genetikk – elementer arver visse egenskaper fra sine overordnede elementer. Hvis du setter fontfamilien på body-elementet, bruker all tekst inni automatisk den samme fonten. Det er som hvordan Habsburg-familiens karakteristiske kjeve dukket opp gjennom generasjoner uten å bli spesifisert for hver enkelt.

Men ikke alt blir arvet. Tekststiler som fonter og farger blir arvet, men layoutegenskaper som marginer og grenser blir ikke. Akkurat som barn kan arve fysiske trekk, men ikke foreldrenes klesvalg.

Observere fontarv

La oss se arv i aksjon ved å sette en fontfamilie på <body>-elementet:

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

Bryte ned hva som skjer her:

Setter fontfamilien for hele siden ved å rette seg mot <body>-elementet
Bruker en fontstabel med reservealternativer for bedre nettleserkompatibilitet
Bruker moderne systemfonter som ser flotte ut på tvers av ulike operativsystemer
Sikrer at alle barnelementer arver denne fonten med mindre det spesifikt overstyres

Åpne nettleserens utviklerverktøy (F12), naviger til Elements-fanen, og inspiser <h1>-elementet ditt. Du vil se at det arver fontfamilien fra body:

✅ Eksperimenttid: Prøv å sette andre arvelige egenskaper på <body> som color, line-height eller text-align. Hva skjer med overskriften din og andre elementer?

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

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

Mestre CSS-selektorer

CSS-selektorer er din måte å rette seg mot spesifikke elementer for styling. De fungerer som å gi presise retninger – i stedet for å si "huset," kan du si "det blå huset med den røde døren på Maple Street."

CSS gir ulike måter å være spesifikk på, og å velge riktig selektor er som å velge det passende verktøyet for oppgaven. Noen ganger trenger du å style hver dør i nabolaget, og noen ganger bare én spesifikk dør.

Element-selektorer (Tagger)

Element-selektorer retter seg mot HTML-elementer etter taggnavn. De er perfekte for å sette grunnleggende stiler som gjelder bredt over siden din:

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å disse stilene:

Setter konsistent typografi over hele siden med body-selektoren
Fjerner standard nettlesermarginer og padding for bedre kontroll
Styler alle overskriftselementer med farge, justering og avstand
Bruker rem-enheter for skalerbar, tilgjengelig fontstørrelse

Mens element-selektorer fungerer godt for generell styling, trenger du mer spesifikke selektorer for å style individuelle komponenter som plantene i terrariumet ditt.

ID-selektorer for unike elementer

ID-selektorer bruker symbolet # og retter seg mot elementer med spesifikke id-attributter. Siden ID-er må være unike på en side, er de perfekte for å style individuelle, spesielle elementer som våre venstre og høyre plantebeholdere.

La oss lage stylingen for terrariumets sidebeholdere der plantene skal bo:

#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;
}

Dette oppnår koden:

Posisjonerer beholdere ved de ytterste venstre og høyre kantene ved hjelp av absolute posisjonering
Bruker vh (viewport height) enheter for responsiv høyde som tilpasser seg skjermstørrelse
Bruker box-sizing: border-box slik at padding inkluderes i totalbredden
Fjerner unødvendige px-enheter fra nullverdier for renere kode
Setter en subtil bakgrunnsfarge som er mer behagelig for øynene enn skarp grå

✅ Kodekvalitetsutfordring: Legg merke til hvordan denne CSS-en bryter DRY (Don't Repeat Yourself)-prinsippet. Kan du refaktorere den ved å bruke både en ID og en klasse?

Forbedret tilnærming:

<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 for gjenbrukbare stiler

Klasse-selektorer bruker symbolet . og er perfekte når du vil bruke de samme stilene på flere elementer. I motsetning til ID-er kan klasser gjenbrukes gjennom hele HTML-en din, noe som gjør dem ideelle for konsistente stylingsmønstre.

I terrariumet vårt trenger hver plante lignende styling, men også individuell posisjonering. Vi vil bruke en kombinasjon av klasser for delte stiler og ID-er for unik posisjonering.

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.no.png" />
</div>

Viktige elementer forklart:

Bruker class="plant-holder" for konsistent beholderstyling på tvers av alle planter
Bruker class="plant" for delte bildestiler og oppførsel
Inkluderer unik id="plant1" for individuell posisjonering og JavaScript-interaksjon
Gir beskrivende alt-tekst for skjermlesertilgjengelighet

Legg nå til disse stilene i style.css-filen din:

.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);
}

Bryte ned disse stilene:

Oppretter relativ posisjonering for planteholderen for å etablere en posisjoneringskontekst
Setter hver planteholder til 13% høyde, slik at alle planter passer vertikalt uten scrolling
Flytter beholdere litt til venstre for bedre sentrering av planter innenfor beholderne
Lar planter skalere responsivt med max-width og max-height egenskaper
Bruker z-index for å lagre planter over andre elementer i terrariumet
Legger til en subtil hover-effekt med CSS-overganger for bedre brukerinteraksjon

✅ Kritisk tenkning: Hvorfor trenger vi både .plant-holder og .plant selektorer? Hva ville skjedd hvis vi prøvde å bruke bare én?

💡 Designmønster: Beholderen (.plant-holder) kontrollerer layout og posisjonering, mens innholdet (.plant) kontrollerer utseende og skalering. Denne separasjonen gjør koden mer vedlikeholdbar og fleksibel.

Forstå CSS-posisjonering

CSS-posisjonering er som å være sceneregissør for et teaterstykke – du dirigerer hvor hver skuespiller står og hvordan de beveger seg rundt på scenen. Noen skuespillere følger standardformasjonen, mens andre trenger spesifikk posisjonering for dramatisk effekt.

Når du forstår posisjonering, blir mange layoututfordringer håndterbare. Trenger du en navigasjonslinje som holder seg øverst mens brukerne ruller? Posisjonering fikser det. Vil du ha en verktøytips som vises på et spesifikt sted? Det er også posisjonering.

De fem posisjonsverdiene

Posisjonsverdi	Oppførsel	Bruksområde
`static`	Standardflyt, ignorerer top/left/right/bottom	Normal dokumentlayout
`relative`	Posisjonert relativt til sin normale posisjon	Små justeringer, opprette posisjoneringskontekst
`absolute`	Posisjonert relativt til nærmeste posisjonerte forfader	Presis plassering, overlegg
`fixed`	Posisjonert relativt til visningsvinduet	Navigasjonslinjer, flytende elementer
`sticky`	Veksler mellom relativ og fast basert på scrolling	Overskrifter som fester seg ved scrolling

Posisjonering i vårt terrarium

Terrariumet vårt bruker en strategisk kombinasjon av posisjonstyper for å skape ønsket 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å posisjoneringsstrategien:

Absolutte beholdere fjernes fra normal dokumentflyt og festes til skjermkanter
Relativ planteholder skaper en posisjoneringskontekst mens den forblir i dokumentflyt
Absolutte planter kan posisjoneres presist innenfor sine relative beholdere
Denne kombinasjonen lar planter stables vertikalt mens de er individuelt posisjonerbare

🎯 Hvorfor dette er viktig: plant-elementene trenger absolutt posisjonering for å bli flyttbare i neste leksjon. Absolutt posisjonering fjerner dem fra den normale layoutflyten, noe som gjør dra-og-slipp-interaksjoner mulig.

✅ Eksperimenttid: Prøv å endre posisjonsverdiene og observer resultatene:

Hva skjer hvis du endrer .container fra absolute til relative?
Hvordan endrer layouten seg hvis .plant-holder bruker absolute i stedet for relative?
Hva skjer når du bytter .plant til relative posisjonering?

Bygge terrariumet med CSS

Nå skal vi bygge en glasskrukke ved hjelp av kun CSS – ingen bilder eller grafikkprogramvare nødvendig.

Å lage realistisk utseende glass, skygger og dybdeeffekter ved hjelp av posisjonering og gjennomsiktighet demonstrerer CSS sine visuelle kapabiliteter. Denne teknikken speiler hvordan arkitekter i Bauhaus-bevegelsen brukte enkle geometriske former for å skape komplekse, vakre strukturer. Når du forstår disse prinsippene, vil du gjenkjenne CSS-teknikkene bak mange webdesign.

Lage komponentene til glasskrukken

La oss bygge terrarium-glasset bit for bit. Hver del bruker absolutt posisjonering og prosentbasert størrelse for responsiv 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å terrarium-konstruksjonen:

Bruker prosentbaserte dimensjoner for responsiv skalering på alle skjermstørrelser
Plasserer elementer absolutt for å stable og justere dem presist
Bruker ulike opasitetsverdier for å skape en glassgjennomsiktighetseffekt
Implementerer z-index lagdeling slik at plantene vises inne i glasset
Legger til subtile skygger og raffinert avrunding av kantene for et mer realistisk utseende

Responsiv design med prosenter

Legg merke til hvordan alle dimensjoner bruker prosenter i stedet for faste pikselverdier:

Hvorfor dette er viktig:

Sikrer at terrariet skalerer proporsjonalt på alle skjermstørrelser
Opprettholder de visuelle relasjonene mellom glasskomponentene
Gir en konsistent opplevelse fra mobiltelefoner til store skrivebordsskjermer
Lar designet tilpasse seg uten å bryte det visuelle oppsettet

CSS-enheter i praksis

Vi bruker rem-enheter for avrunding av kantene, som skalerer relativt til rotfontstørrelsen. Dette skaper mer tilgjengelige design som respekterer brukerens fontpreferanser. Lær mer om CSS relative enheter i den offisielle spesifikasjonen.

✅ Visuell eksperimentering: Prøv å endre disse verdiene og observer effektene:

Endre glassets opasitet fra 0.5 til 0.8 – hvordan påvirker dette glassets utseende?
Juster jordfargen fra #3a241d til #8B4513 – hvilken visuell effekt har dette?
Endre z-index for jorden til 2 – hva skjer med lagdelingen?

GitHub Copilot Agent-utfordring 🚀

Bruk Agent-modus for å fullføre følgende utfordring:

Beskrivelse: Lag en CSS-animasjon som får terrarium-plantene til å svaie forsiktig frem og tilbake, og simulerer en naturlig briseeffekt. Dette vil hjelpe deg med å øve på CSS-animasjoner, transformasjoner og nøkkelrammer, samtidig som det forbedrer terrariets visuelle appell.

Oppgave: Legg til CSS-nøkkelrammeanimasjoner for å få plantene i terrariet til å svaie forsiktig fra side til side. Lag en svaieanimasjon som roterer hver plante litt (2-3 grader) til venstre og høyre med en varighet på 3-4 sekunder, og bruk den på .plant-klassen. Sørg for at animasjonen går i en uendelig loop og har en easing-funksjon for naturlig bevegelse.

Lær mer om agent-modus her.

🚀 Utfordring: Legge til glassrefleksjoner

Klar til å forbedre terrariet med realistiske glassrefleksjoner? Denne teknikken vil gi dybde og realisme til designet.

Du skal lage subtile høydepunkter som simulerer hvordan lys reflekteres fra glassoverflater. Denne tilnærmingen ligner på hvordan renessansemalere som Jan van Eyck brukte lys og refleksjon for å få malt glass til å se tredimensjonalt ut. Her er målet ditt:

Din utfordring:

Lag subtile hvite eller lyse ovale former for glassrefleksjonene
Plasser dem strategisk på venstre side av glasset
Bruk passende opasitet og uskarphetseffekter for realistisk lysrefleksjon
Bruk border-radius for å lage organiske, bobleaktige former
Eksperimenter med gradienter eller skygger for forbedret realisme

Quiz etter forelesning

Utvid CSS-kunnskapene dine

CSS kan virke komplekst i starten, men å forstå disse kjernekonseptene gir et solid grunnlag for mer avanserte teknikker.

Dine neste CSS-læringsområder:

Flexbox - forenkler justering og distribusjon av elementer
CSS Grid - gir kraftige verktøy for å lage komplekse oppsett
CSS-variabler - reduserer repetisjon og forbedrer vedlikeholdbarhet
Responsiv design - sikrer at nettsteder fungerer godt på ulike skjermstørrelser

Interaktive læringsressurser

Øv på disse konseptene med disse engasjerende, praktiske spillene:

🐸 Flexbox Froggy - Mestre Flexbox gjennom morsomme utfordringer
🌱 Grid Garden - Lær CSS Grid ved å dyrke virtuelle gulrøtter
🎯 CSS Battle - Test CSS-ferdighetene dine med kodeutfordringer

Ytterligere læring

For omfattende CSS-grunnleggende, fullfør dette Microsoft Learn-modulet: Style your HTML app with CSS

Oppgave

CSS Refactoring

Ansvarsfraskrivelse:
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten Co-op Translator. Selv om vi streber etter nøyaktighet, vær oppmerksom på at automatiserte oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på sitt opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.

21 KiB Raw Blame History Unescape Escape