WEBVTT

00:00:00.531 --> 00:00:04.192
Dużo już zrobiliśmy
z selektorami CSS:

00:00:04.192 --> 00:00:08.006
wybieramy elementy
według znacznika, ID i klasy.

00:00:08.290 --> 00:00:11.028
Powtórzmy wszystko
na przykładzie tej strony.

00:00:11.257 --> 00:00:13.655
Dotyczy ona pączków.

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

00:00:15.963 --> 00:00:18.944
niektóre akapity są krótkie,
jednowierszowe.

00:00:19.242 --> 00:00:23.142
CSS zaczyna się od reguły wyboru
wszystkich znaczników „p"

00:00:23.142 --> 00:00:25.611
i określeniu rodziny czcionek
bezszeryfowych.

00:00:26.074 --> 00:00:30.063
Zmienię czcionkę na monospace,
żebyście widzieli wybór.

00:00:30.785 --> 00:00:31.808
Widzicie?

00:00:34.102 --> 00:00:37.836
Następna reguła wybiera
element o ID „donut-header”.

00:00:38.034 --> 00:00:41.913
Wiemy, że wybiera ID,
bo zaczyna się kratką.

00:00:42.029 --> 00:00:43.759
ID jest opisowe,

00:00:43.759 --> 00:00:46.688
wygląda na to, że wybiera
nagłówek u góry

00:00:46.688 --> 00:00:47.747
i zmienia czcionkę.

00:00:47.974 --> 00:00:51.417
Przewinę w dół i sprawdzę,
czy „h1” ma ID.

00:00:51.453 --> 00:00:53.184
Wszystko się zgadza.

00:00:53.387 --> 00:00:56.790
Ostatnia reguła wybiera
wszystkie elementy klasy „fakt”.

00:00:56.896 --> 00:01:00.384
Wiemy, że to klasa,
bo zaczyna się od kropki.

00:01:00.488 --> 00:01:02.956
Aby dowiedzieć się,
który element korzysta

00:01:02.956 --> 00:01:05.230
z tej klasy, mogę sprawdzić,
co robi reguła,

00:01:05.230 --> 00:01:07.833
dodając obramowanie
i dopełnienie…

00:01:07.833 --> 00:01:10.462
lub poszukać nazwy klasy
w kodzie HTML.

00:01:10.619 --> 00:01:13.148
Widzę nazwę w tym akapicie.

00:01:13.148 --> 00:01:14.300
I w tym też.

00:01:14.300 --> 00:01:16.461
Dwa akapity
z jednoliniowymi faktami.

00:01:16.461 --> 00:01:18.315
Dlatego mają obramowanie.

00:01:18.448 --> 00:01:19.778
Klasy są świetne,

00:01:19.778 --> 00:01:23.007
bo można nadać ten sam styl
wielu elementom.

00:01:23.033 --> 00:01:25.346
Z klasami możemy zrobić więcej.

00:01:25.346 --> 00:01:27.058
Zaraz pokażę, co.

00:01:27.230 --> 00:01:29.136
Mamy stronę o pączkach.

00:01:29.136 --> 00:01:31.361
Nie są zbyt zdrowe!

00:01:31.436 --> 00:01:34.007
Mogą być nawet bardzo niezdrowe!

00:01:34.030 --> 00:01:36.963
I uzależniają
z powodu ogromnej ilości cukru.

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

00:01:39.644 --> 00:01:42.421
powinniśmy ostrzec ludzi,
że są niezdrowe.

00:01:42.539 --> 00:01:47.257
Może damy ten fakt w czerwieni,
żeby naprawdę ostrzegał?

00:01:47.626 --> 00:01:49.015
Jak to zrobimy?

00:01:49.200 --> 00:01:53.401
Dodajmy właściwość „color”
do reguły CSS „fact”.

00:01:53.401 --> 00:01:55.099
Zobaczmy co się wydarzyło.

00:01:55.650 --> 00:02:00.326
Oba fakty stały się czerwone,
a drugi nie jest ostrzeżeniem.

00:02:00.326 --> 00:02:01.847
Dotyczy tylko pisowni.

00:02:02.051 --> 00:02:03.845
Nie chcemy, by był czerwony.

00:02:04.169 --> 00:02:05.578
Możemy dodać ID,

00:02:05.578 --> 00:02:09.573
ale gdybyśmy chcieli później
pokolorować inne ostrzeżenia

00:02:09.573 --> 00:02:10.958
i dodać nowe,

00:02:10.958 --> 00:02:14.185
to musielibyśmy dodawać ID
i reguły dla nich.

00:02:14.391 --> 00:02:19.806
W tym przypadku najlepiej jest
dodać kolejną klasę do znacznika „p”.

00:02:20.104 --> 00:02:24.151
Przeglądarki pozwalają
dodać ich tyle, ile chcemy.

00:02:24.541 --> 00:02:28.532
Umieszczamy kursor
po nazwie ostatniej klasy,

00:02:28.532 --> 00:02:33.196
robimy spację i piszemy nazwę
nowej klasy, np. „ostrzeżenie”.

00:02:33.984 --> 00:02:36.329
Teraz zróbmy regułę ostrzeżenia

00:02:37.119 --> 00:02:40.243
i włączmy w nią właściwość koloru.

00:02:40.835 --> 00:02:44.001
Główny fakt jest czerwony,
a drugi nie.

00:02:44.218 --> 00:02:45.411
Pięknie!

00:02:45.852 --> 00:02:49.285
Możemy nadać klasę
wielu elementom, jak wcześniej.

00:02:49.643 --> 00:02:54.121
Np. pokolorujemy pogrubiony tekst,
„smażone w głębokim tłuszczu”,

00:02:54.121 --> 00:02:56.986
damy to na czerwono,
bo takie smażenie

00:02:56.986 --> 00:02:59.872
często jest nazywane niezdrowym.

00:03:00.025 --> 00:03:03.692
Dodamy więc class="warning"

00:03:03.692 --> 00:03:04.626
również czerwień.

00:03:05.035 --> 00:03:10.820
Zauważcie, że ostrzeżenie
ma kolor czerwony

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

00:03:14.795 --> 00:03:17.545
Tak jest przy używaniu wielu klas.

00:03:17.545 --> 00:03:20.578
Przeglądarka spojrzy
na wszystkie reguły

00:03:20.578 --> 00:03:22.340
i zastosuje odpowiednie style.

00:03:22.733 --> 00:03:26.810
Ale, przekazując sens,
nie poprzestawajmy na kolorze,

00:03:26.810 --> 00:03:28.563
bo przecież są daltoniści.

00:03:28.636 --> 00:03:31.298
Niektórzy prawie nie widzą różnicy

00:03:31.298 --> 00:03:33.815
między czerwienią a czernią.
Może wy też!

00:03:33.899 --> 00:03:37.463
Zmieńmy klasę,
by wszyscy ją zauważyli.

00:03:38.070 --> 00:03:40.711
Ten kolor zmienimy w kolor tła,

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

00:03:45.104 --> 00:03:47.564
Niewielki kontrast, czerwień i czerń.

00:03:47.564 --> 00:03:51.304
A kontrast jest ważny,
by strona była czytelna.

00:03:51.400 --> 00:03:54.080
Zróbmy tu biały.

00:03:54.785 --> 00:03:56.811
Teraz mamy białe litery

00:03:56.811 --> 00:03:59.611
i czerwone tło
dla tych, którzy widzą czerwień.

00:03:59.994 --> 00:04:04.497
Zastosowaliśmy klasę, więc oba
ostrzeżenia mają ten sam styl.

00:04:04.774 --> 00:04:07.787
Dzięki elastyczności klas CSS

00:04:07.787 --> 00:04:10.735
możemy uratować świat
przed pączkami.