WEBVTT

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

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

00:00:08.290 --> 00:00:11.028
Пригадаймо собі всен це швиденько
на цій сторінці.

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

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

00:00:15.963 --> 00:00:18.944
кілька з яких є короткими 
однорядковими фактами.

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

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

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

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

00:00:30.785 --> 00:00:31.808
Бачите?

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

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

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

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

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

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

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

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

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

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

00:01:02.956 --> 00:01:05.230
я можу або подивитись,
що робить це правило —

00:01:05.230 --> 00:01:07.833
додає верхню та нижню межі
і певні відступи,

00:01:07.833 --> 00:01:10.462
або я можу проглянути код HTML
і знайти там ім'я класу.

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

00:01:13.148 --> 00:01:14.300
і в цьому абзаці —

00:01:14.300 --> 00:01:16.461
два абзаци, що містять
однорядкові факти,

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

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

00:01:19.778 --> 00:01:23.007
оскільки вони дозволяють нам
надати однакові стилі багатьом елементам.

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

00:01:25.346 --> 00:01:27.058
і зараз я вам це покажу.

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

00:01:29.136 --> 00:01:31.361
але пончики є не дуже
здоровою їжею.

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

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

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

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

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

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

00:01:47.626 --> 00:01:49.015
Як нам це зробити?

00:01:49.200 --> 00:01:53.401
Ми можемо додати властивість"color"
до правила CSS "fact"

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

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

00:02:00.326 --> 00:02:01.847
це всього лиш речення про вимову 
слова "пончик".

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

00:02:04.169 --> 00:02:05.578
Ми можемо додати ID,

00:02:05.578 --> 00:02:09.573
але якщо ми потім захочемо зафарбувати
інші попередження

00:02:09.573 --> 00:02:10.958
і додати нові,

00:02:10.958 --> 00:02:14.185
нам доведеться додавати все більше ID
і правил для них.

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

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

00:02:22.531 --> 00:02:24.541
скільки ми захочемо.

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

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

00:02:33.984 --> 00:02:36.849
Тепер ми можемо створити 
правило для "warning"

00:02:37.119 --> 00:02:40.243
і перемістити цю властивість "color"
до цього правила.

00:02:40.835 --> 00:02:44.001
І тепер верхній факт — червоний,
а наступний — ні.

00:02:44.218 --> 00:02:45.411
Чудово!

00:02:45.852 --> 00:02:49.622
Ми можемо додавати назви класів
декільком елементам, як і раніше.

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

00:02:52.711 --> 00:02:54.121
"deep fried" (в фритюрі)...

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

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

00:03:00.025 --> 00:03:03.692
Тому ми можемо просто додати
class="warning" —

00:03:03.692 --> 00:03:04.626
і тепер він теж червоний.

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

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

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

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

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

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

00:03:26.810 --> 00:03:28.563
оскільки є люди,
що не розрізняють кольорів.

00:03:28.636 --> 00:03:31.298
Існують люди, які ледве
можуть розрізнити

00:03:31.298 --> 00:03:33.815
червоний та чорний кольори —
і, можливо, ви один із них.

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

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

00:03:40.711 --> 00:03:44.740
тому що всі можуть помітити, якщо щось
має колір фону.

00:03:45.104 --> 00:03:47.564
Червоний та чорний кольори
є недостатньо контрастними.

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

00:03:51.400 --> 00:03:54.810
Тому ми зробимо колір білим.

00:03:54.810 --> 00:03:56.811
Добре, тепер ми маємо висококонтрастні
кольори,

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


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

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

00:04:07.787 --> 00:04:10.735
ми можемо вберегти весь світ
від пончиків.

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