INF.03 · HTML i CSS
Wprowadzenie do CSS — selektory i podstawowe właściwości
Reguła CSS trafia do konkretnego elementu.
- Przewidź efekt
- Zmień i sprawdź
- Zbuduj samodzielnie
Po tej lekcji: Podepniesz arkusz stylów i wyjaśnisz wybór zwycięskiej deklaracji w prostym konflikcie.
Zrozum, zanim zapiszesz
CSS zapisujesz jako selektor { właściwość: wartość; }. Arkusz zewnętrzny dołącz w head przez <link rel="stylesheet" href="style.css">. Styl wewnętrzny to blok style, a lokalny to atrybut style elementu.
p wybiera elementy, .opis klasę, #zapowiedz identyfikator. [type="email"] wybiera atrybut; .karta p potomków, .karta > p dzieci, h2 + p następny sąsiad, h2 ~ p późniejszych rodzeństwa. :hover to pseudoklasa stanu; ::before to pseudoelement.
Kaskada nie oznacza po prostu „ostatnia reguła wygrywa”. Dla zwykłych reguł autora bez warstw najpierw porównaj specyficzność, a dopiero przy remisie kolejność. Id ma większą wagę niż klasa, a klasa niż typ elementu; nie traktuj tego jako liczby dziesiętnej. Istnieją wcześniejsze etapy kaskady, m.in. pochodzenie, ważność i warstwy. Nie naprawiaj wszystkiego przez !important. color zwykle jest dziedziczony, margin nie.
Przygotuj HTML do tego przykładu
Ten fragment wstaw do body dokumentu z lekcji 1. W head dodaj <link rel="stylesheet" href="style.css">. Kolejny blok zapisz w osobnym pliku style.css, obok index.html.
<article class="karta"><h2>Podróż</h2><p class="opis">Piątkowy seans</p><p>Zwykły opis</p><a href="#kontakt">Kontakt</a></article>
<section id="kontakt"><h2>Kontakt</h2><p>Koło filmowe</p></section>Przykład do odtworzenia
/* W head: <link rel="stylesheet" href="style.css"> */
p { color: navy; }
.opis { color: green; }
p { color: red; }
/* <p class="opis"> pozostanie zielony. */
.karta > p { line-height: 1.6; }
input[type="email"] { border: 2px solid navy; }
a:focus-visible { outline: 3px solid orange; }Selektor i deklaracja
| Zapis | Działanie |
|---|---|
.karta | Klasa: wiele elementów |
#kontakt | Unikalny identyfikator |
input[type="email"] | Element z konkretnym atrybutem |
.karta p / .karta > p | Potomkowie / bezpośrednie dzieci |
h2 + p / h2 ~ p | Najbliższy / wszyscy późniejsi bracia p |
tbody tr:nth-child(even) | Parzyste wiersze |
border: 1px solid #52616b | Obramowanie |
padding: .5rem | Odstęp wewnętrzny |
Sprawdź w działaniu
Która reguła wygra?
Włącz regułę klasy, identyfikatora i późniejszą regułę p. Przewidź kolor, a potem porównaj wynik.
Najpierw przewidź zmianę. Potem wykonaj ją i wyjaśnij różnicę między kodem a efektem.
Ćwiczenie z pomocą · samodzielna praca
Zbuduj samodzielnie — z pomocą, gdy potrzebujesz
Utwórz style.css i podepnij do index.html. Wstaw dwa akapity, jednemu nadaj class="opis". Ustaw kolor wszystkich p na granatowy, a klasy opis na zielony. Dopisz na końcu p { color: red; }. Wyjaśnij kolor obu akapitów, korzystając z panelu Styles w narzędziach przeglądarki.
Akapit z klasą pozostaje zielony; zwykły jest czerwony. Panel Styles pokazuje przekreśloną przegraną deklarację.
? Potrzebujesz pomocy? Rozwiązuj krok po kroku.
Krok 1 — pokaż podpowiedź
Sprawdź href i zapisz obydwa pliki.
Krok 2 — pokaż podpowiedź
Selektor klasy zaczyna się kropką tylko w CSS; w atrybucie class jej nie dodajesz.
Krok 3 — pokaż podpowiedź
Przy takim samym pochodzeniu i ważności klasa wygrywa z samym p.
Otwórz tylko tyle podpowiedzi, ile potrzebujesz. Po każdym kroku wróć do zadania i sprawdź wynik.
Sprawdź, zanim oddasz
Otwórz plik w przeglądarce i sprawdź, czy kod daje przewidywany wynik. Użyj narzędzi przeglądarki: Elements pokazuje elementy, Styles dopasowane reguły, a Network brakujące zasoby. Sprawdź kod w Nu HTML Checker; przy fragmentach wklej je do pełnego dokumentu z lang, charset, title i body. Komunikaty walidatora nie zastępują próby klawiaturą i kontroli czytelności.
Podsumowanie
Co warto zapamiętać
- Podepniesz arkusz stylów i wyjaśnisz wybór zwycięskiej deklaracji w prostym konflikcie.
- Potrafisz wskazać w kodzie przyczynę widocznego efektu.
- Przed oddaniem sprawdzasz wynik w przeglądarce, nie tylko zapis pliku.
Dalej na swoim koncie
Rozgrzewki, quiz i zadania są w biurku ucznia.
Teoria jest otwarta dla wszystkich. Żeby rozwiązywać zadania, zapisywać szkice i widzieć swój postęp, zaloguj się.
Zaloguj się →