1
00:00:00,326 --> 00:00:02,079
Погляньмо на нашу сторінку.

2
00:00:02,284 --> 00:00:04,540
Вона має заголовки,

3
00:00:04,540 --> 00:00:07,581
абзац з описом кроликів,

4
00:00:07,581 --> 00:00:10,588
а також, багато абзаців

5
00:00:10,588 --> 00:00:13,416
зі словами моєї улюбленої 
пісні про кроликів.

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

7
00:00:17,857 --> 00:00:21,016
Але зараз, оскільки я маю декілька
абзаців зі словами,


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

9
00:00:24,613 --> 00:00:27,692
Як ми можемо це зробити, застосувавши
те, що ми вже знаємо?

10
00:00:28,221 --> 00:00:30,374
Спочатку ми вивчили,

11
00:00:30,374 --> 00:00:33,002
як вибрати всі теги певного типу,

12
00:00:33,002 --> 00:00:34,659
так як було у випадку з селектором 'р'.

13
00:00:34,886 --> 00:00:39,120
Але так ми зафарбували усі абзаци,
а не лише абзаци з піснею.

14
00:00:39,226 --> 00:00:41,290
Нам потрібно щось конкретніше.

15
00:00:41,507 --> 00:00:44,898
Потім ми вивчили, як вибрати теги
з певним 'id',

16
00:00:44,898 --> 00:00:48,140
так як було у випадку з вибором абзацу
з 'id' "пісня-кроликів".

17
00:00:48,368 --> 00:00:50,920
Але таким чином ми вибрали
лише перший абзац.

18
00:00:51,120 --> 00:00:53,725
Ми не можемо додати цей 'id' 
до інших абзаців,

19
00:00:53,725 --> 00:00:57,657
тому що нам не дозволено використовувати
однаковий 'id' для декількох тегів.

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

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

22
00:01:02,881 --> 00:01:05,717
наприклад, "слова-пісні2" і
"слова-пісні3",

23
00:01:05,717 --> 00:01:07,358
тому що кожний 'id' мусить 
бути унікальним.

24
00:01:07,358 --> 00:01:09,808
І потім ми б мали додати 
правила для кожного з них.

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

26
00:01:12,398 --> 00:01:14,691
І щоразу, як ми додаватимемо
новий куплет пісні,

27
00:01:14,691 --> 00:01:17,279
ми мусимо не забути додати
ще один 'id' до HTML коду

28
00:01:17,279 --> 00:01:19,018
і ще один 'id' до правил CSS.

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

30
00:01:22,980 --> 00:01:24,315
Але знаєте що?

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

32
00:01:27,599 --> 00:01:29,009
В основному клас — це

33
00:01:29,009 --> 00:01:32,067
спосіб об'єднати певні елементи
в групу.

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

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

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

37
00:01:44,705 --> 00:01:47,915
Потім я ставлю курсор 
на початок тега "р".

38
00:01:47,915 --> 00:01:51,675
Я додаю пробіл і пишу
class = "

39
00:01:53,183 --> 00:01:55,333
Тепер нам потрібно придумати
ім'я класу.

40
00:01:55,333 --> 00:01:56,792
Якесь змістовне.

41
00:01:56,927 --> 00:01:59,294
Назвімо його 
"слова-пісні".

42
00:01:59,658 --> 00:02:01,449
Я це написала тут.

43
00:02:01,665 --> 00:02:04,335
Які інші елементи має містити цей клас?

44
00:02:04,416 --> 00:02:06,420
Усі інші абзаци пісні.

45
00:02:06,510 --> 00:02:09,154
Тому ми просто підемо 
вниз по сторінці

46
00:02:09,154 --> 00:02:12,777
і додамо атрибут до кожного
абзацу класу.

47
00:02:13,061 --> 00:02:14,540
("слова-пісні").

48
00:02:14,836 --> 00:02:18,003
Чудово.
Тепер ми можемо додати правило CSS.

49
00:02:18,217 --> 00:02:20,539
Тому ми піднімаємось до тега 

50
00:02:20,539 --> 00:02:24,574
і видаляємо селектор 'id',
який ми вказали раніше,

51
00:02:24,574 --> 00:02:25,772
оскільки ми його хочемо замінити.

52
00:02:26,157 --> 00:02:28,594
І зараз ми маємо написати селектор класу.

53
00:02:28,931 --> 00:02:34,039
Щоб запустити селектор класу,
ми використаємо крапку.

54
00:02:34,426 --> 00:02:39,027
Потім напишемо ім'я класу: "слова-пісні",

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

56
00:02:46,633 --> 00:02:47,575
Та-дам!

57
00:02:47,821 --> 00:02:51,007
Вся пісня тепер має жовтий фон.

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

59
00:02:55,240 --> 00:02:56,398
Не працює.

60
00:02:56,491 --> 00:02:58,950
Тому що для імен класів
розмір літер має значення.


61
00:02:58,966 --> 00:03:01,771
Важливо, які літери є великі, 
а які маленькі,

62
00:03:01,771 --> 00:03:03,558
так само як і для 'id'.

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

64
00:03:08,542 --> 00:03:09,666
Не працює.

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

66
00:03:13,085 --> 00:03:16,411
і коли він не може знайти такого
'id', як "слова-пісні",

67
00:03:16,411 --> 00:03:17,584
він здається.

68
00:03:18,102 --> 00:03:24,512
Що станеться, якщо ми додамо пробіли 
до імені класу?

69
00:03:25,248 --> 00:03:27,477
Це також не працюватиме,


70
00:03:27,477 --> 00:03:29,997
тому що імена класів
не можуть містити пробілів.

71
00:03:30,192 --> 00:03:31,649
І як ми вивчимо пізніше,

72
00:03:31,649 --> 00:03:34,972
пробіли означають дещо дуже
особливе у мові CSS.

73
00:03:35,868 --> 00:03:38,776
Тому ми зробимо все, як було.

74
00:03:39,523 --> 00:03:41,110
Отже, повторимо ще раз:

75
00:03:41,110 --> 00:03:43,387
Коли ми хочемо додати клас,

76
00:03:43,387 --> 00:03:45,589
ми йому придумуємо ім'я,

77
00:03:45,589 --> 00:03:49,000
додаємо його до атрибута класу в HTML.

78
00:03:49,248 --> 00:03:51,317
Потім створюємо правило стилю,

79
00:03:51,317 --> 00:03:54,691
поставивши крапку
і написавши ім'я класу.

80
00:03:55,216 --> 00:03:58,394
Тепер ваш СSS може бути класним!

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