Базовий синтаксис CSS

CSS (Cascading Style Sheets) – це мова стилів, яка використовується для опису вигляду та форматування веб-документів, написаних мовами розмітки, такими як HTML. За допомогою CSS ми можемо контролювати кольори, шрифти, вирівнювання тексту, розміри елементів та багато іншого. У цій статті ми розглянемо основні принципи та синтаксис CSS, які допоможуть вам створювати красиві та стильні веб-сторінки.

Основи CSS

CSS використовує правила, що складаються з селекторів та декларацій. Декларації, у свою чергу, містять властивості та їх значення. Розглянемо приклад базового CSS-коду:

h1 {
    color: blue;
    font-size: 24px;
}

У цьому прикладі h1 є селектором, що означає, що стиль буде застосований до всіх елементів <h1> на сторінці. Декларації містять властивості color (колір) та font-size (розмір шрифту) зі значеннями blue (синій) та 24px відповідно.

Типи селекторів

1. Селектори тегів (елементів): застосовуються до всіх елементів з певною назвою тегу.

   p {
       color: red;
   }
   

   Цей код зробить текст усіх абзаців (<p>) червоним.

2. Селектори класів: застосовуються до елементів з певним класом. Клас вказується за допомогою крапки (.) перед назвою.

   .highlight {
       background-color: yellow;
   }
   

   У цьому прикладі всі елементи з класом highlight матимуть жовтий фон.

3. Селектори ідентифікаторів: застосовуються до елементів з певним ідентифікатором. Ідентифікатор вказується за допомогою хеш-символу (#) перед назвою.

   #main-title {
       font-weight: bold;
   }
   

   Цей код зробить текст елемента з ідентифікатором main-title жирним.

Властивості та значення

CSS містить безліч властивостей, які можна застосовувати до елементів. Ось кілька основних:

• color: визначає колір тексту.

  color: green;
  

• background-color: встановлює колір фону елемента.

  background-color: lightgray;
  

• font-size: встановлює розмір шрифту.

  font-size: 16px;
  

• margin: встановлює відступи зовні елемента.

  margin: 20px;
  

• padding: встановлює відступи всередині елемента.

  padding: 10px;
  

Каскадність та специфічність

CSS означає “каскадні таблиці стилів”, що означає, що стилі можуть “каскадувати” від одного рівня до іншого. Коли кілька правил застосовуються до одного елемента, браузер повинен визначити, яке правило застосувати. Це робиться за допомогою каскадності та специфічності.

• Каскадність: порядок, у якому правила з’являються у CSS. Останнє правило, яке зустрічається, має вищий пріоритет.

• Специфічність: більш конкретні селектори мають вищий пріоритет. Наприклад, селектор ідентифікатора (#id) має вищий пріоритет, ніж селектор класу (.class), який, у свою чергу, має вищий пріоритет, ніж селектор тегу (tag).

Медіа-запити в CSS: Короткий огляд

Медіа-запити – це інструмент в CSS, що дозволяє застосовувати різні стилі до веб-сторінки залежно від характеристик пристрою, на якому вона переглядається. Завдяки цьому ми можемо створювати адаптивні сайти, які автоматично підлаштовуються під різні розміри екранів, орієнтації та інші параметри.

Навіщо використовувати медіа-запити? За допомогою медіа-запитів можна:

• Створювати різні макети для різних розмірів екранів (від великих десктопів до маленьких мобільних телефонів).
• Оптимізувати зображення для різних пристроїв.
• Приховувати або показувати елементи інтерфейсу в залежності від розміру екрана.
• І багато іншого.

Як працюють медіа-запити? Медіа-запити використовують директиву @media для визначення умов, за яких певні стилі будуть застосовані. Наприклад, можна створити правило, яке застосовується тільки до екранів шириною менше 768 пікселів.

Приклад медіа-запиту:

@media (max-width: 768px) {
  /* Стилі для екранів шириною менше 768 пікселів */
  body {
    font-size: 14px;
  }
  .container {
    width: 100%;
  }
}