1
00:00:00,531 --> 00:00:04,192
Досі нам вдавалось зробити дуже багато
завдяки селекторами, які ми бачили в CSS:

2
00:00:04,192 --> 00:00:08,006
вибір за назвою тега, за ID
і за іменем класу.

3
00:00:08,290 --> 00:00:11,028
Пригадаймо собі всен це швиденько
на цій сторінці.

4
00:00:11,257 --> 00:00:13,655
на цій сторінці — все про пончики.

5
00:00:13,789 --> 00:00:15,963
Ця сторінка має заголовок, абзаци,

6
00:00:15,963 --> 00:00:18,944
кілька з яких є короткими 
однорядковими фактами.

7
00:00:19,242 --> 00:00:23,142
CSS починається з правила,
що обирає всі теги  на сторінці

8
00:00:23,142 --> 00:00:25,611
і надає їм шрифт "sans-serif".

9
00:00:26,074 --> 00:00:29,244
Я зміню його на "monospace" (шрифт
з фіксованою шириною),

10
00:00:29,244 --> 00:00:30,774
щоб ви могли побачити, де діє
цей селектор.

11
00:00:30,785 --> 00:00:31,808
Бачите?

12
00:00:34,102 --> 00:00:38,206
Наступне правило обирає усі елементи
з ID "donut-header" (пончики-заголовок).

13
00:00:38,206 --> 00:00:41,913
І ми знаємо, що це ID, оскільки
він починається з решітки.

14
00:00:42,029 --> 00:00:43,759
Оскільки цей ID доволі змістовний,

15
00:00:43,759 --> 00:00:46,688
мені здається, що він обирає
великий заголовок зверху

16
00:00:46,688 --> 00:00:47,747
і змінює його шрифт.

17
00:00:47,974 --> 00:00:51,417
Але я просто прокручу сторінку вниз
і переконаюсь, що тег  має ID.

18
00:00:51,453 --> 00:00:53,184
Так, він його має.

19
00:00:53,387 --> 00:00:56,790
Останнє правило обирає усі елементи,
які мають клас "fact" (факт).

20
00:00:56,896 --> 00:01:00,384
Ми знаємо, що це ім'я класу,
оскільки селектор починається з крапки.

21
00:01:00,488 --> 00:01:02,956
Щоб визначити, які елементи
належать до цього класу,

22
00:01:02,956 --> 00:01:05,230
я можу або подивитись,
що робить це правило —

23
00:01:05,230 --> 00:01:07,833
додає верхню та нижню межі
і певні відступи,

24
00:01:07,833 --> 00:01:10,462
або я можу проглянути код HTML
і знайти там ім'я класу.

25
00:01:10,619 --> 00:01:13,148
Я бачу ім'я класу в цьому абзаці

26
00:01:13,148 --> 00:01:14,300
і в цьому абзаці —

27
00:01:14,300 --> 00:01:16,461
два абзаци, що містять
однорядкові факти,

28
00:01:16,461 --> 00:01:18,315
і ось чому вони мають межі.

29
00:01:18,448 --> 00:01:19,778
Використання класів є зручним,

30
00:01:19,778 --> 00:01:23,007
оскільки вони дозволяють нам
надати однакові стилі багатьом елементам.

31
00:01:23,033 --> 00:01:25,346
Але ми можемо зробити значно більше
за допомогою класів,

32
00:01:25,346 --> 00:01:27,058
і зараз я вам це покажу.

33
00:01:27,230 --> 00:01:29,136
Ми маємо сторінку про пончики,

34
00:01:29,136 --> 00:01:31,361
але пончики є не дуже
здоровою їжею.

35
00:01:31,436 --> 00:01:34,007
Вони, можливо, навіть є
найменш корисною їжею.

36
00:01:34,030 --> 00:01:36,963
І вони викликають своєрідну залежність,
через цукор, що містять в собі.

37
00:01:37,009 --> 00:01:39,644
Тому якщо ми збираємось зробити
сторінку про них,

38
00:01:39,644 --> 00:01:42,421
ми, мабуть, маємо попередити людей
про їхню шкідливість.

39
00:01:42,539 --> 00:01:45,446
Як щодо того, щоб зафарбувати 
цей верхній факт червоним,

40
00:01:45,446 --> 00:01:47,626
щоб чітко визначити, що це попередження?

41
00:01:47,626 --> 00:01:49,015
Як нам це зробити?

42
00:01:49,200 --> 00:01:53,401
Ми можемо додати властивість"color"
до правила CSS "fact"

43
00:01:53,401 --> 00:01:55,679
і побачити, що з цього вийде.

44
00:01:55,679 --> 00:02:00,326
Але це зробило обидва факти червоними,
а другий факт не є попередженням,

45
00:02:00,326 --> 00:02:01,847
це всього лиш речення про вимову 
слова "пончик".

46
00:02:02,051 --> 00:02:03,845
Томи ми не хочемо, щоб воно було червоним.

47
00:02:04,169 --> 00:02:05,578
Ми можемо додати ID,

48
00:02:05,578 --> 00:02:09,573
але якщо ми потім захочемо зафарбувати
інші попередження

49
00:02:09,573 --> 00:02:10,958
і додати нові,

50
00:02:10,958 --> 00:02:14,185
нам доведеться додавати все більше ID
і правил для них.

51
00:02:14,391 --> 00:02:19,806
В таких випадках, як цей, найкращим
варіантом є додати ще один клас до тега .

52
00:02:20,104 --> 00:02:22,531
Насправді браузери нам дозволяють 
додавати стільки класів до одного тега,

53
00:02:22,531 --> 00:02:24,541
скільки ми захочемо.

54
00:02:24,541 --> 00:02:28,532
Щоб це зробити, ми ставимо курсор
після останнього імені класу,

55
00:02:28,532 --> 00:02:33,196
ставимо пробіл і потім пишемо нове
ім'я класу, наприклад "warning" (попередження).

56
00:02:33,984 --> 00:02:36,849
Тепер ми можемо створити 
правило для "warning"

57
00:02:37,119 --> 00:02:40,243
і перемістити цю властивість "color"
до цього правила.

58
00:02:40,835 --> 00:02:44,001
І тепер верхній факт — червоний,
а наступний — ні.

59
00:02:44,218 --> 00:02:45,411
Чудово!

60
00:02:45,852 --> 00:02:49,622
Ми можемо додавати назви класів
декільком елементам, як і раніше.

61
00:02:49,643 --> 00:02:52,711
Можливо, ми хочемо зафарбувати текст,
виділений жирним шрифтом,

62
00:02:52,711 --> 00:02:54,121
"deep fried" (в фритюрі)...

63
00:02:54,121 --> 00:02:56,986
Ми хочемо його зафарбувати в червоний,
тому що їжа в фритюрі

64
00:02:56,986 --> 00:02:59,872
часто асоціюється з нездоровою їжею.

65
00:03:00,025 --> 00:03:03,692
Тому ми можемо просто додати
class="warning" —

66
00:03:03,692 --> 00:03:04,626
і тепер він теж червоний.

67
00:03:05,035 --> 00:03:10,820
Зауважте, що це попередження 
має червоний колір,

68
00:03:10,820 --> 00:03:14,653
але воно досі має верхню та нижню межі.

69
00:03:14,795 --> 00:03:17,545
І це те, що відбувається, коли ми
використовуємо декілька класів —

70
00:03:17,545 --> 00:03:20,578
браузер дивитиметься, які правила до
них застосовуються,

71
00:03:20,578 --> 00:03:22,340
і застосовуватиме усі відповідні стилі.

72
00:03:22,733 --> 00:03:26,810
Нам слід бути обережними, використовуючи
кольори, які мають особливе значення,

73
00:03:26,810 --> 00:03:28,563
оскільки є люди,
що не розрізняють кольорів.

74
00:03:28,636 --> 00:03:31,298
Існують люди, які ледве
можуть розрізнити

75
00:03:31,298 --> 00:03:33,815
червоний та чорний кольори —
і, можливо, ви один із них.

76
00:03:33,899 --> 00:03:38,113
Тому змінімо цей клас так, щоб він був
виразнішим для усіх.

77
00:03:38,113 --> 00:03:40,711
Ми змінимо колір на колір фону,

78
00:03:40,711 --> 00:03:44,740
тому що всі можуть помітити, якщо щось
має колір фону.

79
00:03:45,104 --> 00:03:47,564
Червоний та чорний кольори
є недостатньо контрастними.

80
00:03:47,564 --> 00:03:51,304
А контраст є також важливим, для того
щоб наші сторінки було легко читати усім.

81
00:03:51,400 --> 00:03:54,810
Тому ми зробимо колір білим.

82
00:03:54,810 --> 00:03:56,811
Добре, тепер ми маємо висококонтрастні
кольори,

83
00:03:56,811 --> 00:03:59,611
і зокрема червоний колір для тих, хто
може його бачити.


84
00:03:59,994 --> 00:04:04,497
І оскільки ми використали клас, обидва
наші попередження мають однаковий стиль.

85
00:04:04,774 --> 00:04:07,787
І тепер, дякуючи гнучкості класів CSS,

86
00:04:07,787 --> 00:04:10,735
ми можемо вберегти весь світ
від пончиків.

87
00:04:10,744 --> 00:04:15,094
Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"