Dużo już zrobiliśmy z selektorami CSS:
wybieramy elementy według znacznika, ID i klasy.
Powtórzmy wszystko na przykładzie tej strony.
Dotyczy ona pączków.
Ma nagłówek, akapity…
niektóre akapity są krótkie, jednowierszowe.
CSS zaczyna się od reguły wyboru wszystkich znaczników „p"
i określeniu rodziny czcionek bezszeryfowych.
Zmienię czcionkę na monospace, żebyście widzieli wybór.
Widzicie?
Następna reguła wybiera element o ID „donut-header”.
Wiemy, że wybiera ID, bo zaczyna się kratką.
ID jest opisowe,
wygląda na to, że wybiera nagłówek u góry
i zmienia czcionkę.
Przewinę w dół i sprawdzę, czy „h1” ma ID.
Wszystko się zgadza.
Ostatnia reguła wybiera wszystkie elementy klasy „fakt”.
Wiemy, że to klasa, bo zaczyna się od kropki.
Aby dowiedzieć się, który element korzysta
z tej klasy, mogę sprawdzić, co robi reguła,
dodając obramowanie i dopełnienie…
lub poszukać nazwy klasy w kodzie HTML.
Widzę nazwę w tym akapicie.
I w tym też.
Dwa akapity z jednoliniowymi faktami.
Dlatego mają obramowanie.
Klasy są świetne,
bo można nadać ten sam styl wielu elementom.
Z klasami możemy zrobić więcej.
Zaraz pokażę, co.
Mamy stronę o pączkach.
Nie są zbyt zdrowe!
Mogą być nawet bardzo niezdrowe!
I uzależniają z powodu ogromnej ilości cukru.
Jeśli robimy o nich całą stronę,
powinniśmy ostrzec ludzi, że są niezdrowe.
Może damy ten fakt w czerwieni, żeby naprawdę ostrzegał?
Jak to zrobimy?
Dodajmy właściwość „color” do reguły CSS „fact”.
Zobaczmy co się wydarzyło.
Oba fakty stały się czerwone, a drugi nie jest ostrzeżeniem.
Dotyczy tylko pisowni.
Nie chcemy, by był czerwony.
Możemy dodać ID,
ale gdybyśmy chcieli później pokolorować inne ostrzeżenia
i dodać nowe,
to musielibyśmy dodawać ID i reguły dla nich.
W tym przypadku najlepiej jest dodać kolejną klasę do znacznika „p”.
Przeglądarki pozwalają dodać ich tyle, ile chcemy.
Umieszczamy kursor po nazwie ostatniej klasy,
robimy spację i piszemy nazwę nowej klasy, np. „ostrzeżenie”.
Teraz zróbmy regułę ostrzeżenia
i włączmy w nią właściwość koloru.
Główny fakt jest czerwony, a drugi nie.
Pięknie!
Możemy nadać klasę wielu elementom, jak wcześniej.
Np. pokolorujemy pogrubiony tekst, „smażone w głębokim tłuszczu”,
damy to na czerwono, bo takie smażenie
często jest nazywane niezdrowym.
Dodamy więc class="warning"
również czerwień.
Zauważcie, że ostrzeżenie ma kolor czerwony
oraz krawędzie - górną i dolną.
Tak jest przy używaniu wielu klas.
Przeglądarka spojrzy na wszystkie reguły
i zastosuje odpowiednie style.
Ale, przekazując sens, nie poprzestawajmy na kolorze,
bo przecież są daltoniści.
Niektórzy prawie nie widzą różnicy
między czerwienią a czernią. Może wy też!
Zmieńmy klasę, by wszyscy ją zauważyli.
Ten kolor zmienimy w kolor tła,
bo każdy widzi, gdy coś ma tło.
Niewielki kontrast, czerwień i czerń.
A kontrast jest ważny, by strona była czytelna.
Zróbmy tu biały.
Teraz mamy białe litery
i czerwone tło dla tych, którzy widzą czerwień.
Zastosowaliśmy klasę, więc oba ostrzeżenia mają ten sam styl.
Dzięki elastyczności klas CSS
możemy uratować świat przed pączkami.