0:00:00.531,0:00:04.192
Досі нам вдавалось зробити дуже багато[br]завдяки селекторами, які ми бачили в CSS:

0:00:04.192,0:00:08.006
вибір за назвою тега, за ID[br]і за іменем класу.

0:00:08.290,0:00:11.028
Пригадаймо собі всен це швиденько[br]на цій сторінці.

0:00:11.257,0:00:13.655
на цій сторінці — все про пончики.

0:00:13.789,0:00:15.963
Ця сторінка має заголовок, абзаци,

0:00:15.963,0:00:18.944
кілька з яких є короткими [br]однорядковими фактами.

0:00:19.242,0:00:23.142
CSS починається з правила,[br]що обирає всі теги  на сторінці

0:00:23.142,0:00:25.611
і надає їм шрифт "sans-serif".

0:00:26.074,0:00:29.244
Я зміню його на "monospace" (шрифт[br]з фіксованою шириною),

0:00:29.244,0:00:30.774
щоб ви могли побачити, де діє[br]цей селектор.

0:00:30.785,0:00:31.808
Бачите?

0:00:34.102,0:00:38.206
Наступне правило обирає усі елементи[br]з ID "donut-header" (пончики-заголовок).

0:00:38.206,0:00:41.913
І ми знаємо, що це ID, оскільки[br]він починається з решітки.

0:00:42.029,0:00:43.759
Оскільки цей ID доволі змістовний,

0:00:43.759,0:00:46.688
мені здається, що він обирає[br]великий заголовок зверху

0:00:46.688,0:00:47.747
і змінює його шрифт.

0:00:47.974,0:00:51.417
Але я просто прокручу сторінку вниз[br]і переконаюсь, що тег  має ID.

0:00:51.453,0:00:53.184
Так, він його має.

0:00:53.387,0:00:56.790
Останнє правило обирає усі елементи,[br]які мають клас "fact" (факт).

0:00:56.896,0:01:00.384
Ми знаємо, що це ім'я класу,[br]оскільки селектор починається з крапки.

0:01:00.488,0:01:02.956
Щоб визначити, які елементи[br]належать до цього класу,

0:01:02.956,0:01:05.230
я можу або подивитись,[br]що робить це правило —

0:01:05.230,0:01:07.833
додає верхню та нижню межі[br]і певні відступи,

0:01:07.833,0:01:10.462
або я можу проглянути код HTML[br]і знайти там ім'я класу.

0:01:10.619,0:01:13.148
Я бачу ім'я класу в цьому абзаці

0:01:13.148,0:01:14.300
і в цьому абзаці —

0:01:14.300,0:01:16.461
два абзаци, що містять[br]однорядкові факти,

0:01:16.461,0:01:18.315
і ось чому вони мають межі.

0:01:18.448,0:01:19.778
Використання класів є зручним,

0:01:19.778,0:01:23.007
оскільки вони дозволяють нам[br]надати однакові стилі багатьом елементам.

0:01:23.033,0:01:25.346
Але ми можемо зробити значно більше[br]за допомогою класів,

0:01:25.346,0:01:27.058
і зараз я вам це покажу.

0:01:27.230,0:01:29.136
Ми маємо сторінку про пончики,

0:01:29.136,0:01:31.361
але пончики є не дуже[br]здоровою їжею.

0:01:31.436,0:01:34.007
Вони, можливо, навіть є[br]найменш корисною їжею.

0:01:34.030,0:01:36.963
І вони викликають своєрідну залежність,[br]через цукор, що містять в собі.

0:01:37.009,0:01:39.644
Тому якщо ми збираємось зробити[br]сторінку про них,

0:01:39.644,0:01:42.421
ми, мабуть, маємо попередити людей[br]про їхню шкідливість.

0:01:42.539,0:01:45.446
Як щодо того, щоб зафарбувати [br]цей верхній факт червоним,

0:01:45.446,0:01:47.626
щоб чітко визначити, що це попередження?

0:01:47.626,0:01:49.015
Як нам це зробити?

0:01:49.200,0:01:53.401
Ми можемо додати властивість"color"[br]до правила CSS "fact"

0:01:53.401,0:01:55.679
і побачити, що з цього вийде.

0:01:55.679,0:02:00.326
Але це зробило обидва факти червоними,[br]а другий факт не є попередженням,

0:02:00.326,0:02:01.847
це всього лиш речення про вимову [br]слова "пончик".

0:02:02.051,0:02:03.845
Томи ми не хочемо, щоб воно було червоним.

0:02:04.169,0:02:05.578
Ми можемо додати ID,

0:02:05.578,0:02:09.573
але якщо ми потім захочемо зафарбувати[br]інші попередження

0:02:09.573,0:02:10.958
і додати нові,

0:02:10.958,0:02:14.185
нам доведеться додавати все більше ID[br]і правил для них.

0:02:14.391,0:02:19.806
В таких випадках, як цей, найкращим[br]варіантом є додати ще один клас до тега .

0:02:20.104,0:02:22.531
Насправді браузери нам дозволяють [br]додавати стільки класів до одного тега,

0:02:22.531,0:02:24.541
скільки ми захочемо.

0:02:24.541,0:02:28.532
Щоб це зробити, ми ставимо курсор[br]після останнього імені класу,

0:02:28.532,0:02:33.196
ставимо пробіл і потім пишемо нове[br]ім'я класу, наприклад "warning" (попередження).

0:02:33.984,0:02:36.849
Тепер ми можемо створити [br]правило для "warning"

0:02:37.119,0:02:40.243
і перемістити цю властивість "color"[br]до цього правила.

0:02:40.835,0:02:44.001
І тепер верхній факт — червоний,[br]а наступний — ні.

0:02:44.218,0:02:45.411
Чудово!

0:02:45.852,0:02:49.622
Ми можемо додавати назви класів[br]декільком елементам, як і раніше.

0:02:49.643,0:02:52.711
Можливо, ми хочемо зафарбувати текст,[br]виділений жирним шрифтом,

0:02:52.711,0:02:54.121
"deep fried" (в фритюрі)...

0:02:54.121,0:02:56.986
Ми хочемо його зафарбувати в червоний,[br]тому що їжа в фритюрі

0:02:56.986,0:02:59.872
часто асоціюється з нездоровою їжею.

0:03:00.025,0:03:03.692
Тому ми можемо просто додати[br]class="warning" —

0:03:03.692,0:03:04.626
і тепер він теж червоний.

0:03:05.035,0:03:10.820
Зауважте, що це попередження [br]має червоний колір,

0:03:10.820,0:03:14.653
але воно досі має верхню та нижню межі.

0:03:14.795,0:03:17.545
І це те, що відбувається, коли ми[br]використовуємо декілька класів —

0:03:17.545,0:03:20.578
браузер дивитиметься, які правила до[br]них застосовуються,

0:03:20.578,0:03:22.340
і застосовуватиме усі відповідні стилі.

0:03:22.733,0:03:26.810
Нам слід бути обережними, використовуючи[br]кольори, які мають особливе значення,

0:03:26.810,0:03:28.563
оскільки є люди,[br]що не розрізняють кольорів.

0:03:28.636,0:03:31.298
Існують люди, які ледве[br]можуть розрізнити

0:03:31.298,0:03:33.815
червоний та чорний кольори —[br]і, можливо, ви один із них.

0:03:33.899,0:03:38.113
Тому змінімо цей клас так, щоб він був[br]виразнішим для усіх.

0:03:38.113,0:03:40.711
Ми змінимо колір на колір фону,

0:03:40.711,0:03:44.740
тому що всі можуть помітити, якщо щось[br]має колір фону.

0:03:45.104,0:03:47.564
Червоний та чорний кольори[br]є недостатньо контрастними.

0:03:47.564,0:03:51.304
А контраст є також важливим, для того[br]щоб наші сторінки було легко читати усім.

0:03:51.400,0:03:54.810
Тому ми зробимо колір білим.

0:03:54.810,0:03:56.811
Добре, тепер ми маємо висококонтрастні[br]кольори,

0:03:56.811,0:03:59.611
і зокрема червоний колір для тих, хто[br]може його бачити.[br]

0:03:59.994,0:04:04.497
І оскільки ми використали клас, обидва[br]наші попередження мають однаковий стиль.

0:04:04.774,0:04:07.787
І тепер, дякуючи гнучкості класів CSS,

0:04:07.787,0:04:10.735
ми можемо вберегти весь світ[br]від пончиків.

0:04:10.744,0:04:15.094
Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"