0:00:00.531,0:00:04.192
Dużo już zrobiliśmy[br]z selektorami CSS:

0:00:04.192,0:00:08.006
wybieramy elementy[br]według znacznika, ID i klasy.

0:00:08.290,0:00:11.028
Powtórzmy wszystko[br]na przykładzie tej strony.

0:00:11.257,0:00:13.655
Dotyczy ona pączków.

0:00:13.789,0:00:15.963
Ma nagłówek, akapity…

0:00:15.963,0:00:18.944
niektóre akapity są krótkie,[br]jednowierszowe.

0:00:19.242,0:00:23.142
CSS zaczyna się od reguły wyboru[br]wszystkich znaczników „p"

0:00:23.142,0:00:25.611
i określeniu rodziny czcionek[br]bezszeryfowych.

0:00:26.074,0:00:30.063
Zmienię czcionkę na monospace,[br]żebyście widzieli wybór.

0:00:30.785,0:00:31.808
Widzicie?

0:00:34.102,0:00:37.836
Następna reguła wybiera[br]element o ID „donut-header”.

0:00:38.034,0:00:41.913
Wiemy, że wybiera ID,[br]bo zaczyna się kratką.

0:00:42.029,0:00:43.759
ID jest opisowe,

0:00:43.759,0:00:46.688
wygląda na to, że wybiera[br]nagłówek u góry

0:00:46.688,0:00:47.747
i zmienia czcionkę.

0:00:47.974,0:00:51.417
Przewinę w dół i sprawdzę,[br]czy „h1” ma ID.

0:00:51.453,0:00:53.184
Wszystko się zgadza.

0:00:53.387,0:00:56.790
Ostatnia reguła wybiera[br]wszystkie elementy klasy „fakt”.

0:00:56.896,0:01:00.384
Wiemy, że to klasa,[br]bo zaczyna się od kropki.

0:01:00.488,0:01:02.956
Aby dowiedzieć się,[br]który element korzysta

0:01:02.956,0:01:05.230
z tej klasy, mogę sprawdzić,[br]co robi reguła,

0:01:05.230,0:01:07.833
dodając obramowanie[br]i dopełnienie…

0:01:07.833,0:01:10.462
lub poszukać nazwy klasy[br]w kodzie HTML.

0:01:10.619,0:01:13.148
Widzę nazwę w tym akapicie.

0:01:13.148,0:01:14.300
I w tym też.

0:01:14.300,0:01:16.461
Dwa akapity[br]z jednoliniowymi faktami.

0:01:16.461,0:01:18.315
Dlatego mają obramowanie.

0:01:18.448,0:01:19.778
Klasy są świetne,

0:01:19.778,0:01:23.007
bo można nadać ten sam styl[br]wielu elementom.

0:01:23.033,0:01:25.346
Z klasami możemy zrobić więcej.

0:01:25.346,0:01:27.058
Zaraz pokażę, co.

0:01:27.230,0:01:29.136
Mamy stronę o pączkach.

0:01:29.136,0:01:31.361
Nie są zbyt zdrowe!

0:01:31.436,0:01:34.007
Mogą być nawet bardzo niezdrowe!

0:01:34.030,0:01:36.963
I uzależniają[br]z powodu ogromnej ilości cukru.

0:01:37.009,0:01:39.644
Jeśli robimy o nich całą stronę,

0:01:39.644,0:01:42.421
powinniśmy ostrzec ludzi,[br]że są niezdrowe.

0:01:42.539,0:01:47.257
Może damy ten fakt w czerwieni,[br]żeby naprawdę ostrzegał?

0:01:47.626,0:01:49.015
Jak to zrobimy?

0:01:49.200,0:01:53.401
Dodajmy właściwość „color”[br]do reguły CSS „fact”.

0:01:53.401,0:01:55.099
Zobaczmy co się wydarzyło.

0:01:55.650,0:02:00.326
Oba fakty stały się czerwone,[br]a drugi nie jest ostrzeżeniem.

0:02:00.326,0:02:01.847
Dotyczy tylko pisowni.

0:02:02.051,0:02:03.845
Nie chcemy, by był czerwony.

0:02:04.169,0:02:05.578
Możemy dodać ID,

0:02:05.578,0:02:09.573
ale gdybyśmy chcieli później[br]pokolorować inne ostrzeżenia

0:02:09.573,0:02:10.958
i dodać nowe,

0:02:10.958,0:02:14.185
to musielibyśmy dodawać ID[br]i reguły dla nich.

0:02:14.391,0:02:19.806
W tym przypadku najlepiej jest[br]dodać kolejną klasę do znacznika „p”.

0:02:20.104,0:02:24.151
Przeglądarki pozwalają[br]dodać ich tyle, ile chcemy.

0:02:24.541,0:02:28.532
Umieszczamy kursor[br]po nazwie ostatniej klasy,

0:02:28.532,0:02:33.196
robimy spację i piszemy nazwę[br]nowej klasy, np. „ostrzeżenie”.

0:02:33.984,0:02:36.329
Teraz zróbmy regułę ostrzeżenia

0:02:37.119,0:02:40.243
i włączmy w nią właściwość koloru.

0:02:40.835,0:02:44.001
Główny fakt jest czerwony,[br]a drugi nie.

0:02:44.218,0:02:45.411
Pięknie!

0:02:45.852,0:02:49.285
Możemy nadać klasę[br]wielu elementom, jak wcześniej.

0:02:49.643,0:02:54.121
Np. pokolorujemy pogrubiony tekst,[br]„smażone w głębokim tłuszczu”,

0:02:54.121,0:02:56.986
damy to na czerwono,[br]bo takie smażenie

0:02:56.986,0:02:59.872
często jest nazywane niezdrowym.

0:03:00.025,0:03:03.692
Dodamy więc class="warning"

0:03:03.692,0:03:04.626
również czerwień.

0:03:05.035,0:03:10.820
Zauważcie, że ostrzeżenie[br]ma kolor czerwony

0:03:10.820,0:03:14.653
oraz krawędzie - górną i dolną.

0:03:14.795,0:03:17.545
Tak jest przy używaniu wielu klas.

0:03:17.545,0:03:20.578
Przeglądarka spojrzy[br]na wszystkie reguły

0:03:20.578,0:03:22.340
i zastosuje odpowiednie style.

0:03:22.733,0:03:26.810
Ale, przekazując sens,[br]nie poprzestawajmy na kolorze,

0:03:26.810,0:03:28.563
bo przecież są daltoniści.

0:03:28.636,0:03:31.298
Niektórzy prawie nie widzą różnicy

0:03:31.298,0:03:33.815
między czerwienią a czernią.[br]Może wy też!

0:03:33.899,0:03:37.463
Zmieńmy klasę,[br]by wszyscy ją zauważyli.

0:03:38.070,0:03:40.711
Ten kolor zmienimy w kolor tła,

0:03:40.711,0:03:44.740
bo każdy widzi, gdy coś ma tło.

0:03:45.104,0:03:47.564
Niewielki kontrast, czerwień i czerń.

0:03:47.564,0:03:51.304
A kontrast jest ważny,[br]by strona była czytelna.

0:03:51.400,0:03:54.080
Zróbmy tu biały.

0:03:54.785,0:03:56.811
Teraz mamy białe litery

0:03:56.811,0:03:59.611
i czerwone tło[br]dla tych, którzy widzą czerwień.

0:03:59.994,0:04:04.497
Zastosowaliśmy klasę, więc oba[br]ostrzeżenia mają ten sam styl.

0:04:04.774,0:04:07.787
Dzięki elastyczności klas CSS

0:04:07.787,0:04:10.735
możemy uratować świat[br]przed pączkami.