1
00:00:00,531 --> 00:00:04,192
Dużo już zrobiliśmy
z selektorami CSS:

2
00:00:04,192 --> 00:00:08,006
wybieramy elementy
według znacznika, ID i klasy.

3
00:00:08,290 --> 00:00:11,028
Powtórzmy wszystko
na przykładzie tej strony.

4
00:00:11,257 --> 00:00:13,655
Dotyczy ona pączków.

5
00:00:13,789 --> 00:00:15,963
Ma nagłówek, akapity…

6
00:00:15,963 --> 00:00:18,944
niektóre akapity są krótkie,
jednowierszowe.

7
00:00:19,242 --> 00:00:23,142
CSS zaczyna się od reguły wyboru
wszystkich znaczników „p"

8
00:00:23,142 --> 00:00:25,611
i określeniu rodziny czcionek
bezszeryfowych.

9
00:00:26,074 --> 00:00:30,063
Zmienię czcionkę na monospace,
żebyście widzieli wybór.

10
00:00:30,785 --> 00:00:31,808
Widzicie?

11
00:00:34,102 --> 00:00:37,836
Następna reguła wybiera
element o ID „donut-header”.

12
00:00:38,034 --> 00:00:41,913
Wiemy, że wybiera ID,
bo zaczyna się kratką.

13
00:00:42,029 --> 00:00:43,759
ID jest opisowe,

14
00:00:43,759 --> 00:00:46,688
wygląda na to, że wybiera
nagłówek u góry

15
00:00:46,688 --> 00:00:47,747
i zmienia czcionkę.

16
00:00:47,974 --> 00:00:51,417
Przewinę w dół i sprawdzę,
czy „h1” ma ID.

17
00:00:51,453 --> 00:00:53,184
Wszystko się zgadza.

18
00:00:53,387 --> 00:00:56,790
Ostatnia reguła wybiera
wszystkie elementy klasy „fakt”.

19
00:00:56,896 --> 00:01:00,384
Wiemy, że to klasa,
bo zaczyna się od kropki.

20
00:01:00,488 --> 00:01:02,956
Aby dowiedzieć się,
który element korzysta

21
00:01:02,956 --> 00:01:05,230
z tej klasy, mogę sprawdzić,
co robi reguła,

22
00:01:05,230 --> 00:01:07,833
dodając obramowanie
i dopełnienie…

23
00:01:07,833 --> 00:01:10,462
lub poszukać nazwy klasy
w kodzie HTML.

24
00:01:10,619 --> 00:01:13,148
Widzę nazwę w tym akapicie.

25
00:01:13,148 --> 00:01:14,300
I w tym też.

26
00:01:14,300 --> 00:01:16,461
Dwa akapity
z jednoliniowymi faktami.

27
00:01:16,461 --> 00:01:18,315
Dlatego mają obramowanie.

28
00:01:18,448 --> 00:01:19,778
Klasy są świetne,

29
00:01:19,778 --> 00:01:23,007
bo można nadać ten sam styl
wielu elementom.

30
00:01:23,033 --> 00:01:25,346
Z klasami możemy zrobić więcej.

31
00:01:25,346 --> 00:01:27,058
Zaraz pokażę, co.

32
00:01:27,230 --> 00:01:29,136
Mamy stronę o pączkach.

33
00:01:29,136 --> 00:01:31,361
Nie są zbyt zdrowe!

34
00:01:31,436 --> 00:01:34,007
Mogą być nawet bardzo niezdrowe!

35
00:01:34,030 --> 00:01:36,963
I uzależniają
z powodu ogromnej ilości cukru.

36
00:01:37,009 --> 00:01:39,644
Jeśli robimy o nich całą stronę,

37
00:01:39,644 --> 00:01:42,421
powinniśmy ostrzec ludzi,
że są niezdrowe.

38
00:01:42,539 --> 00:01:47,257
Może damy ten fakt w czerwieni,
żeby naprawdę ostrzegał?

39
00:01:47,626 --> 00:01:49,015
Jak to zrobimy?

40
00:01:49,200 --> 00:01:53,401
Dodajmy właściwość „color”
do reguły CSS „fact”.

41
00:01:53,401 --> 00:01:55,099
Zobaczmy co się wydarzyło.

42
00:01:55,650 --> 00:02:00,326
Oba fakty stały się czerwone,
a drugi nie jest ostrzeżeniem.

43
00:02:00,326 --> 00:02:01,847
Dotyczy tylko pisowni.

44
00:02:02,051 --> 00:02:03,845
Nie chcemy, by był czerwony.

45
00:02:04,169 --> 00:02:05,578
Możemy dodać ID,

46
00:02:05,578 --> 00:02:09,573
ale gdybyśmy chcieli później
pokolorować inne ostrzeżenia

47
00:02:09,573 --> 00:02:10,958
i dodać nowe,

48
00:02:10,958 --> 00:02:14,185
to musielibyśmy dodawać ID
i reguły dla nich.

49
00:02:14,391 --> 00:02:19,806
W tym przypadku najlepiej jest
dodać kolejną klasę do znacznika „p”.

50
00:02:20,104 --> 00:02:24,151
Przeglądarki pozwalają
dodać ich tyle, ile chcemy.

51
00:02:24,541 --> 00:02:28,532
Umieszczamy kursor
po nazwie ostatniej klasy,

52
00:02:28,532 --> 00:02:33,196
robimy spację i piszemy nazwę
nowej klasy, np. „ostrzeżenie”.

53
00:02:33,984 --> 00:02:36,329
Teraz zróbmy regułę ostrzeżenia

54
00:02:37,119 --> 00:02:40,243
i włączmy w nią właściwość koloru.

55
00:02:40,835 --> 00:02:44,001
Główny fakt jest czerwony,
a drugi nie.

56
00:02:44,218 --> 00:02:45,411
Pięknie!

57
00:02:45,852 --> 00:02:49,285
Możemy nadać klasę
wielu elementom, jak wcześniej.

58
00:02:49,643 --> 00:02:54,121
Np. pokolorujemy pogrubiony tekst,
„smażone w głębokim tłuszczu”,

59
00:02:54,121 --> 00:02:56,986
damy to na czerwono,
bo takie smażenie

60
00:02:56,986 --> 00:02:59,872
często jest nazywane niezdrowym.

61
00:03:00,025 --> 00:03:03,692
Dodamy więc class="warning"

62
00:03:03,692 --> 00:03:04,626
również czerwień.

63
00:03:05,035 --> 00:03:10,820
Zauważcie, że ostrzeżenie
ma kolor czerwony

64
00:03:10,820 --> 00:03:14,653
oraz krawędzie - górną i dolną.

65
00:03:14,795 --> 00:03:17,545
Tak jest przy używaniu wielu klas.

66
00:03:17,545 --> 00:03:20,578
Przeglądarka spojrzy
na wszystkie reguły

67
00:03:20,578 --> 00:03:22,340
i zastosuje odpowiednie style.

68
00:03:22,733 --> 00:03:26,810
Ale, przekazując sens,
nie poprzestawajmy na kolorze,

69
00:03:26,810 --> 00:03:28,563
bo przecież są daltoniści.

70
00:03:28,636 --> 00:03:31,298
Niektórzy prawie nie widzą różnicy

71
00:03:31,298 --> 00:03:33,815
między czerwienią a czernią.
Może wy też!

72
00:03:33,899 --> 00:03:37,463
Zmieńmy klasę,
by wszyscy ją zauważyli.

73
00:03:38,070 --> 00:03:40,711
Ten kolor zmienimy w kolor tła,

74
00:03:40,711 --> 00:03:44,740
bo każdy widzi, gdy coś ma tło.

75
00:03:45,104 --> 00:03:47,564
Niewielki kontrast, czerwień i czerń.

76
00:03:47,564 --> 00:03:51,304
A kontrast jest ważny,
by strona była czytelna.

77
00:03:51,400 --> 00:03:54,080
Zróbmy tu biały.

78
00:03:54,785 --> 00:03:56,811
Teraz mamy białe litery

79
00:03:56,811 --> 00:03:59,611
i czerwone tło
dla tych, którzy widzą czerwień.

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

81
00:04:04,774 --> 00:04:07,787
Dzięki elastyczności klas CSS

82
00:04:07,787 --> 00:04:10,735
możemy uratować świat
przed pączkami.