Kolory i tła
Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 32 z 76.
Wyzwanie
ŁatwyW tym zadaniu dostosujesz kolory tła różnych sekcji menu kawiarni. Wykorzystaj swoją kreatywność i wybierz kolory, dzięki którym menu będzie atrakcyjne wizualnie!
Wykonaj poniższe kroki:
- Ustaw kolor tła całej strony (
body). Wybierz dowolny kolor pasujący do motywu kawiarni. - Ustaw kolor tła i kolor tekstu stopki (
footer) tak, aby pasowały do ogólnego wyglądu strony. - Możesz zmienić kolor dowolnych innych elementów, aby ulepszyć style.
Spróbuj swoich sił
<html>
<head>
<title>Café Menu</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Café Delight</h1>
<p class="welcome">Welcome to our café! Enjoy a delicious meal.</p>
</header>
<div class="menu-category">
<h2>Appetizers</h2>
<ul>
<li>
<p class="dish-name">Bruschetta $5.99</p>
</li>
<li>
<p class="dish-name">Garlic Bread $3.50</p>
</li>
</ul>
</div>
<div class="menu-category">
<h2>Main Courses</h2>
<ul>
<li>
<p class="dish-name">Spaghetti Carbonara $12.99</p>
</li>
<li>
<p class="dish-name">Grilled Chicken Salad $9.99</p>
</li>
</ul>
</div>
<div class="menu-category">
<h2>Desserts</h2>
<ul>
<li>
<p class="dish-name">Chocolate Cake $4.99</p>
</li>
<li>
<p class="dish-name">Cheesecake $5.49</p>
</li>
</ul>
</div>
<footer>
<p>© 2025 Café Delight - All rights reserved</p>
</footer>
</body>
</html>Wszystkie lekcje w sekcji Stylizacja za pomocą CSS
4Podstawy tekstu
Kolor tekstuRodzina czcionekRozmiar czcionkiGrubość czcionkiWyrównanie tekstuDekoracja tekstuWyzwanie powtórkowe #1Wyzwanie powtórkowe #27Model pudełkowy, część 1
Czym jest model pudełkowy?Odstęp wewnętrznyMarginesyObramowaniaSzerokość i wysokośćZadanie podsumowujące13Strona internetowa Tonga
Menu nawigacyjneNagłówek powitalny8Model pudełkowy, część 2
Rozmiar pudełkaZaokrąglenie rogówPrzepełnienieCień pudełkaWyzwanie podsumowujące3Podstawowe selektory
Wprowadzenie do selektorówSelektor typuSelektor klasySelektor identyfikatoraGrupowanie selektorówSelektor uniwersalnyWyzwanie: selektory9Flexbox
Czym jest Flexbox?Kierunek flexJustify ContentAlign ItemsIdealne wyśrodkowanieWyzwanie Flexbox12Podstawy responsywnego projektowania
Czym jest responsywne projektowanie?Znacznik meta viewportElastyczne układyJednostki viewportuPodstawy Media QueriesElastyczne obrazyPoćwicz samodzielnie: Edytor online Web