Погляньмо на нашу сторінку.
Вона має заголовки,
абзац з описом кроликів,
а також, багато абзаців
зі словами моєї улюбленої
пісні про кроликів.
Минулого разу ми оформили перший
абзац пісні, використавши '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"