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

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

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

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

0:00:10.588,0:00:13.416
зі словами моєї улюбленої [br]пісні про кроликів.

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

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

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

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

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

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

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

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

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

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

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

0:00:48.368,0:00:50.920
Але таким чином ми вибрали[br]лише перший абзац.

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

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

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

0:01:00.202,0:01:02.881
ми б мали дати кожному з них[br]новий 'id',

0:01:02.881,0:01:05.717
наприклад, "слова-пісні2" і[br]"слова-пісні3",

0:01:05.717,0:01:07.358
тому що кожний 'id' мусить [br]бути унікальним.

0:01:07.358,0:01:09.808
І потім ми б мали додати [br]правила для кожного з них.

0:01:09.808,0:01:12.398
Ми можемо це зробити.[br]Але, оу, потрібно багато попрацювати.

0:01:12.398,0:01:14.691
І щоразу, як ми додаватимемо[br]новий куплет пісні,

0:01:14.691,0:01:17.279
ми мусимо не забути додати[br]ще один 'id' до HTML коду

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

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

0:01:22.980,0:01:24.315
Але знаєте що?

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

0:01:27.599,0:01:29.009
В основному клас — це

0:01:29.009,0:01:32.067
спосіб об'єднати певні елементи[br]в групу.

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

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

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

0:01:44.705,0:01:47.915
Потім я ставлю курсор [br]на початок тега "р".

0:01:47.915,0:01:51.675
Я додаю пробіл і пишу[br]class = "

0:01:53.183,0:01:55.333
Тепер нам потрібно придумати[br]ім'я класу.

0:01:55.333,0:01:56.792
Якесь змістовне.

0:01:56.927,0:01:59.294
Назвімо його [br]"слова-пісні".

0:01:59.658,0:02:01.449
Я це написала тут.

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

0:02:04.416,0:02:06.420
Усі інші абзаци пісні.

0:02:06.510,0:02:09.154
Тому ми просто підемо [br]вниз по сторінці

0:02:09.154,0:02:12.777
і додамо атрибут до кожного[br]абзацу класу.

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

0:02:14.836,0:02:18.003
Чудово.[br]Тепер ми можемо додати правило CSS.

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

0:02:20.539,0:02:24.574
і видаляємо селектор 'id',[br]який ми вказали раніше,

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

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

0:02:28.931,0:02:34.039
Щоб запустити селектор класу,[br]ми використаємо крапку.

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

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

0:02:46.633,0:02:47.575
Та-дам!

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

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

0:02:55.240,0:02:56.398
Не працює.

0:02:56.491,0:02:58.950
Тому що для імен класів[br]розмір літер має значення.[br]

0:02:58.966,0:03:01.771
Важливо, які літери є великі, [br]а які маленькі,

0:03:01.771,0:03:03.558
так само як і для 'id'.

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

0:03:08.542,0:03:09.666
Не працює.

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

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

0:03:16.411,0:03:17.584
він здається.

0:03:18.102,0:03:24.512
Що станеться, якщо ми додамо пробіли [br]до імені класу?

0:03:25.248,0:03:27.477
Це також не працюватиме,[br]

0:03:27.477,0:03:29.997
тому що імена класів[br]не можуть містити пробілів.

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

0:03:31.649,0:03:34.972
пробіли означають дещо дуже[br]особливе у мові CSS.

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

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

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

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

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

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

0:03:51.317,0:03:54.691
поставивши крапку[br]і написавши ім'я класу.

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

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