-
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.
