-
Досі нам вдавалось зробити дуже багато
завдяки селекторами, які ми бачили в 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"
