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.