До загальних властивостей, які використовуються в CSS, належать:
background-color |
колір фону |
background |
фон; можна визначити разом, наприклад, колір і зображення за допомогою url(…) |
margin |
зовнішній відступ (поле) |
border |
рамка |
padding |
внутрішній відступ (поле) |
width |
ширина |
height |
висота |
Деякі властивості (наприклад, 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}.
На формат тексту впливають властивості:
color |
колір тексту |
green |
text-align |
вирівнювання |
center |
font-size |
розмір тексту |
12pt |
font-weight |
товщина зрізу |
bold |
font-style |
перемикає, наприклад, між звичайним шрифтом і курсивом |
italic |
font-family |
налаштування шрифту (сімейство шрифтів) |
sans-serif |
У способі відображення елементів, наприклад, бере участь властивість display. Її часто використовувані значення:
block |
відображається як блок, він може мати певні розміри |
inline |
відображається в рамках рядку |
inline-block |
відображається в рамках рядку, який може мати певні розміри |
flex |
розташовує елементи поруч один над одним із багатьма параметрами налаштування |
grid |
впорядковує елементи в сітку з багатьма параметрами налаштування |
Особливо flex і grid є корисними під час створення адаптивних веб-макетів.
Серед одиниць, що використовуються в CSS, є, наприклад, px (пікселі, як наслідок, розмір, визначений у пікселях, може залежати від масштабування пристрою), rem (1 rem = розмір шрифту в основному елементі), % (відсоток від батьківського елемента), vw (ширина відображення, наприклад, видима область у вікні браузера), vh (висота відображення). Одиниці пишуться після значення без пробілу.
За допомогою нотації @media частина припису може бути визначена лише для певного пристрою або методу відображення:
@media (max-width: 600px) {
p {
font-size: 10pt;
}
}
Наведений вище код визначає, що абзаци (<p>) матимуть розмір шрифту 10 пунктів, якщо ширина екрана менше 600 пікселів.