Färger och bakgrunder
Lägg till färger och bakgrunder för att ge sidan mer liv
Färger och bakgrunder är en gratis lektion i HTML for Kids på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för HTML for Kids, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML for Kids innehåller totalt 4 lektioner.
Färger och bakgrunder
Välkomna till nästa lektion! Idag lär vi oss att lägga till färger och bakgrunder på webbsidan för att göra den mer levande och visuellt tilltalande.
Varför använda färger och bakgrunder?
Färger och bakgrunder kan:
- Göra webbsidan mer tilltalande.
- Framhäva viktigt innehåll.
- Skapa rätt stämning eller tema för sidan.
Nu ska vi lära oss att använda dem effektivt!
Ändra textfärg
Ni kan ändra textens färg med egenskapen color. Ni kan använda:
- Färgnamn: Exempel:
red,blue. - Hexadecimala koder: Exempel:
#ff0000,#0000ff. - RGB-värden: Exempel:
rgb(255, 0, 0).
Exempel:
<p style="color: red;">This text is red.</p>
<p style="color: #0000ff;">This text is blue.</p>
<p style="color: rgb(0, 128, 0);">This text is green.</p>
Lägga till bakgrundsfärg
Egenskapen background-color används för att ändra bakgrundsfärgen på ett element.
Exempel:
<p style="background-color: yellow;">This paragraph has a yellow background.</p>
<div style="background-color: lightgray; padding: 10px;">
This is a box with a gray background.
</div>
Bakgrund för hela sidan
Ni kan ändra bakgrundsfärgen på hela sidan genom att tillämpa egenskapen background-color på taggen <body>.
Exempel:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This page has a light blue background.</p>
</body>
</html>
Lägga till bakgrundsbilder
Ni kan ange en bild som bakgrund med hjälp av egenskapen background-image.
Exempel:
I det här exemplet:
background-size: cover;gör att bilden täcker hela sidan.background-repeat: no-repeat;förhindrar att bilden upprepas.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('background.jpg');
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This page has a background image.</p>
</body>
</html>
Kombinera text- och bakgrundsfärger
Ni kan kombinera text- och bakgrundsfärger för att skapa visuellt tilltalande design. Se till att texten är läsbar!
Exempel:
<p style="color: white; background-color: black; padding: 10px;">
This is white text on a black background.
</p>
Prova själv
Nu ska Ni skapa en webbsida med färger och bakgrunder. Här är ett exempel:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lavender;
}
h1 {
color: darkblue;
}
p {
background-color: lightyellow;
padding: 10px;
border: 1px solid darkgray;
}
</style>
</head>
<body>
<h1>My Colorful Page</h1>
<p>This paragraph has a light yellow background with a border.</p>
</body>
</html>
Bra jobbat!
Grattis! Ni har lärt Er att använda färger och bakgrunder för att göra Era webbsidor mer levande och visuellt tilltalande. I nästa lektion går vi igenom textformatering för att lägga till fetstil, kursiv stil och andra effekter i texten. Gör Er redo att förbättra Era designkunskaper!
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 16
- Lektioner
- 35
Vanliga frågor
Är lektionen ”Färger och bakgrunder” gratis?
Ja – hela texten till ”Färger och bakgrunder” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i HTML for Kids, kan Ni uppgradera till CoddyKit PRO. Kursen i HTML for Kids innehåller totalt 4 lektioner.
Vad lär jag mig i ”Färger och bakgrunder”?
Lägg till färger och bakgrunder för att ge sidan mer liv Ni övar på HTML for Kids med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig HTML for Kids?
Du behöver inga förkunskaper. Utbildningen i HTML for Kids på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Färger och bakgrunder”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här HTML for Kids-lektionen?
Ja. Varje HTML for Kids-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Inline-format
- Grunderna i CSS
- Färger och bakgrunder
- Textformatering