Використання декількох класів CSS

Досі нам вдавалось зробити дуже багато
завдяки селекторами, які ми бачили в CSS:

вибір за назвою тега, за ID
і за іменем класу.

Пригадаймо собі всен це швиденько
на цій сторінці.

на цій сторінці — все про пончики.

Ця сторінка має заголовок, абзаци,

кілька з яких є короткими
однорядковими фактами.

CSS починається з правила,
що обирає всі теги на сторінці

і надає їм шрифт "sans-serif".

Я зміню його на "monospace" (шрифт
з фіксованою шириною),

щоб ви могли побачити, де діє
цей селектор.

Бачите?

Наступне правило обирає усі елементи
з ID "donut-header" (пончики-заголовок).

І ми знаємо, що це ID, оскільки
він починається з решітки.

Оскільки цей ID доволі змістовний,

мені здається, що він обирає
великий заголовок зверху

і змінює його шрифт.

Але я просто прокручу сторінку вниз
і переконаюсь, що тег має ID.

Так, він його має.

Останнє правило обирає усі елементи,
які мають клас "fact" (факт).

Ми знаємо, що це ім'я класу,
оскільки селектор починається з крапки.

Щоб визначити, які елементи
належать до цього класу,

я можу або подивитись,
що робить це правило —

додає верхню та нижню межі
і певні відступи,

або я можу проглянути код HTML
і знайти там ім'я класу.

Я бачу ім'я класу в цьому абзаці

і в цьому абзаці —

два абзаци, що містять
однорядкові факти,

і ось чому вони мають межі.

Використання класів є зручним,

оскільки вони дозволяють нам
надати однакові стилі багатьом елементам.

Але ми можемо зробити значно більше
за допомогою класів,

і зараз я вам це покажу.

Ми маємо сторінку про пончики,

але пончики є не дуже
здоровою їжею.

Вони, можливо, навіть є
найменш корисною їжею.

І вони викликають своєрідну залежність,
через цукор, що містять в собі.

Тому якщо ми збираємось зробити
сторінку про них,

ми, мабуть, маємо попередити людей
про їхню шкідливість.

Як щодо того, щоб зафарбувати
цей верхній факт червоним,

щоб чітко визначити, що це попередження?

Як нам це зробити?

Ми можемо додати властивість"color"
до правила CSS "fact"

і побачити, що з цього вийде.

Але це зробило обидва факти червоними,
а другий факт не є попередженням,

це всього лиш речення про вимову
слова "пончик".

Томи ми не хочемо, щоб воно було червоним.

Ми можемо додати ID,

але якщо ми потім захочемо зафарбувати
інші попередження

і додати нові,

нам доведеться додавати все більше ID
і правил для них.

В таких випадках, як цей, найкращим
варіантом є додати ще один клас до тега .

Насправді браузери нам дозволяють
додавати стільки класів до одного тега,

скільки ми захочемо.

Щоб це зробити, ми ставимо курсор
після останнього імені класу,

ставимо пробіл і потім пишемо нове
ім'я класу, наприклад "warning" (попередження).

Тепер ми можемо створити
правило для "warning"

і перемістити цю властивість "color"
до цього правила.

І тепер верхній факт — червоний,
а наступний — ні.

Чудово!

Ми можемо додавати назви класів
декільком елементам, як і раніше.

Можливо, ми хочемо зафарбувати текст,
виділений жирним шрифтом,

"deep fried" (в фритюрі)...

Ми хочемо його зафарбувати в червоний,
тому що їжа в фритюрі

часто асоціюється з нездоровою їжею.

Тому ми можемо просто додати
class="warning" —

і тепер він теж червоний.

Зауважте, що це попередження
має червоний колір,

але воно досі має верхню та нижню межі.

І це те, що відбувається, коли ми
використовуємо декілька класів —

браузер дивитиметься, які правила до
них застосовуються,

і застосовуватиме усі відповідні стилі.

Нам слід бути обережними, використовуючи
кольори, які мають особливе значення,

оскільки є люди,
що не розрізняють кольорів.

Існують люди, які ледве
можуть розрізнити

червоний та чорний кольори —
і, можливо, ви один із них.

Тому змінімо цей клас так, щоб він був
виразнішим для усіх.

Ми змінимо колір на колір фону,

тому що всі можуть помітити, якщо щось
має колір фону.

Червоний та чорний кольори
є недостатньо контрастними.

А контраст є також важливим, для того
щоб наші сторінки було легко читати усім.

Тому ми зробимо колір білим.

Добре, тепер ми маємо висококонтрастні
кольори,

і зокрема червоний колір для тих, хто
може його бачити.

І оскільки ми використали клас, обидва
наші попередження мають однаковий стиль.

І тепер, дякуючи гнучкості класів CSS,

ми можемо вберегти весь світ
від пончиків.

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