Властивості CSS

Властивості колоьору та фону

Властивість стилю Опис властивості Значения
сolor Колір тексту color
background-color Колір фону елемента color,
transparent
background-image Фонове зображення URL / URI
background-position Початкове положення фонового зображення. size,
%,
left, top, center, right, bottom
background-attachment Вказує чи буде фонове зображення стаціонарним. scroll, fixed
background-repeat Тип заповнення елемента фоновим зображенням. repeat – 
no-repeat – не повторюється
repeat-x – повторюється по осі x
repeat-y – повторюється по осі  y
background Стенографічна властивість для задання всіх властивостей фону. background-color,
background-image,
background-position,
background-attachment,
background-repeat,
розділені пробілами в довільному порядку

Властивості шрифтів

Властивість стилю Опис властивості Значення
font-family Гарнітура шрифту Список імен шрифтів через кому в порядку зменшення значимості:
serif ,
sans-serif ,
cursive,
fantasy,
monospace
font-size Розмір шрифту size,
%,
xx-small,x-small, small, medium, large, x-large,
xx-large,
larger, smaller
font-style Написання шрифту normal, italic (курсив), oblique
(схилений)
font-weight Насиченість шрифту число від 100 до 900 (кратне 100),
normal, bold, bolder, lighter
font Стенографічна властивість для задання декількох властивостей шрифту розділені пробілами в наступному порядку:

font-style,
font-variant,
font-weight,
font-size,
line-height,
font-family

Властивості тексту

Властивість стилю Опис властивості Значення
text-indent Відступ першого рядка в блокові size,
% (відносно ширини блоку)
text-align Вирівнювання тексту left, right, center, justify
text-decoration Декорування тексту none (немає),
underline (підкреслений),
overline (надкреслений),
line-through (переклеслений),
blink (мигаючий)
text-shadow Ефект затінення тексту none,
color size1 size2 size3
color – колір тіні;
size1 – зміщення тіні по горизонталі;
size2 – зміщення тіні по вертикалі;
size3 – радіус розмиття тіні
line-height Міжрядковий інтервал normal,
number,
size,
% 

Властивості блоків

Властивість стилю Опис властивості Значення
width Ширина вмісту блоку auto,
size,
%  (відносно ширини контейнера)
height Висота вмісту блоку auto,
size,
%  (відносно ширини контейнера)
margin-top
margin-right
margin-bottom
margin-left		 Розмір зони полів навколо блоку (зверху, зправа, знизу, зліва) size,
%  (відносно ширини контейнера)
margin Стенографічна властивість для одночасного задання полів Список значень розділених пробілами
padding-top
padding-right
padding-bottom
padding-left		 Розмір зони відступів всередині блоку (зверху, зправа, знизу, зліва) size,
%  (відносно ширини контейнера)
padding Стенографічна властивість для одночасного задання відступів Список значень розділених пробілами
border-top-width
border-right-width
border-bottom-width
border-left-width		 Розмір зони границі блока (зверху, зправа, знизу, зліва) size,
thin, medium, thick
border-width Стенографічна властивість для одночасного задання розмірів зони границі блоку Список значень розділених пробілами
border-top-color
border-right-color
border-bottom-color
border-left-color		 Колір границі (зверху, зправа, знизу, зліва) transparent,
color
border-color Стенографічна властивість для одночасного задання кольору всіх границь Список значень розділених пробілами
border-top-style
border-right-style
border-bottom-style
border-left-style		 Стиль лінії границі (зверху, зправа, знизу, зліва). По замовчуванню границі не відображаються. none (немає),
dotted (пунктир),
dashed (штрих-пунктир),
solid (суцільна),
double (подвійна суцільна),
groove (втоплена),
ridge (випукла),
inset (втоплений блок),
outset (випуклий блок)
border-style Стенографічна властивість для одночасного задання стилю ліній всіх границь Список значень розділених пробілами
border-top
border-right
border-bottom
border-left		 Стенографічна властивість для одночасного задання ширини, стилю
і кольору границь (зверху, зправа, знизу, зліва).		 Список значень розділених пробілами
border Стенографічна властивість для одночасного задання ширини, стилю
і кольору границь		 Список значень розділених пробілами. Застосовується до всіх границь

Позиціонування

Властивість стилю Опис властивості Значення
position алгоритм позиціювання static – звичайний блок, задані властивості top и left
ігноруються;
relative – властивості top
і left зміщують блок відносно його нормального положення;
absolute – блок виймається з потоку даних і позиціонується у відповідності із властивостями, left, right, bottom;
fixed – блок позиціонується як і в значенні absolute, а потім фіксується відносно деякого об’єкта (наприклад,
області перегляду)
top Вертикальне зміщення блоку відносно верху контейнера auto,
size,
%  (відносно ширини контейнера)
right Горизонтальне зміщення блоку відносно правої границі контейнера auto,
size,
%  (відносно ширини контейнера)
bottom Вертикальне зміщення блоку відносно нижньої границі контейнера auto,
size,
%  (відносно ширини контейнера)
left Горизонтальне зміщення блоку відносно лівої границі контейнера auto,
size,
%  (відносно ширини контейнера)
float Задає зміщення блоку, внаслідок чого блок обтікається текстом контейнера none, left, right
clear Задає управління потоком після зміщеного блоку none, left, right, both
z-index Позиційний рівень блоку. Блок з більшим z-index розміщується над блоком з меншим z-index auto – властивість z-index надається в порядку написання елементів у вихідному коді,
number
display Тип структурованогу блоку, створеного HTML-елементом, якому задається дана властивість стилю. Наприклад, значення display:inline змушує елемент вбудовуватись в рядок даних; значення display:none виключає елемент із потоку даних і не показує його. inline, block, list-item, run-in,
compact, marker, table, inline-table, table-row-group, table-header-group,
table-footer-group, table-row, table-column-group, table-column,
table-cell, table-caption, none