До загальних властивостей, які використовуються в 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 пікселів.