[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.83,0:00:05.21,Default,,0000,0000,0000,,Ми знову на сторінці, що містить\Nсписки відомих картин.
Dialogue: 0,0:00:05.21,0:00:11.74,Default,,0000,0000,0000,,CSS починається з правила, яке встановлює\Nшрифт "sans-serif" для усього тексту.
Dialogue: 0,0:00:11.74,0:00:17.11,Default,,0000,0000,0000,,Далі правило для групових селекторів, яке\Nзмінює шрифти заголовків "h1" та "h2".
Dialogue: 0,0:00:17.11,0:00:22.85,Default,,0000,0000,0000,,І далі є декілька правил, яких ви, напевно,\Nніколи раніше не бачили
Dialogue: 0,0:00:22.85,0:00:24.74,Default,,0000,0000,0000,,і які, мабуть, виглядають трохи смішно.
Dialogue: 0,0:00:24.74,0:00:29.97,Default,,0000,0000,0000,,Вони всі починаються з літери "а", потім \Nдвокрапка і слово.
Dialogue: 0,0:00:29.97,0:00:35.50,Default,,0000,0000,0000,,Що означає ця двокрапка?\NЩо ж обирають ці селектори?
Dialogue: 0,0:00:35.50,0:00:41.06,Default,,0000,0000,0000,,Всі ці речі, що починаються з двокрапки \Nназиваються псевдо-класами.
Dialogue: 0,0:00:41.06,0:00:45.00,Default,,0000,0000,0000,,Псевдо-клас використовують, щоб обрати\Nелементи, які базуються на інформації,
Dialogue: 0,0:00:45.00,0:00:48.00,Default,,0000,0000,0000,,що не належить до структури сторінки,
Dialogue: 0,0:00:48.00,0:00:51.83,Default,,0000,0000,0000,,або просто тоді, коли не можна\Nвикористати інші селектори.
Dialogue: 0,0:00:51.83,0:00:55.47,Default,,0000,0000,0000,,На цій сторінці я використовую\Nпсевдо-класи, щоб оформити посилання
Dialogue: 0,0:00:55.47,0:00:57.43,Default,,0000,0000,0000,,в залежності від їхнього стану.
Dialogue: 0,0:00:57.43,0:01:03.45,Default,,0000,0000,0000,,Псевдо-клас "link" обере всі посилання на\Nсторінці, які користувач ще не відвідував
Dialogue: 0,0:01:03.45,0:01:06.58,Default,,0000,0000,0000,,і які більшість браузерів зафарбовує\Nза замовчуванням у блакитний колір.
Dialogue: 0,0:01:06.58,0:01:10.40,Default,,0000,0000,0000,,Псевдо-клас "visited" обере усі посилання, які\Nкористувач вже відвідав.
Dialogue: 0,0:01:10.40,0:01:13.29,Default,,0000,0000,0000,,Їх браузер зафарбовує у фіолетовий.
Dialogue: 0,0:01:13.29,0:01:16.12,Default,,0000,0000,0000,,Якщо ми справді хочемо, ми можемо\Nзмінити ці кольори.
Dialogue: 0,0:01:16.12,0:01:18.08,Default,,0000,0000,0000,,Але для цього у вас має бути \Nповажна причина.
Dialogue: 0,0:01:18.08,0:01:21.40,Default,,0000,0000,0000,,Люди звикли асоціювати блакитний та\Nфіолетовий кольори зі сторінками,
Dialogue: 0,0:01:21.40,0:01:22.95,Default,,0000,0000,0000,,які вони бачили або не бачили.
Dialogue: 0,0:01:22.95,0:01:25.55,Default,,0000,0000,0000,,І також вони люблять знати, які\Nсторінки вони вже відвідували.
Dialogue: 0,0:01:25.55,0:01:28.47,Default,,0000,0000,0000,,Тому вам не слід змінювати це\Nбез поважної причини.
Dialogue: 0,0:01:28.47,0:01:31.09,Default,,0000,0000,0000,,Зараз я видалю ці два правила,
Dialogue: 0,0:01:31.09,0:01:34.22,Default,,0000,0000,0000,,тому що, як на мене, змінювати кольори —\Nне дуже добра ідея.
Dialogue: 0,0:01:34.22,0:01:38.97,Default,,0000,0000,0000,,Наступне правило доволі веселе —\N"a: hover" (наведення).
Dialogue: 0,0:01:38.97,0:01:46.14,Default,,0000,0000,0000,,Псевдо-клас "hover" обере елементи,\Nна які користувач наведе мишкою.
Dialogue: 0,0:01:46.14,0:01:48.41,Default,,0000,0000,0000,,А властивості будуть застосовані\Nлише після цього.
Dialogue: 0,0:01:48.41,0:01:53.35,Default,,0000,0000,0000,,Зупиніть це відео і наведіть мишкою\Nна посилання, щоб побачити, що трапиться.
Dialogue: 0,0:01:53.35,0:01:57.41,Default,,0000,0000,0000,,Зробіть це, я почекаю. Hover, hover, \Nhover, hover...
Dialogue: 0,0:01:57.41,0:02:01.16,Default,,0000,0000,0000,,Чи ви помітили, що змінився колір фону?\NЦе досить класний ефект.
Dialogue: 0,0:02:01.16,0:02:03.68,Default,,0000,0000,0000,,І ви можете використовувати цей \Nпсевдо-клас "hover" для усіх елементів,
Dialogue: 0,0:02:03.68,0:02:05.07,Default,,0000,0000,0000,,а не лише для посилань.
Dialogue: 0,0:02:05.07,0:02:07.66,Default,,0000,0000,0000,,Лише пам'ятайте, що цей псевдо-клас\Nпрацюватиме не на усіх пристроях.
Dialogue: 0,0:02:07.66,0:02:10.26,Default,,0000,0000,0000,,Наприклад, якщо ви використовуєте телефон,\Nви не можете навести мишкою,
Dialogue: 0,0:02:10.26,0:02:11.42,Default,,0000,0000,0000,,ви зможете лише торкнутись \Nабо не торкнутись.
Dialogue: 0,0:02:11.42,0:02:15.30,Default,,0000,0000,0000,,Добре мати цей ефект як бонус,\Nале не дуже покладайтеся на нього.
Dialogue: 0,0:02:15.30,0:02:20.50,Default,,0000,0000,0000,,Що означають останні два правила?\NВони такі самі, як і "hover".
Dialogue: 0,0:02:20.50,0:02:23.04,Default,,0000,0000,0000,,Вони залежать від того, що саме\Nробить користувач.
Dialogue: 0,0:02:23.07,0:02:26.72,Default,,0000,0000,0000,,Псевдо-клас "active" (активний)\Nобирає елементи, які були активовані.
Dialogue: 0,0:02:26.72,0:02:31.57,Default,,0000,0000,0000,,Наприклад, посилання, на яке натискає\Nкористувач одразу перед тим,
Dialogue: 0,0:02:31.57,0:02:34.08,Default,,0000,0000,0000,,як змінюється сторінка.
Dialogue: 0,0:02:34.08,0:02:38.27,Default,,0000,0000,0000,,Псевдо-клас "focus" (орієнтованість) \Nобирає елементи, які мають орієнтацію,
Dialogue: 0,0:02:38.27,0:02:41.06,Default,,0000,0000,0000,,переважно тоді, коли ви використовуєте\Nклавішу табуляції, щоб перейти
Dialogue: 0,0:02:41.06,0:02:42.94,Default,,0000,0000,0000,,до певної частини сторінки.
Dialogue: 0,0:02:42.94,0:02:45.21,Default,,0000,0000,0000,,Зупиніть зараз це відео і спробуйте\Nперейти до посилання за допомогою
Dialogue: 0,0:02:45.21,0:02:47.74,Default,,0000,0000,0000,,клавіші "tab" і просто натиснути на нього,\Nщоб побачити, що трапиться.
Dialogue: 0,0:02:47.74,0:02:51.50,Default,,0000,0000,0000,,Чи ви побачили, що змінився колір\Nфону, коли ви це зробили?
Dialogue: 0,0:02:51.50,0:02:54.64,Default,,0000,0000,0000,,Я вибрала однакові властивості для\Nпсевдо-класів "hover", "active" та "focus",
Dialogue: 0,0:02:54.64,0:02:56.42,Default,,0000,0000,0000,,тому що вони всі належать до одного\Nвиду речей.
Dialogue: 0,0:02:56.42,0:02:58.84,Default,,0000,0000,0000,,Користувач певним чином взаємодіє\Nз посиланням.
Dialogue: 0,0:02:58.84,0:03:01.86,Default,,0000,0000,0000,,Багато веб-розробників використовують\Nоднакові властивості для всіх трьох станів
Dialogue: 0,0:03:01.86,0:03:03.66,Default,,0000,0000,0000,,саме з цієї причини.
Dialogue: 0,0:03:03.66,0:03:07.11,Default,,0000,0000,0000,,А що як я вирішу змінити колір фону?
Dialogue: 0,0:03:07.11,0:03:13.55,Default,,0000,0000,0000,,Що ж, я можу змінити кожне посилання\Nокремо
Dialogue: 0,0:03:13.55,0:03:15.88,Default,,0000,0000,0000,,або зробити те, що ми щойно\Nвивчили.
Dialogue: 0,0:03:15.88,0:03:20.14,Default,,0000,0000,0000,,Я можу згрупувати селектори, поставивши\Nїх в одне правило, розділивши комами.
Dialogue: 0,0:03:20.14,0:03:27.21,Default,,0000,0000,0000,,Тому ми поставимо кому після цього\Nі напишемо "a:active" і "a:focus".
Dialogue: 0,0:03:27.21,0:03:37.42,Default,,0000,0000,0000,,Тепер я можу видалити ці два правила\Nі замінити всі три правила одним. Чудово.
Dialogue: 0,0:03:37.42,0:03:41.53,Default,,0000,0000,0000,,Ми вам показали лише декілька \Nпсевдо-класів, насправді їх є значно більше.
Dialogue: 0,0:03:41.53,0:03:45.12,Default,,0000,0000,0000,,Ви можете пошукати псевдо-класи CSS \Nв Інтернеті, щоб вивчити декілька нових,
Dialogue: 0,0:03:45.12,0:03:48.60,Default,,0000,0000,0000,,або почекати, поки ми вивчимо більше тут.
Dialogue: 0,0:03:48.60,0:03:52.69,Default,,0000,0000,0000,,Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"