Я підготував коротенький урок про базову структуру CSS. Познайомлю новачків із фундаментальними поняттями, покажу як правильно глобально перевизначати каскадні таблиці стилів (CSS). Знання класів, селекторів та ідентифікаторів дадуть будь-якому фронтендщику або вебмайстру неабияку фору та гнучкість у редагуванні і покращенні верстки сайтів.
Що таке взагалі селектори, класи та ідентифікатори в CSS?
1.Селектори — це елементи, до яких прив’язуються стилі верстки. Існують різні типи селекторів: селектори класів, тегів, ідентифікаторів, груп. Синтаксис селектора, зазвичай, виглядає так: спочатку вказується HTML-елемент, далі у фігурних дужках перелічуються стилі зі значеннями.
2. Класи (class) — це атрибути HTML-тегів. Для кожного класу потім можна прописати окремі CSS-стилі. Класи доволі гнучкі. Їх можно присвоїти різним тегам, причому декілька одночасно. До прикладу, один і той самий клас можна призначити і для шапки, і для підвалу, і для сайдбару. Класи не є одиночними, не є закріпленими за конкретновизначеними стилями, вони створені з метою стилізувати різні групи. Присвоївши клас для якого-небудь тегу, його потім можна застосувати як селектор.
3. Ідентифікатори (ID) — це по-суті ті ж самі класи, але вони обов’язково мають бути унікальними, не можуть повторюватися, й за рахунок цього стоять вище класів, тобто мають більший пріоритет при застосовуванні. Ідентифікатори задаються аналогічно — у вигляді атрибута тегу і прописуються як селектори ідентифікатора. Синтаксис складається з решітки та назви, далі у фігурних дужках прописуються стилі зі значеннями.
Застосування CSS-ідентифікаторів на практиці
Що ж, ми вже розглянули елементарну структуру і синтаксис CSS, знаємо як визначаються стилі. Давайте тепер розглянемо які задачі бувають на практиці і як знання CSS нам реально допоможуть.
Одна із задач, яка наштовхнула мене на вивчення CSS — потрібно було змінити вирівнювання тексту (text-align) в певному блоці. Але цей стиль вже був прописаний у коді самої сторінки (так звані вбудовані inline-стилі з допомогою тега style). Я спробував стандартно прописати стилі в окремому css файлі, але нічого не змінилося, адже inline CSS мають більший пріоритет і “перекривали” задані мною стилі.
На допомогу у цій ситуації приходять якраз ідентифікатори (ID), котрі можна підчепити до будь-якого окремого тегу чи елементу, а потім просто прописати у вигляді селектора та перевизначити (переприсвоїти) стилі.
Але часто навіть це не допомагає, особливо якщо у вас взагалі немає доступу до вихідного коду сторінки, або ви не знаєте де він лежить. Таким чином достатньо просто прописати нові стилі, але із маленькими хитрощами — застосувати декларацію !important. Це автоматично визначить найвищу пріоритетність для прописаного вами стилю:
Ось так, селектори, класи та ідентифікатори CSS роблять розробників гнучкими й допомагають їм знаходити прості рішення в різних ситуаціях при роботі з версткою.
Корисні посилання:
- Learn to Code HTML & CSS: Develop & Style Websites — якісний англомовний онлайн-підручник, який дозволяє зробити перші кроки у front-end’і
- Стаття на DEV.TO: CSS from Zero to Hero — ази і початки в CSS
Автор: © Konrad Ravenstone, KR. Laboratories Research
