[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.81,0:00:05.43,Default,,0000,0000,0000,,Перейдімо від пончиків до моркви, одного\Nз найкорисніших продуктів у світі,
Dialogue: 0,0:00:05.43,0:00:07.90,Default,,0000,0000,0000,,а також найулюбленішої їжі кроликів.
Dialogue: 0,0:00:07.90,0:00:10.53,Default,,0000,0000,0000,,Чи знаєте ви, що морква буває не\Nлише помаранчевою?
Dialogue: 0,0:00:10.53,0:00:13.54,Default,,0000,0000,0000,,Спочатку вона була фіолетовою. І деяка\Nморква досі є такою.
Dialogue: 0,0:00:13.54,0:00:16.54,Default,,0000,0000,0000,,Ми тут маємо коротку сторінку, що містить\Nсписок кольорів моркви
Dialogue: 0,0:00:16.54,0:00:19.54,Default,,0000,0000,0000,,і речення про те, що перша морква була\Nфіолетовою.
Dialogue: 0,0:00:19.54,0:00:25.27,Default,,0000,0000,0000,,Ми використали стилі, щоб зафарбувати \Nназви кольорів у відповідний колір.
Dialogue: 0,0:00:25.27,0:00:28.90,Default,,0000,0000,0000,,Мені подобається, як стилі виглядають зі\Nсписком, але я не впевнена, що мені
Dialogue: 0,0:00:28.90,0:00:31.90,Default,,0000,0000,0000,,подобається, як стиль "purple" (фіолетовий)\Nвиглядає в тексті.
Dialogue: 0,0:00:31.90,0:00:35.04,Default,,0000,0000,0000,,Я думаю, мені краще не використовувати там\Nколір фону, а вибрати якесь менш нав'язливе
Dialogue: 0,0:00:35.04,0:00:36.22,Default,,0000,0000,0000,,кольорове оформлення.
Dialogue: 0,0:00:36.22,0:00:43.78,Default,,0000,0000,0000,,Як я можу сказати браузеру оформити\Nфіолетовий текст там по-іншому, ніж тут?
Dialogue: 0,0:00:43.78,0:00:47.78,Default,,0000,0000,0000,,Що ж, вони мають однаковий клас, тому ми\Nне можемо використати ім'я класу,
Dialogue: 0,0:00:47.78,0:00:49.30,Default,,0000,0000,0000,,доки не створимо новий клас.
Dialogue: 0,0:00:49.30,0:00:52.92,Default,,0000,0000,0000,,Вони також мають однакову назву тега —\N.
Dialogue: 0,0:00:52.92,0:00:58.01,Default,,0000,0000,0000,,Тому ми не можемо використати селектор \Nелемент-плюс-клас, який ми щойно вивчили.
Dialogue: 0,0:00:58.01,0:01:00.66,Default,,0000,0000,0000,,Є ще щось, що їх відрізняє?
Dialogue: 0,0:01:00.66,0:01:06.38,Default,,0000,0000,0000,,Єдина відмінність — це те, що цей тег\N знаходиться всередині тега ,
Dialogue: 0,0:01:06.38,0:01:10.98,Default,,0000,0000,0000,,в той час як цей тег  —\Nвсередині тега .
Dialogue: 0,0:01:10.98,0:01:15.58,Default,,0000,0000,0000,,Тобто є відмінність в батьківських тегах —\Nтегах, які є над ними.
Dialogue: 0,0:01:15.58,0:01:21.14,Default,,0000,0000,0000,,За допомогою цієї інформації, ми можемо\Nстворити правило CSS, використавши
Dialogue: 0,0:01:21.14,0:01:25.22,Default,,0000,0000,0000,,"селектор нащадка" — спосіб вибрати елемент\Nзалежно від його розташування в документі.\N
Dialogue: 0,0:01:25.22,0:01:30.62,Default,,0000,0000,0000,,Наприклад, щоб вибрати фіолетовий тег\N всередині абзацу,\N
Dialogue: 0,0:01:30.62,0:01:35.78,Default,,0000,0000,0000,,ми напишемо "р", пробіл (він є дуже\Nважливим!)
Dialogue: 0,0:01:35.78,0:01:40.38,Default,,0000,0000,0000,,і потім ім'я класу — ".purple". \N
Dialogue: 0,0:01:40.38,0:01:46.11,Default,,0000,0000,0000,,Тепер ми додамо властивості, які \Nбудуть менш помітними —
Dialogue: 0,0:01:46.11,0:01:50.31,Default,,0000,0000,0000,,колір фону "transparent" змінить те, \Nщо було раніше.
Dialogue: 0,0:01:50.31,0:01:58.80,Default,,0000,0000,0000,,Чудово. Ми змінили цей фіолетовий текст,\Nне змінивши цей.
Dialogue: 0,0:01:58.80,0:02:02.88,Default,,0000,0000,0000,,І тепер щоразу, коли ми матимемо клас\N" purple" всередині параграфа, як тут,\N
Dialogue: 0,0:02:02.88,0:02:05.32,Default,,0000,0000,0000,,застосовуватиметься саме цей новий стиль.
Dialogue: 0,0:02:05.32,0:02:09.59,Default,,0000,0000,0000,,Ми можемо використовувати пробіл, щоб\Nпробратись ще глибше в наш документ.\N
Dialogue: 0,0:02:09.59,0:02:15.73,Default,,0000,0000,0000,,Скажімо, ми хочемо застосувати стиль лише\Nдо тих тегів , які є в тегах .
Dialogue: 0,0:02:15.73,0:02:23.14,Default,,0000,0000,0000,,Ми починаємо з батьківського тега ,\Nпотім ставимо пробіл та .
Dialogue: 0,0:02:23.14,0:02:28.07,Default,,0000,0000,0000,,І, можливо, ми дамо їм іншу висоту рядка,\Nщоб розділити їх ще більше.
Dialogue: 0,0:02:28.07,0:02:34.07,Default,,0000,0000,0000,,Чудово. Ми можемо навіть додати \Nперед , якщо ми хочемо впевнетись,
Dialogue: 0,0:02:34.07,0:02:38.52,Default,,0000,0000,0000,,що це правило не буде застосоване до тегів\N в тегах  та .
Dialogue: 0,0:02:38.52,0:02:43.25,Default,,0000,0000,0000,,Бачите, для того щоб використовувати\Nселектор нащадка, ми маємо добре знати
Dialogue: 0,0:02:43.25,0:02:46.10,Default,,0000,0000,0000,,структуру документа і які теги є \Nвсередині інших.
Dialogue: 0,0:02:46.10,0:02:49.51,Default,,0000,0000,0000,,Якщо ви робите правильні відступи,\Nце буде просто,
Dialogue: 0,0:02:49.51,0:02:52.51,Default,,0000,0000,0000,,тому що ваші відступи відображатимуть\Nієрархію тегів.
Dialogue: 0,0:02:52.51,0:02:56.96,Default,,0000,0000,0000,,Бачите, ось тут є тег , далі в ньому\Nє тег ,
Dialogue: 0,0:02:56.96,0:02:59.34,Default,,0000,0000,0000,,а всередині тега  є тег .
Dialogue: 0,0:02:59.34,0:03:02.93,Default,,0000,0000,0000,,Якщо ж ви не використовуєте\Nвідступів, краще виправте це зараз,
Dialogue: 0,0:03:02.93,0:03:07.02,Default,,0000,0000,0000,,бо це значно полегшить ваше розуміння\Nструктури сторінки
Dialogue: 0,0:03:07.02,0:03:10.61,Default,,0000,0000,0000,,та селекторів CSS, які базуються на цій \Nструктурі.
Dialogue: 0,0:03:10.61,0:03:13.60,Default,,0000,0000,0000,,Ви можете використовувати пробіл \Nміж будь-якими селекторами.
Dialogue: 0,0:03:13.60,0:03:19.02,Default,,0000,0000,0000,,Наприклад, дістатись до певного тега за\Nелементом з конкретним ID
Dialogue: 0,0:03:19.02,0:03:22.46,Default,,0000,0000,0000,,чи дістатись до елемента з ID, вказавши\Nперед тим назву класу,
Dialogue: 0,0:03:22.46,0:03:25.33,Default,,0000,0000,0000,,ви можете використовувати \Nбудь-які поєднання.
Dialogue: 0,0:03:25.33,0:03:29.23,Default,,0000,0000,0000,,Єдине, що ви маєте пам'ятати — це те, що\Nколи структура вашої сторінки зміниться,
Dialogue: 0,0:03:29.23,0:03:32.23,Default,,0000,0000,0000,,ваше старе правило CSS вже не діятиме.
Dialogue: 0,0:03:32.23,0:03:37.18,Default,,0000,0000,0000,,Тому добре думайте про майбутні зміни вашої\Nсторінки, коли використовуєте ці селектори.
Dialogue: 0,0:03:37.18,0:03:39.99,Default,,0000,0000,0000,,Ви завжди можете використовувати класи,\Nякщо ви хочете бути менш залежними
Dialogue: 0,0:03:39.99,0:03:41.30,Default,,0000,0000,0000,,від структури вашої сторінки.
Dialogue: 0,0:03:41.30,0:03:45.61,Default,,0000,0000,0000,,Погляньмо на правила, які я створила,\Nі обдумаймо їх.
Dialogue: 0,0:03:45.61,0:03:49.89,Default,,0000,0000,0000,,Це перше правило оформлює певним \Nспособом всі елементи класу "purple",
Dialogue: 0,0:03:49.89,0:03:51.38,Default,,0000,0000,0000,,які є всередині абзаців.
Dialogue: 0,0:03:51.38,0:03:55.14,Default,,0000,0000,0000,,Якщо я додам в майбутньому нові абзаци з\Nелементами класу "purple",
Dialogue: 0,0:03:55.14,0:03:57.54,Default,,0000,0000,0000,,чи захочу я, щоб вони мали\Nцю властивість?
Dialogue: 0,0:03:57.55,0:04:02.53,Default,,0000,0000,0000,,Так, тому що я думаю, що ця властивість\Nзавжди добре виглядатиме в абзаці.
Dialogue: 0,0:04:02.53,0:04:05.03,Default,,0000,0000,0000,,Чи потрібне мені конкретніше правило?
Dialogue: 0,0:04:05.03,0:04:09.07,Default,,0000,0000,0000,,Можливо, якби ці абзаци були завжди cеред\Nелементів класу "article",
Dialogue: 0,0:04:09.07,0:04:11.28,Default,,0000,0000,0000,,я б могла додати це до правила.
Dialogue: 0,0:04:11.28,0:04:14.69,Default,,0000,0000,0000,,Але зараз це правило є найбільш конкретним.
Dialogue: 0,0:04:14.69,0:04:21.18,Default,,0000,0000,0000,,Друге правило дає всім тегам \Nвсередині елементів списку певну висоту рядка.
Dialogue: 0,0:04:21.18,0:04:26.04,Default,,0000,0000,0000,,Чи хочу я, щоб теги  всередині\Nсписків завжди мали більшу висоту рядка?
Dialogue: 0,0:04:26.04,0:04:30.98,Default,,0000,0000,0000,,Хм... мабуть, ні. Це правило, мабуть, \Nнадто загальне.
Dialogue: 0,0:04:30.98,0:04:36.78,Default,,0000,0000,0000,,Оскільки я не дуже впевнена, я додам клас\Nдо тега 
Dialogue: 0,0:04:36.78,0:04:42.03,Default,,0000,0000,0000,,і потім зміню це правило на "ul.spacey",
Dialogue: 0,0:04:42.03,0:04:44.65,Default,,0000,0000,0000,,щоб воно було більш конкретним.
Dialogue: 0,0:04:44.65,0:04:48.09,Default,,0000,0000,0000,,В майбутньому, коли моя сторінка\Nрозширюватиметься, я, можливо, робитиму
Dialogue: 0,0:04:48.09,0:04:49.84,Default,,0000,0000,0000,,правила менш чи більш конкретними.
Dialogue: 0,0:04:49.84,0:04:53.62,Default,,0000,0000,0000,,Додайте цей засіб до свого все більшого\Nнабору засобів СSS і попрацюйте з ним,
Dialogue: 0,0:04:53.62,0:04:57.66,Default,,0000,0000,0000,,щоб ви могли використати його,\Nколи буде така потреба.
Dialogue: 0,0:04:57.66,0:05:01.85,Default,,0000,0000,0000,,Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"