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

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

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

4
00:00:17,114 --> 00:00:22,847
І далі є декілька правил, яких ви, напевно,
ніколи раніше не бачили

5
00:00:22,847 --> 00:00:24,737
і які, мабуть, виглядають трохи смішно.

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

7
00:00:29,967 --> 00:00:35,504
Що означає ця двокрапка?
Що ж обирають ці селектори?

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

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

10
00:00:45,002 --> 00:00:48,002
що не належить до структури сторінки,

11
00:00:48,002 --> 00:00:51,826
або просто тоді, коли не можна
використати інші селектори.

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

13
00:00:55,470 --> 00:00:57,430
в залежності від їхнього стану.

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

15
00:01:03,449 --> 00:01:06,582
і які більшість браузерів зафарбовує
за замовчуванням у блакитний колір.

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

17
00:01:10,405 --> 00:01:13,294
Їх браузер зафарбовує у фіолетовий.

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

19
00:01:16,121 --> 00:01:18,083
Але для цього у вас має бути 
поважна причина.

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

21
00:01:21,404 --> 00:01:22,954
які вони бачили або не бачили.

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

23
00:01:25,549 --> 00:01:28,474
Тому вам не слід змінювати це
без поважної причини.

24
00:01:28,474 --> 00:01:31,092
Зараз я видалю ці два правила,

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

26
00:01:34,221 --> 00:01:38,972
Наступне правило доволі веселе —
"a: hover" (наведення).

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

28
00:01:46,138 --> 00:01:48,408
А властивості будуть застосовані
лише після цього.

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

30
00:01:53,353 --> 00:01:57,406
Зробіть це, я почекаю. Hover, hover, 
hover, hover...

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

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

33
00:02:03,685 --> 00:02:05,073
а не лише для посилань.

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

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

36
00:02:10,262 --> 00:02:11,421
ви зможете лише торкнутись 
або не торкнутись.

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

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

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

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

41
00:02:26,721 --> 00:02:31,571
Наприклад, посилання, на яке натискає
користувач одразу перед тим,

42
00:02:31,571 --> 00:02:34,076
як змінюється сторінка.

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

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

45
00:02:41,064 --> 00:02:42,944
до певної частини сторінки.

46
00:02:42,944 --> 00:02:45,214
Зупиніть зараз це відео і спробуйте
перейти до посилання за допомогою

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

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

49
00:02:51,497 --> 00:02:54,635
Я вибрала однакові властивості для
псевдо-класів "hover", "active" та "focus",

50
00:02:54,635 --> 00:02:56,415
тому що вони всі належать до одного
виду речей.

51
00:02:56,415 --> 00:02:58,842
Користувач певним чином взаємодіє
з посиланням.

52
00:02:58,842 --> 00:03:01,865
Багато веб-розробників використовують
однакові властивості для всіх трьох станів

53
00:03:01,865 --> 00:03:03,655
саме з цієї причини.

54
00:03:03,655 --> 00:03:07,114
А що як я вирішу змінити колір фону?

55
00:03:07,114 --> 00:03:13,552
Що ж, я можу змінити кожне посилання
окремо

56
00:03:13,552 --> 00:03:15,885
або зробити те, що ми щойно
вивчили.

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

58
00:03:20,140 --> 00:03:27,214
Тому ми поставимо кому після цього
і напишемо "a:active" і "a:focus".

59
00:03:27,214 --> 00:03:37,418
Тепер я можу видалити ці два правила
і замінити всі три правила одним. Чудово.

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

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

62
00:03:45,123 --> 00:03:48,603
або почекати, поки ми вивчимо більше тут.

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