-
Погляньмо на нашу сторінку.
-
Вона має заголовки,
-
абзац з описом кроликів,
-
а також, багато абзаців
-
зі словами моєї улюбленої
пісні про кроликів.
-
Минулого разу ми оформили перший
абзац пісні, використавши 'id'.
-
Але зараз, оскільки я маю декілька
абзаців зі словами,
-
я хочу, щоб вони всі мали
фон жовтого кольору.
-
Як ми можемо це зробити, застосувавши
те, що ми вже знаємо?
-
Спочатку ми вивчили,
-
як вибрати всі теги певного типу,
-
так як було у випадку з селектором 'р'.
-
Але так ми зафарбували усі абзаци,
а не лише абзаци з піснею.
-
Нам потрібно щось конкретніше.
-
Потім ми вивчили, як вибрати теги
з певним 'id',
-
так як було у випадку з вибором абзацу
з 'id' "пісня-кроликів".
-
Але таким чином ми вибрали
лише перший абзац.
-
Ми не можемо додати цей 'id'
до інших абзаців,
-
тому що нам не дозволено використовувати
однаковий 'id' для декількох тегів.
-
Якщо б ми захотіли вибрати
інші абзаци,
-
ми б мали дати кожному з них
новий 'id',
-
наприклад, "слова-пісні2" і
"слова-пісні3",
-
тому що кожний 'id' мусить
бути унікальним.
-
І потім ми б мали додати
правила для кожного з них.
-
Ми можемо це зробити.
Але, оу, потрібно багато попрацювати.
-
І щоразу, як ми додаватимемо
новий куплет пісні,
-
ми мусимо не забути додати
ще один 'id' до HTML коду
-
і ще один 'id' до правил CSS.
-
І якщо ми додамо сотні куплетів,
це буде просто виснажливо!
-
Але знаєте що?
-
Існує кращий спосіб,
і він називається "класи" ("classes").
-
В основному клас — це
-
спосіб об'єднати певні елементи
в групу.
-
І ви можете об'єднати стільки
елементів, скільки захочете.
-
Щоб додати клас, ми маємо додати
атрибут 'class', так як це було у випадку з 'id'.
-
Спочатку я видалю цей ID,
оскільки я збираюсь його замінити.
-
Потім я ставлю курсор
на початок тега "р".
-
Я додаю пробіл і пишу
class = "
-
Тепер нам потрібно придумати
ім'я класу.
-
Якесь змістовне.
-
Назвімо його
"слова-пісні".
-
Я це написала тут.
-
Які інші елементи має містити цей клас?
-
Усі інші абзаци пісні.
-
Тому ми просто підемо
вниз по сторінці
-
і додамо атрибут до кожного
абзацу класу.
-
("слова-пісні").
-
Чудово.
Тепер ми можемо додати правило CSS.
-
Тому ми піднімаємось до тега
-
і видаляємо селектор 'id',
який ми вказали раніше,
-
оскільки ми його хочемо замінити.
-
І зараз ми маємо написати селектор класу.
-
Щоб запустити селектор класу,
ми використаємо крапку.
-
Потім напишемо ім'я класу: "слова-пісні",
-
і далі, як завжди, фігурні дужки,
властивість, двокрапка, значення.
-
Та-дам!
-
Вся пісня тепер має жовтий фон.
-
Що станеться, якщо ми збільшимо
літеру "s" тут?
-
Не працює.
-
Тому що для імен класів
розмір літер має значення.
-
Важливо, які літери є великі,
а які маленькі,
-
так само як і для 'id'.
-
Що буде, якщо ми використаємо
решітку замість крапки?
-
Не працює.
-
Тому що так браузер думає,
що "слова-пісні" — це 'id',
-
і коли він не може знайти такого
'id', як "слова-пісні",
-
він здається.
-
Що станеться, якщо ми додамо пробіли
до імені класу?
-
Це також не працюватиме,
-
тому що імена класів
не можуть містити пробілів.
-
І як ми вивчимо пізніше,
-
пробіли означають дещо дуже
особливе у мові CSS.
-
Тому ми зробимо все, як було.
-
Отже, повторимо ще раз:
-
Коли ми хочемо додати клас,
-
ми йому придумуємо ім'я,
-
додаємо його до атрибута класу в HTML.
-
Потім створюємо правило стилю,
-
поставивши крапку
і написавши ім'я класу.
-
Тепер ваш СSS може бути класним!
-
Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"
