Podsumowanie modułu CSS

Gratulacje, podróżniku! Przeszliśmy wspólnie przez cały moduł poświęcony CSS - językowi stylizacji, który zamienia surowe hieroglify HTML w piękne malowidła na ścianach świątyni. Czas na krótkie podsumowanie najważniejszych konceptów, które opanowałeś.

Co już potrafisz

Podstawy CSS

• Tworzenie reguł CSS z selektorem, właściwością i wartością
• Łączenie CSS z HTML przez <link> i <style>
• Komentarze w CSS: /* komentarz */
• Rozumiesz, że CSS to kaskadowe arkusze stylów - "kaskadowe" oznacza, że style mogą się nadpisywać

Selektory - precyzyjne wskazywanie elementów

• Selektory elementów: h1, p, div - jak wskazanie typu hieroglifu
• Selektory klas: .klasa - jak wskazanie grupy skrybów o tej samej specjalizacji
• Selektory ID: #identyfikator - jak wskazanie konkretnego faraona po imieniu
• Selektory potomków: div p, .kontener h2 - elementy wewnątrz innych elementów
• Grupowanie selektorów: h1, h2, h3 { ... } - jedna reguła dla wielu elementów
• Zaawansowane selektory: +, >, ~, selektory atrybutów - precyzyjna kontrola

Kolory i czcionki

• Kolory: nazwy (red), hex (#ff0000), rgb (rgb(255, 0, 0)), hsl
• Czcionki: font-family, font-size, font-weight
• Formatowanie tekstu: text-align, text-transform

Box model - anatomia elementu

Model pudełkowy CSS to fundament layoutu, tak jak bloki kamienne to fundament piramidy:

• padding - odstęp wewnętrzny (jak dystans między ścianą a sarkofagiem)
• margin - odstęp zewnętrzny (jak przestrzeń między piramidami)
• border - obramowanie (jak mury obronne świątyni)
• box-sizing: border-box - przewidywalne wymiary (nowoczesny standard)

Display i pozycjonowanie

• display: block, inline, inline-block, none
• position: static, relative, absolute, fixed, sticky
• z-index - warstwy elementów (jak kolejne warstwy farby na ścianie świątyni)

Kaskadowość i specyficzność

• Kolejność źródeł stylów - kaskada decyduje, który styl wygrywa
• Specyficzność porównuje się grupami: najpierw liczba ID, potem klas, na końcu znaczników - jeden selektor ID wygrywa z dowolną liczbą klas. Styl inline jest silniejszy od każdego selektora, a !important od zwykłych deklaracji
• Dziedziczenie właściwości - elementy potomne mogą dziedziczyć style od rodziców

Pseudo-klasy i pseudo-elementy

• :hover, :focus, :active, :visited - reakcja na interakcję użytkownika
• :first-child, :nth-child(), :last-child - selekcja na podstawie pozycji
• ::before, ::after - dodawanie treści dekoracyjnej
• ::first-line, ::first-letter - stylizacja fragmentów tekstu

Efekty wizualne

• Filtry (filter): blur(), grayscale(), sepia() i inne efekty
• Transformacje (transform): translate(), rotate(), scale()
• Prefiksy przeglądarek i Autoprefixer, który dopisuje je za Ciebie

Analogie egipskie

W tym module porównywaliśmy CSS do sztuki dekorowania świątyń egipskich:

• Selektory to jak wskazywanie, którą ścianę chcesz ozdobić
• Właściwości i wartości to jak wybór kolorów pigmentów i wzorów
• Box Model to jak planowanie przestrzeni wokół każdego malowidła
• Kaskadowość to jak nadpisywanie starszych malowideł nowszymi warstwami
• Specyficzność to jak hierarchia - rozkaz faraona (ID) przeważa nad opinią urzędnika (klasa)

Co dalej?

Opanowałeś podstawy CSS, które są fundamentem każdej pięknej strony internetowej. W kolejnych modułach poznasz jeszcze potężniejsze narzędzia:

• Flexbox - elastyczne rozmieszczanie elementów
• CSS Grid - tworzenie złożonych siatek layoutu
• Animacje CSS - ożywianie elementów na stronie
• Responsive Design - dostosowywanie do różnych ekranów

Projekt końcowy

Poniżej znajdziesz edytor, w którym możesz przetestować wszystkie poznane techniki CSS. Stwórz stronę o egipskich bogach, wykorzystując jak najwięcej właściwości CSS z tego modułu! Użyj różnych selektorów, kolorów, czcionek, box modelu i pozycjonowania.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Podsumowanie CSS - Strona o Egipcie</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="page-header">
        <h1>Bogowie Starożytnego Egiptu</h1>
        <nav>
            <a href="#ra">Ra</a>
            <a href="#anubis">Anubis</a>
            <a href="#isis">Isis</a>
        </nav>
    </header>

    <main>
        <section id="ra" class="god-card">
            <h2>Ra - Bóg Słońca</h2>
            <p>Ra był jednym z najważniejszych bogów egipskich. Codziennie przepływał niebo w swojej łodzi słonecznej.</p>
        </section>

        <section id="anubis" class="god-card">
            <h2>Anubis - Strażnik Zmarłych</h2>
            <p>Anubis, bóg z głową szakala, prowadził dusze zmarłych do świata podziemnego.</p>
        </section>

        <section id="isis" class="god-card">
            <h2>Isis - Bogini Magii</h2>
            <p>Isis była potężną boginią magii i macierzyństwa, czczoną w całym Egipcie.</p>
        </section>
    </main>

    <footer class="page-footer">
        <p>&copy; Starożytny Egipt - Podsumowanie CSS</p>
    </footer>
</body>
</html>