WEBVTT

00:00:00.831 --> 00:00:05.211
Ми знову на сторінці, що містить
списки відомих картин.

00:00:05.211 --> 00:00:11.743
CSS починається з правила, яке встановлює
шрифт "sans-serif" для усього тексту.

00:00:11.743 --> 00:00:17.114
Далі правило для групових селекторів, яке
змінює шрифти заголовків "h1" та "h2".

00:00:17.114 --> 00:00:22.847
І далі є декілька правил, яких ви, напевно,
ніколи раніше не бачили

00:00:22.847 --> 00:00:24.737
і які, мабуть, виглядають трохи смішно.

00:00:24.737 --> 00:00:29.967
Вони всі починаються з літери "а", потім 
двокрапка і слово.

00:00:29.967 --> 00:00:35.504
Що означає ця двокрапка?
Що ж обирають ці селектори?

00:00:35.504 --> 00:00:41.065
Всі ці речі, що починаються з двокрапки 
називаються псевдо-класами.

00:00:41.065 --> 00:00:45.002
Псевдо-клас використовують, щоб обрати
елементи, які базуються на інформації,

00:00:45.002 --> 00:00:48.002
що не належить до структури сторінки,

00:00:48.002 --> 00:00:51.826
або просто тоді, коли не можна
використати інші селектори.

00:00:51.826 --> 00:00:55.470
На цій сторінці я використовую
псевдо-класи, щоб оформити посилання

00:00:55.470 --> 00:00:57.430
в залежності від їхнього стану.

00:00:57.430 --> 00:01:03.449
Псевдо-клас "link" обере всі посилання на
сторінці, які користувач ще не відвідував

00:01:03.449 --> 00:01:06.582
і які більшість браузерів зафарбовує
за замовчуванням у блакитний колір.

00:01:06.582 --> 00:01:10.405
Псевдо-клас "visited" обере усі посилання, які
користувач вже відвідав.

00:01:10.405 --> 00:01:13.294
Їх браузер зафарбовує у фіолетовий.

00:01:13.294 --> 00:01:16.121
Якщо ми справді хочемо, ми можемо
змінити ці кольори.

00:01:16.121 --> 00:01:18.083
Але для цього у вас має бути 
поважна причина.

00:01:18.083 --> 00:01:21.404
Люди звикли асоціювати блакитний та
фіолетовий кольори зі сторінками,

00:01:21.404 --> 00:01:22.954
які вони бачили або не бачили.

00:01:22.954 --> 00:01:25.549
І також вони люблять знати, які
сторінки вони вже відвідували.

00:01:25.549 --> 00:01:28.474
Тому вам не слід змінювати це
без поважної причини.

00:01:28.474 --> 00:01:31.092
Зараз я видалю ці два правила,

00:01:31.092 --> 00:01:34.221
тому що, як на мене, змінювати кольори —
не дуже добра ідея.

00:01:34.221 --> 00:01:38.972
Наступне правило доволі веселе —
"a: hover" (наведення).

00:01:38.972 --> 00:01:46.138
Псевдо-клас "hover" обере елементи,
на які користувач наведе мишкою.

00:01:46.138 --> 00:01:48.408
А властивості будуть застосовані
лише після цього.

00:01:48.408 --> 00:01:53.353
Зупиніть це відео і наведіть мишкою
на посилання, щоб побачити, що трапиться.

00:01:53.353 --> 00:01:57.406
Зробіть це, я почекаю. Hover, hover, 
hover, hover...

00:01:57.406 --> 00:02:01.165
Чи ви помітили, що змінився колір фону?
Це досить класний ефект.

00:02:01.165 --> 00:02:03.685
І ви можете використовувати цей 
псевдо-клас "hover" для усіх елементів,

00:02:03.685 --> 00:02:05.073
а не лише для посилань.

00:02:05.073 --> 00:02:07.662
Лише пам'ятайте, що цей псевдо-клас
працюватиме не на усіх пристроях.

00:02:07.662 --> 00:02:10.262
Наприклад, якщо ви використовуєте телефон,
ви не можете навести мишкою,

00:02:10.262 --> 00:02:11.421
ви зможете лише торкнутись 
або не торкнутись.

00:02:11.421 --> 00:02:15.298
Добре мати цей ефект як бонус,
але не дуже покладайтеся на нього.

00:02:15.298 --> 00:02:20.503
Що означають останні два правила?
Вони такі самі, як і "hover".

00:02:20.503 --> 00:02:23.043
Вони залежать від того, що саме
робить користувач.

00:02:23.067 --> 00:02:26.721
Псевдо-клас "active" (активний)
обирає елементи, які були активовані.

00:02:26.721 --> 00:02:31.571
Наприклад, посилання, на яке натискає
користувач одразу перед тим,

00:02:31.571 --> 00:02:34.076
як змінюється сторінка.

00:02:34.076 --> 00:02:38.274
Псевдо-клас "focus" (орієнтованість) 
обирає елементи, які мають орієнтацію,

NOTE Paragraph

00:02:38.274 --> 00:02:41.064
переважно тоді, коли ви використовуєте
клавішу табуляції, щоб перейти

00:02:41.064 --> 00:02:42.944
до певної частини сторінки.

00:02:42.944 --> 00:02:45.214
Зупиніть зараз це відео і спробуйте
перейти до посилання за допомогою

00:02:45.214 --> 00:02:47.744
клавіші "tab" і просто натиснути на нього,
щоб побачити, що трапиться.

00:02:47.744 --> 00:02:51.497
Чи ви побачили, що змінився колір
фону, коли ви це зробили?

NOTE Paragraph

00:02:51.497 --> 00:02:54.635
Я вибрала однакові властивості для
псевдо-класів "hover", "active" та "focus",

00:02:54.635 --> 00:02:56.415
тому що вони всі належать до одного
виду речей.

00:02:56.415 --> 00:02:58.842
Користувач певним чином взаємодіє
з посиланням.

00:02:58.842 --> 00:03:01.865
Багато веб-розробників використовують
однакові властивості для всіх трьох станів

00:03:01.865 --> 00:03:03.655
саме з цієї причини.

00:03:03.655 --> 00:03:07.114
А що як я вирішу змінити колір фону?

00:03:07.114 --> 00:03:13.552
Що ж, я можу змінити кожне посилання
окремо

00:03:13.552 --> 00:03:15.885
або зробити те, що ми щойно
вивчили.

00:03:15.885 --> 00:03:20.140
Я можу згрупувати селектори, поставивши
їх в одне правило, розділивши комами.

00:03:20.140 --> 00:03:27.214
Тому ми поставимо кому після цього
і напишемо "a:active" і "a:focus".

00:03:27.214 --> 00:03:37.418
Тепер я можу видалити ці два правила
і замінити всі три правила одним. Чудово.

00:03:37.418 --> 00:03:41.531
Ми вам показали лише декілька 
псевдо-класів, насправді їх є значно більше.

00:03:41.531 --> 00:03:45.123
Ви можете пошукати псевдо-класи CSS 
в Інтернеті, щоб вивчити декілька нових,

00:03:45.123 --> 00:03:48.603
або почекати, поки ми вивчимо більше тут.

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