CSS: основні властивості та їх використання

До загальних властивостей, які використовуються в CSS, належать:

Деякі властивості (наприклад, margin, padding, border) можуть впливати лише на певну сторону елемента. Якщо ми хочемо вказати значення для різних сторін, ми можемо використовувати назву властивості в комбінації з -top, -bottom, -left або -right (наприклад, padding-top). Також можна записати кілька значень у короткий ідентифікатор властивості (наприклад, padding: 5px 10px 15px 20px – встановлює зміщення зверху, праворуч, знизу та ліворуч, padding: 5px 10px – встановлює вертикальне зміщення 5 пікселів і горизонтальне 10 пікселів).

Що стосується розмірів елемента, стандартний зсув і відступ додаються до вказаного розміру (тому, наприклад, елемент із width: 100px; padding: 10px матиме ширину 120 px). Цій поведінці можна запобігти, встановивши * {box-sizing: border-box}.

На формат тексту впливають властивості:

У способі відображення елементів, наприклад, бере участь властивість display. Її часто використовувані значення:

Особливо flex і grid є корисними під час створення адаптивних веб-макетів.

Серед одиниць, що використовуються в CSS, є, наприклад, px (пікселі, як наслідок, розмір, визначений у пікселях, може залежати від масштабування пристрою), rem (1 rem = розмір шрифту в основному елементі), % (відсоток від батьківського елемента), vw (ширина відображення, наприклад, видима область у вікні браузера), vh (висота відображення). Одиниці пишуться після значення без пробілу.

За допомогою нотації @media частина припису може бути визначена лише для певного пристрою або методу відображення:

@media (max-width: 600px) {

  p {

    font-size: 10pt;

  }

}

Наведений вище код визначає, що абзаци (<p>) матимуть розмір шрифту 10 пунктів, якщо ширина екрана менше 600 пікселів.