WEBVTT

00:00:00.326 --> 00:00:02.079
Погляньмо на нашу сторінку.

00:00:02.284 --> 00:00:04.540
Вона має заголовки,

00:00:04.540 --> 00:00:07.581
абзац з описом кроликів,

00:00:07.581 --> 00:00:10.588
а також, багато абзаців

00:00:10.588 --> 00:00:13.416
зі словами моєї улюбленої 
пісні про кроликів.

00:00:13.543 --> 00:00:17.554
Минулого разу ми оформили перший
абзац пісні, використавши 'id'.

00:00:17.857 --> 00:00:21.016
Але зараз, оскільки я маю декілька
абзаців зі словами,


00:00:21.016 --> 00:00:24.083
я хочу, щоб вони всі мали
фон жовтого кольору.

00:00:24.613 --> 00:00:27.692
Як ми можемо це зробити, застосувавши
те, що ми вже знаємо?

00:00:28.221 --> 00:00:30.374
Спочатку ми вивчили,

00:00:30.374 --> 00:00:33.002
як вибрати всі теги певного типу,

00:00:33.002 --> 00:00:34.659
так як було у випадку з селектором 'р'.

00:00:34.886 --> 00:00:39.120
Але так ми зафарбували усі абзаци,
а не лише абзаци з піснею.

00:00:39.226 --> 00:00:41.290
Нам потрібно щось конкретніше.

00:00:41.507 --> 00:00:44.898
Потім ми вивчили, як вибрати теги
з певним 'id',

00:00:44.898 --> 00:00:48.140
так як було у випадку з вибором абзацу
з 'id' "пісня-кроликів".

00:00:48.368 --> 00:00:50.920
Але таким чином ми вибрали
лише перший абзац.

00:00:51.120 --> 00:00:53.725
Ми не можемо додати цей 'id' 
до інших абзаців,

00:00:53.725 --> 00:00:57.657
тому що нам не дозволено використовувати
однаковий 'id' для декількох тегів.

00:00:57.867 --> 00:01:00.202
Якщо б ми захотіли вибрати
інші абзаци,

00:01:00.202 --> 00:01:02.881
ми б мали дати кожному з них
новий 'id',

00:01:02.881 --> 00:01:05.717
наприклад, "слова-пісні2" і
"слова-пісні3",

00:01:05.717 --> 00:01:07.358
тому що кожний 'id' мусить 
бути унікальним.

00:01:07.358 --> 00:01:09.808
І потім ми б мали додати 
правила для кожного з них.

00:01:09.808 --> 00:01:12.398
Ми можемо це зробити.
Але, оу, потрібно багато попрацювати.

00:01:12.398 --> 00:01:14.691
І щоразу, як ми додаватимемо
новий куплет пісні,

00:01:14.691 --> 00:01:17.279
ми мусимо не забути додати
ще один 'id' до HTML коду

00:01:17.279 --> 00:01:19.018
і ще один 'id' до правил CSS.

00:01:19.018 --> 00:01:22.830
І якщо ми додамо сотні куплетів,
це буде просто виснажливо!

00:01:22.980 --> 00:01:24.315
Але знаєте що?

00:01:24.492 --> 00:01:27.383
Існує кращий спосіб,
і він називається "класи" ("classes").

00:01:27.599 --> 00:01:29.009
В основному клас — це

00:01:29.009 --> 00:01:32.067
спосіб об'єднати певні елементи
в групу.

00:01:32.162 --> 00:01:35.150
І ви можете об'єднати стільки 
елементів, скільки захочете.

00:01:35.352 --> 00:01:39.928
Щоб додати клас, ми маємо додати
атрибут 'class', так як це було у випадку з 'id'.

00:01:40.362 --> 00:01:44.705
Спочатку я видалю цей ID,
оскільки я збираюсь його замінити.

00:01:44.705 --> 00:01:47.915
Потім я ставлю курсор 
на початок тега "р".

00:01:47.915 --> 00:01:51.675
Я додаю пробіл і пишу
class = "

00:01:53.183 --> 00:01:55.333
Тепер нам потрібно придумати
ім'я класу.

00:01:55.333 --> 00:01:56.792
Якесь змістовне.

00:01:56.927 --> 00:01:59.294
Назвімо його 
"слова-пісні".

00:01:59.658 --> 00:02:01.449
Я це написала тут.

00:02:01.665 --> 00:02:04.335
Які інші елементи має містити цей клас?

00:02:04.416 --> 00:02:06.420
Усі інші абзаци пісні.

00:02:06.510 --> 00:02:09.154
Тому ми просто підемо 
вниз по сторінці

00:02:09.154 --> 00:02:12.777
і додамо атрибут до кожного
абзацу класу.

00:02:13.061 --> 00:02:14.540
("слова-пісні").

00:02:14.836 --> 00:02:18.003
Чудово.
Тепер ми можемо додати правило CSS.

00:02:18.217 --> 00:02:20.539
Тому ми піднімаємось до тега 

00:02:20.539 --> 00:02:24.574
і видаляємо селектор 'id',
який ми вказали раніше,

00:02:24.574 --> 00:02:25.772
оскільки ми його хочемо замінити.

00:02:26.157 --> 00:02:28.594
І зараз ми маємо написати селектор класу.

00:02:28.931 --> 00:02:34.039
Щоб запустити селектор класу,
ми використаємо крапку.

00:02:34.426 --> 00:02:39.027
Потім напишемо ім'я класу: "слова-пісні",

00:02:39.027 --> 00:02:46.415
і далі, як завжди, фігурні дужки,
властивість, двокрапка, значення.

00:02:46.633 --> 00:02:47.575
Та-дам!

00:02:47.821 --> 00:02:51.007
Вся пісня тепер має жовтий фон.

00:02:51.343 --> 00:02:55.143
Що станеться, якщо ми збільшимо 
літеру "s" тут?

00:02:55.240 --> 00:02:56.398
Не працює.

00:02:56.491 --> 00:02:58.950
Тому що для імен класів
розмір літер має значення.


00:02:58.966 --> 00:03:01.771
Важливо, які літери є великі, 
а які маленькі,

00:03:01.771 --> 00:03:03.558
так само як і для 'id'.

00:03:04.323 --> 00:03:08.295
Що буде, якщо ми використаємо
решітку замість крапки?

00:03:08.542 --> 00:03:09.666
Не працює.

00:03:09.774 --> 00:03:13.085
Тому що так браузер думає, 
що "слова-пісні" — це 'id',

00:03:13.085 --> 00:03:16.411
і коли він не може знайти такого
'id', як "слова-пісні",

00:03:16.411 --> 00:03:17.584
він здається.

00:03:18.102 --> 00:03:24.512
Що станеться, якщо ми додамо пробіли 
до імені класу?

00:03:25.248 --> 00:03:27.477
Це також не працюватиме,


00:03:27.477 --> 00:03:29.997
тому що імена класів
не можуть містити пробілів.

00:03:30.192 --> 00:03:31.649
І як ми вивчимо пізніше,

00:03:31.649 --> 00:03:34.972
пробіли означають дещо дуже
особливе у мові CSS.

00:03:35.868 --> 00:03:38.776
Тому ми зробимо все, як було.

00:03:39.523 --> 00:03:41.110
Отже, повторимо ще раз:

00:03:41.110 --> 00:03:43.387
Коли ми хочемо додати клас,

00:03:43.387 --> 00:03:45.589
ми йому придумуємо ім'я,

00:03:45.589 --> 00:03:49.000
додаємо його до атрибута класу в HTML.

00:03:49.248 --> 00:03:51.317
Потім створюємо правило стилю,

00:03:51.317 --> 00:03:54.691
поставивши крапку
і написавши ім'я класу.

00:03:55.216 --> 00:03:58.394
Тепер ваш СSS може бути класним!

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