Lekcja 2: Selekcje CSS i Specyfika — Kto Tutaj Rządzi?

Lesson2

Lekcja 2: Selekcje CSS i Specyfika — Kto Tutaj Rządzi?

Przegląd

Witaj z powrotem, maestro kodu! 🎩 W pierwszej lekcji ubraliśmy Twój HTML tak, że przestał wyglądać jak zwykły pracownik biura i zaczął przypominać gwiazdę. Teraz jednak pora przejść do poważniejszych spraw — selekcje CSS i specyfika. Jeśli kiedykolwiek miałeś wrażenie, że Twoje style kłócą się między sobą o to, kto powinien decydować, to nie martw się: każdy z nas to przechodził. W tej lekcji ustalimy, kto naprawdę tutaj rządzi, a kto tylko udaje szefa.

Na końcu tej lekcji będziesz wiedział, dlaczego jedne style zawsze wygrywają, a inne wyglądają, jakby zgubiły się na przystanku autobusowym. Gotowy? No to zaczynamy!

Krok 1: Poznajmy Selekcje — Kto Tu Trzyma Ster?

Selekcje to jak członkowie rodziny przy świątecznym stole: każdy ma swoje zdanie na temat tego, jak powinny wyglądać dania, nawet jeśli nikt ich nie pytał. Decydują, które elementy HTML powinny być wystrojone jak do opery, a które mogą zostać w piżamie. Oto kilka najważniejszych selektorów:

  • Selekcje Elementu (p, h1, div): Jak ciotka Zosia — zawsze stara się doradzić, jak ułożyć wszystkie talerze. Działa na wszystkie elementy danego typu. Przykład: “Wszystkie p muszą być zielone jak groszek.”

  • Selekcje Klasy (.nazwa-klasy): Trochę bardziej wybredne, jak elitarne kluby. Tylko elementy z odpowiednią klasą mogą wejść.

  • Selekcje ID (#nazwa-id): VIPy na imprezie CSS. Tylko jeden element z tym ID dostaje specjalne traktowanie.

  • Selekcje Atrybutu ([type="text"]): Jak bramkarz na wejściu — sprawdza każdy atrybut, zanim pozwoli przejść.

Krok 2: Piszemy Selekcje Jak Prawdziwy Fachowiec (Bez Więcej “Dlaczego To Nie Działa?!”)

Czas sprawdzić selektory w akcji! Otwórz swój plik styles.css i napisz coś z sensem. Twoja strona index.html powinna wyglądać mniej więcej tak:

index.html

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selekcje w Akcji</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1 id="glowny-naglowek">Selekcje i Specyfika</h1>
    <p class="wstep">Witaj w świecie selektorów!</p>
    <p>Sprawdźmy, kto tu naprawdę rządzi.</p>
    <div class="kontener">
        <p class="wyrozniony">Mnie trzeba wyróżnić.</p>
        <p>Zwykły akapit, po prostu sobie odpoczywam.</p>
    </div>
</body>
</html>

A teraz pokażemy styles.css, kto tutaj rozdaje karty:

styles.css

/* Selekcje Elementu */
p {
    color: green; /* Wszystkie <p> będą zielone, jak groszek. Nawet jeśli tego nie chcą. */
}

/* Selekcje Klasy */
.wyrozniony {
    background-color: yellow; /* Elementy z klasą "wyrozniony" będą świecić jak neony na ulicy. */
}

/* Selekcje ID */
#glowny-naglowek {
    font-size: 36px; /* VIP obsługa dla głównego nagłówka. Wielki i odważny! */
}

/* Selekcje Atrybutu */
input[type="text"] {
    border: 2px solid blue; /* Tylko <input> z typem "text" dostaną ten styl. Reszta musi obejść się smakiem. */
}

Zapisz swój styles.css i odśwież stronę w przeglądarce. Powinno wyglądać jak prawdziwa tęcza. Ale co, jeśli one zaczną walczyć o kontrolę?

Krok 3: Specyfika — Kto Ma Ostatnie Słowo?

No dobrze, a co jeśli <p> ma zarówno klasę, jak i ID? Kto wygrywa? To jak na rodzinnej kolacji, kiedy wszyscy próbują decydować, kto ma siedzieć przy głównym stole. Oto jak CSS to rozstrzyga:

  1. Style Inline: Jak matka chrzestna — jeśli mówi, to wszyscy milczą. Przykład:

    <p style="color: red;">Ja tu rządzę!</p>

  2. Selekcje ID: Jak ojciec rodziny — jeśli chce coś ustawić, wszyscy się zgadzają.

    • Przykład: #glowny-naglowek zawsze pokona .wyrozniony.

  3. Selekcje Klasy: Jak starsza siostra — szanowana, ale łatwo można ją przechytrzyć.

    • Przykład: .wyrozniony może zmieniać kolor, ale gdy w grze jest ID, musi ustąpić miejsca.

  4. Selekcje Elementu: Młodszy brat. Robi, co mu każą.

Kiedy Wszystko Idzie Źle (i Masz OCHOTĘ KRZYCZEĆ NA EKRAN!)

Jeśli kiedykolwiek pomyślałeś: “Dlaczego mój CSS nie działa?!”, najpewniej problem leży w specyfice. Spróbuj nadać selektorowi większą moc:

  • Dodaj dodatkową klasę (.kontener .wyrozniony), by wzmocnić jego wpływ.
  • Albo użyj !important… ale tylko w ostateczności (bo to jak strzelić z armaty do komara).

Krok 4: Uruchamiamy Projekt z Caddy (Czas Pokazać Swój Talent!)

Czas zobaczyć cały ten miszmasz w akcji. Wystartujmy nasz projekt przy pomocy Caddy:

  1. Otwórz terminal i przejdź do folderu z projektem:

    cd ~/Documents/my-css-project

  2. Uruchom Caddy, żeby odpalić serwer:

    caddy file-server --listen :8080

  3. Otwórz przeglądarkę i wpisz:

    http://localhost:8080

I voilà! Twoja strona teraz działa. Możesz teraz bawić się selektorami i obserwować, kto ma ostatnie słowo.

Podsumowanie

Gratulacje, mistrzu stylu! 🎉 Teraz wiesz, kto ma największą władzę w CSS. Możesz być spokojny, wiedząc, że Twoje style są pod контролą i nikt nie wyskoczy jak Filip z konopi. Z taką wiedzą już żadna specyfika nie będzie Ci straszna!

Na następnym spotkaniu zajmiemy się Flexbox i Grid — systemami, które uporządkują Twoją stronę tak, że nawet Twoja babcia powie: “No, teraz to wygląda jak należy!”

Do zobaczenia w następnej lekcji, gdzie wszystko stanie się… elastyczne! 😎