Menu
Coddy logo textTech
ZACZNIJ NAUKĘ
flag Pl iconPolskidown icon

Wyzwanie podsumowujące nr 1

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 29 z 76.

challenge icon

Wyzwanie

Łatwy

Skoro opanowałeś już różne techniki stylizowania tekstu i tła za pomocą CSS, czas sprawdzić swoją wiedzę w kompleksowym wyzwaniu. Wykorzystasz zdobytą wiedzę o kolorach, kodach szesnastkowych, wartościach RGB i przezroczystości w RGBA, aby stworzyć określony projekt.

Otrzymujesz dokument HTML z nagłówkiem (<h1>), akapitem (<p>) i elementem div (<div>). Twoim zadaniem jest użycie poznanych właściwości stylizowania tekstu i tła, aby nadać tym elementom wygląd zgodny z projektem przedstawionym na poniższym obrazie:

Wykonaj poniższe kroki:

  1. Napisz regułę CSS, która wybiera element <h1>. Ustaw color na white, background-color na #000080 (granatowy) oraz text-align na center.
  2. Napisz regułę CSS, która wybiera element <p>. Ustaw color na #FFFFFF (biały), background-color na rgba(0, 0, 0, 0.5) (półprzezroczysta czerń), a font-size na 18px.
  3. Napisz regułę CSS, która wybiera element <div>. Ustaw background-color na rgba(237, 170, 26, 1) (złocisty żółty), a color na white.

Spróbuj swoich sił

<html>
<head>
    <title>Recap Challenge #1</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>

Wszystkie lekcje w sekcji Stylizacja za pomocą CSS

1Wprowadzenie

Czym jest CSS?Składnia CSSKomentarze CSSZnacznik headZnacznik title

4Podstawy tekstu

Kolor tekstuRodzina czcionekRozmiar czcionkiGrubość czcionkiWyrównanie tekstuDekoracja tekstuWyzwanie powtórkowe #1Wyzwanie powtórkowe #2

7Model pudełkowy, część 1

Czym jest model pudełkowy?Odstęp wewnętrznyMarginesyObramowaniaSzerokość i wysokośćZadanie podsumowujące

10Formularz logowania

Treść stronyKontener formularzaLekcja projektowaPole tekstoweLekcja projektowaPrzyciskLekcja projektowa

13Strona internetowa Tonga

Menu nawigacyjneNagłówek powitalnyLekcja projektowaSekcja „O nas”Lekcja projektowaSekcja kontaktowaLekcja projektowaZnacznik viewportLekcja projektowaMedia queryLekcja projektowa

2Dodawanie CSS

CSS inlineWewnętrzny CSSZewnętrzny CSSWyzwanie: podstawowe stylowanie

5Kolory i tła

Kolor tłaKolory HEXKolory RGBPrzezroczystość z RGBAWyzwanie podsumowujące nr 1

8Model pudełkowy, część 2

Rozmiar pudełkaZaokrąglenie rogówPrzepełnienieCień pudełkaWyzwanie podsumowujące

11Techniki układu

Elementy blokowe a liniowePodstawy pozycjonowaniaPozycjonowanie względnePozycjonowanie bezwzględnePozycjonowanie stałePodstawy z-indexWyzwanie podsumowujące

14Wyzwania końcowe

Układanie elementówLista filmówZaproszenie ślubnePływające powiadomienie

3Podstawowe selektory

Wprowadzenie do selektorówSelektor typuSelektor klasySelektor identyfikatoraGrupowanie selektorówSelektor uniwersalnyWyzwanie: selektory

6Kawiarniane menu

Podstawy typografiiStylizacja tekstuLekcja projektowaKolory i tłaLekcja projektowa

9Flexbox

Czym jest Flexbox?Kierunek flexJustify ContentAlign ItemsIdealne wyśrodkowanieWyzwanie Flexbox

12Podstawy responsywnego projektowania

Czym jest responsywne projektowanie?Znacznik meta viewportElastyczne układyJednostki viewportuPodstawy Media QueriesElastyczne obrazy

Poćwicz samodzielnie: Edytor online Web