Introduksjon til CSS
Introduksjon til CSS
Introduksjon til CSS er en gratis leksjon i HTML for Kids på CoddyKit. Dette er leksjon 1 av 1. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i HTML for Kids, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i HTML for Kids inneholder totalt 1 leksjoner.
Introduksjon 1
Hei,
I forrige kapittel lærte vi hva CSS er, og hvorfor vi bør bruke det. Nå vil jeg gi en kort introduksjon med et enkelt eksempel.
La oss definere en enkel HTML-side.
<html>
<body>
<h1>Hello CSS</h1>
</body>
</html>Inline-stil
La oss nå endre fargen på Hello CSS-overskriften til rød. Til dette bruker vi style-attributtet , som kan legges til i nesten alle HTML-tagger.
Med dette attributtet kan vi definere en stil direkte i hvert element.
Når vi ser på forhåndsvisningen, vil vi se at fargen på overskriften blir rød.
color: red;
Vi har gitt elementets skriftfarge en stildefinisjon.
<h1 style="color:red;">Hello CSS</h1>Inline-stil 2
De husker kanskje at vi sa at vi bruker attributter til å tilordne tagger egenskaper og funksjoner i HTML.
Et av de viktigste av disse attributtene er style-attributtet, som vi bruker til å definere en stil for tagger.
Inline-stil 3
La oss nå legge til en ny stil. Vi kan øke tekststørrelsen med font-size.
Når vi definerer flere stiler, må vi skille stilene med semikolon.
I eksempelet nedenfor skilles stilene for farge og font-size med semikolon.
<h1 style="color:red;font-size:50px;">
Hello CoddyKit
</h1>Stildefinisjon
Syntaksen er viktig når vi legger til stil.
styleName: styleValue;
La oss igjen huske at vi må tilordne stil som vist ovenfor.
Eksempel
La oss nå utvide eksempelet litt mer.
<html>
<body>
<h1>Hello CoddyKit</h1>
<p>Lorem Ipsum is simply dummy
text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s,
when an unknown printer took a galley of
type and scrambled it to make a
type specimen book.</p>
<h1>Hello CSS</h1>
</body>
</html>Eksempel 2
I dette eksempelet ønsker vi å endre fargen på all tekst til rød. For hver tagg kan vi definere stilen slik.
<html>
<body>
<h1 style="color:red;">Hello Coddy</h1>
<p style="color:red;">
Lorem Ipsum is simply dummy
text of the printing and typesetting industry
Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
when an unknown printer took a galley
of type and scrambled it to
make a type specimen book.</p>
<h1 style="color:red;">Hello CSS</h1>
</body>
</html>CSS-selektor
Men det ser ikke særlig bra ut på den måten, gjør det vel?
Vi har nå tre elementer på siden, og vi endret tekstfargen til rød for hvert av dem. Hvis antallet øker til 3000, gir det imidlertid ikke mye mening å definere en stil for hvert element.
I stedet bør vi bruke CSS-selektorer fremfor å definere hvert element inline.
Introduksjon 12
La oss nå lære om selektorbegrepet.
CSS-selektorer har ansvar for å velge det relevante HTML-elementet i dokumentet, slik at HTML-elementer kan styles.
Som vi kan forstå av navnet, velger de altså HTML-elementer. 😂
CSS-selektorer må defineres mellom <style>-tagger i HTML-dokumentet eller i en ekstern CSS-fil.
I eksemplene våre skal vi bruke det som vanligvis står mellom style-tagger. Det er imidlertid mer presist å definere stilen i en ekstern CSS-fil.
Intro 13
Prikoperatoren og klassenavnet brukes til å definere en klasse mellom style-tagger. Stildefinisjonene skrives mellom krøllparentesene.
.class-name {
font-size:22px;
color:red;
}
I eksempelet nedenfor har vi definert en klasse med navnet my-component mellom style-taggene. Stilverdien font-size er tilordnet den aktuelle klassen.
<style>
.my-component{
font-size:22px;
}
</style>
La oss nå definere to p-elementer
La oss nå definere to p-elementer som har klassen my-component.
Etter denne definisjonen vil begge avsnittene bli valgt av CSS-selektoren, siden de har samme klassenavn, og skriftstørrelsen deres blir oppdatert til 22px.
<style>
.my-component{
font-size:22px;
}
</style>
<p class="my-component">Hello CoddyKit</p>
<p class="my-component">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean maximus neque diam,
in tristique tortor volutpat a. Vivamus porttitor
id est et suscipit. Duis interdum at sem sed vestibulum.
Phasellus sit amet ullamcorper libero, a vestibulum libero.
Fusce laoreet nunc a pharetra viverra.
</p>Introduksjon 6
Vi kan tilordne mer enn én stil til en selektor.
I eksempelet nedenfor er både font-size- og color-stilen definert i samme selektor.
<style>
.my-component{
font-size:22px;
color:red;
}
</style>Nestede CSS-selektorer
La oss analysere HTML-koden nedenfor.
Et avsnittselement er definert, og et span-element som inneholder teksten «Hello CSS Selectors» er lagt til i dette elementet.
I dette tilfellet kan vi si at avsnittselementet er overordnet element for span.
Span vil på den andre siden også være underelementet til p-elementet.
Akkurat som levende organismer bruker vi HTML-elementer i overordnet–underordnet-forhold, avhengig av plasseringen i kodeblokken.
<p>
<span>Hello CSS Selectors</span>
</p>Nesting av CSS-selektorer 2
La oss utvide eksempelet litt og analysere hierarkiet mellom elementene på nytt.
- Ifølge eksempelet nedenfor
- Elementene <span> og <a> er søsken.
- Elementene <span> og <a> er etterkommere av div-elementet.
- <span> og <a> er barn av elementet <p>.
- Elementet <p> er et barn av <div>-elementet.
<div>
<p>
<span>Hello CSS Selectors</span>
<a href="https://coddykit.com">
Go CoddyKit
</a>
</p>
</div>Analysetremodell
La oss se nærmere på bildet ovenfor.
Følgende HTML-kodeeksempel er omgjort til en tremodell.
Merk at tremodellen egentlig er en gjenspeiling av det overordnede–underordnede hierarkiet.
<!DOCTYPE html>
<html>
<head>
<title>CoddyKit</title>
<meta charset="UTF-8">
</head>
<body>
<h1>This is a Heading</h1>
<p>
<a href="#">Link</a>
<br/>
<span>lorem ipsum</span>
</p>
</body>
</html>
Når bruker vi så dette hierarkiske forholdet?
Når bruker vi så dette hierarkiske forholdet?
La oss først lage et eksempel og formulere et problem. Deretter ser vi hvordan vi kan finne løsninger ved hjelp av dette hierarkiet.
La oss se på kodeeksempelet nedenfor.
La oss si at vi ønsker å farge all tekst rød. Til nå har vi lært to forskjellige måter å gjøre dette på.
- For det første, og minst gunstig, definerer vi style-attributtet (style = "color: red") inline for hvert element.
- For det andre definerer vi en klasse kalt red-txt og tilordner den til hvert element som et attributt (class = "red-txt").
Men det finnes en enklere måte å gjøre dette på. 🥳
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p><span>
This is a span element
</span>
</p>
</div>
</div>Når bruker vi så dette hierarkiske forholdet? 2
La oss se på koden ovenfor en gang til.
Når vi ser nærmere på div-elementet med klassenavnet root, ser vi at det faktisk er forfaderen til alle elementene i eksempelet.
Genetiske egenskaper hos mennesker overføres fra forfedre til etterkommere. En stil som tilordnes en forfader i CSS, gjenspeiles også hos etterkommerne.
I dette tilfellet kan vi forvente at alle etterkommerne påvirkes av denne tilordningen når vi lager en stildefinisjon som velger det aktuelle div-elementet.
La oss gjøre det.
Når bruker vi så dette hierarkiske forholdet? 3
La oss definere en klasse med navnet root ved hjelp av en prikoperator og lage en stildefinisjon (med color: red) inni den.
Den vil velge alle elementene som har klassen root, og gjøre tekstfargen rød både for selve elementet og etterkommerne.
Når vi ser på forhåndsvisningen, vil vi se at all teksten blir rød.
<style>
.root{
color:red;
}
</style>
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p>
<span>
This is a span element
</span>
</p>
</div>
</div>Arv
Dette konseptet kan vi uttrykke som Inheritance i CSS. Vi har lært å skrive kortere kode ved hjelp av denne funksjonen.
Som i det forrige eksempelet definerte vi denne egenskapen for forfader-elementet i stedet for å definere den samme egenskapen for hvert element separat, og unngikk dermed gjentakelse av kode.
Plassering av head-elementet
I de forrige eksemplene la vi til style-elementet rett ved siden av HTML-elementet vi skrev.
Det riktige stedet der style-taggen skal settes inn, er imidlertid mellom head-taggene.
Bruken blir derfor riktigere slik.
<!DOCTYPE html>
<html>
<head>
<style>
.hello{
font-size:30px;
}
</style>
</head>
<body>
<h1 class="hello">This is a Heading</h1>
</body>
</html>skrive koden så kort og gjenbrukbar som mulig
Når vi programmerer, må vi skrive koden så kort som mulig og gjenbrukbart.
Gratulerer
Gratulerer 🎉
I denne delen lærte vi om konseptene selektor og arv.
I neste del skal vi lære om typene stildefinisjoner i CSS.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 16
- Leksjoner
- 35
Ofte stilte spørsmål
Er leksjonen «Introduksjon til CSS» gratis?
Ja – hele teksten i «Introduksjon til CSS» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av HTML for Kids-kurset, kan du oppgradere til CoddyKit PRO. Kurset i HTML for Kids inneholder totalt 1 leksjoner.
Hva lærer jeg i «Introduksjon til CSS»?
Introduksjon til CSS Du øver på HTML for Kids med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med HTML for Kids?
Ingen tidligere erfaring er nødvendig. HTML for Kids på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 1.
Hvor lang tid tar leksjonen «Introduksjon til CSS»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne HTML for Kids-leksjonen?
Ja. Alle HTML for Kids-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.