Позиціонування елементів, розташування на сторінці

Зовнішній та внутрішній відступи

Властивість	Опис
Margin: auto/Величина	Задає зовнішні відступи для елементів.
Margin-bottom, margin-left, margin-right, margin-top	Задає нижній / лівий / правий / верхній зовнішній відступ для елемента.
Значення: auto - елемент буде центрирован по горизонталі. Величина —Вказує розмір поля в (px). Може містити від одного до чотирьох значень, розділених пробілами.
Приклад: margin:10px 5px 15px 20px; margin:10px 5px 15px; margin:10px 5px; margin:10px;	- одне, два, три або значення для усіх сторін
Padding: [значення]	Встановлює внутрішні відступи в елементі.
Padding-bottom, padding-left, padding-right, padding-top	Задає нижній / лівий / правий / верхній відступ (внутрішнє поле) для елемента.
Приклад: padding:10px 5px 15px 20px; padding:10px 5px 15px; padding:10px 5px; padding:10px;	- одне, два, три або значення для усіх сторін

Фон (тло)

Властивість	Опис
background	Встановлює декілька або всі значення властивостей фону
Background-color: color / transparent	Встановлює колір фону для елемента. Transparent —прозорий фон
Background-image: url('шлях до файлу')	Встановлює фонове зображення в елементі.
background-repeat	Задає, як фонове зображення буде повторюватися на екрані.
No-repeat - без повторень; Repeat - повторюється по горизонталі і вертикалі; Repeat-x- повторюється тільки по горизонталі. Repeat-y - повторюється тільки по вертикалі.

Рамка и контур

Властивість	Опис
Borderborder-width border-style border-color	Дозволяє використовувати основні властивості границь в одній властивості.
border-style -Вказує стиль для рамки, який визначається одним із ключових слів: solid, dotted, dashed, double, groove, ridge, inset, outset, hidden і none. Значення hidden і none є взаємозамінними, вони вказують, що рамка відсутня. border-width - Вказує ширину для рамки Border-color - Задає колір для рамки
Border-radius: значення (px)	Дозволяє змінити форму кутів області на сторінці.

Розмір будь-якого елементу, блоку

Властивість	Опис
Height: значення / % / auto	Встановлює фіксовану висоту.
Width: значення / % / auto	Встановлює фіксовану ширину.

Позиціонування елементів, розташування на сторінці

Властивість	Опис
Bottom: auto/величина	Вказує напрямок зсуву від нижнього краю.
Top: auto / величина	Вказує напрямок зсуву від верхнього краю.
Left: auto / величина	Вказує напрямок зсуву від лівого краю.
right: auto / величина	Вказує напрямок зсуву від правого краю.
auto - Елемент залишається на своєму місці. Величина - Визначає величину зміщення (px).
Clear: none / left / right / both	Вказує з якого боку елемента не допускаються плаваючі елементи.
Left - Плаваючі елементи не дозволені з лівого боку. Right - Плаваючі елементи не дозволені з правого боку. Both - Плаваючі елементи не дозволені з обох сторін. None - наявність плаваючих елементів з обох сторін.
display: [значення];	Вказує, як буде відображатися елемент в браузері.
none - Елемент не відображається на екрані і під нього не резервується місце на сторінці. Bloc - Елемент сприймається браузером як блоковий, тобто має розрив рядка до і після елемента і займає всю доступну ширину, застосовуються властивості для блокових елементів.
Float: none / left / right	Визначає чи буде елемент плаваючим (обтікання елементів)
left - Елемент плаває зліва. Right - Елемент плаває зправа. None - Елемент не являється плаваючим і буде відображатися там, де він розташований.
position: static / absolute / fixed / relative	Визначає метод позиціонування елементів.
Static: - Елемент статичний, не змінює положення. Інші елементи не перекривають його. Absolute: - Інші елементи на веб-сторінці можуть перекривати поточний елемент. Fixed: - Елемент з фіксованим позиціонуванням при прокрутці вмісту у вікні браузера, залишається на місці, тобто НЕ прокручується з рештою вмісту. Relative: - Додавання властивостей left,top, right і bottom змінює позицію елемента і зрушує його в ту або іншу сторону від первісного розташування.
Visibility: visible / hidden / collapse	Визначає, чи є елемент видимим, дозволяє приховувати елементи, але при цьому залишати порожній простір на його місці, рівне розміру прихованого елемента.
visible - Вказує, що елемент буде відображено на сторінці. Hidden - Вказує, що елемент буде приховано. Collapse - Використовується тільки з елементами таблиці. Приховує рядок або стовпець, при цьому не змінюючи загальний вигляд таблиці. Порожній простір стає доступним для іншого вмісту.
Overflow: auto / hidden / scroll / visible	управляє відображенням змісту блокового елемента, якщо воно цілком не поміщається і виходить за область заданих розмірів.
Visible -Відображається весь вміст елемента, навіть за межами встановленої висоти і ширини. Hidden -Відображається тільки область всередині елемента, інше буде приховано. Scroll -Завжди додаються смуги прокручування. Auto -Смуги прокручування додаються тільки при необхідності
box-sizing: content-box / border-box / padding-box	Застосовується для зміни алгоритму розрахунку ширини і висоти елемента. ширина блоку складається з ширини контенту (width), значень відступів (margin), полів (padding) і меж (border). Аналогічно і висота блоку. Властивість box-sizing дозволяє змінити цей алгоритм, щоб властивості width і height задавали розміри не контенту, а розміри блоку.
Content-box -при цій властивості width і height задають ширину і висоту контенту і не включають в себе значення відступів (margin), полів і границь(border). Border-box - при цій властивості width і height включають в себе значення полів і меж, але не відступів (margin). Padding-box - при цій властивості width і heightвключають в себе значення полів, але не відступів (margin) і границь (border).

Тіні і прозорість

Властивість	Опис
box-shadow: x y радіус розмиття колір box-shadow: 0 0 10px yellow;	Додає ефект відкидання тіні до елементу.
opacity: <число від 0 до 1>; opacity: 0.5; /* Напівпрозорий елемент */	Встановлює рівень прозорості елементу.
Text-shadow: x y “радіус розмиття” колір; text-shadow: 1px 1px 2px black;	Створює тінь до тексту.

Списки

Властивість	Опис
list-style	Управляє маркером в списках.
list-style-image: url('шлях до файла-картинки')	Замінює маркери списків на зображення.
list-style-type	Вказує вид маркера в списку: circle / disc / square; або вид номера: decimal (1,2,3...)/ decimal-leading-zero(01,02,03... / lower-alpha (a, b, c, d,...)/ lower-greek (α, β, γ, δ,...)/ lower-roman (i, ii, iii, iv, v,...). / upper-alpha (A, B, C, D,...)./ upper-roman (I, II, III, IV, V,...)./ none (без номера)

Текст і шрифт

Властивість	Опис
Color: <значення коліру>	Змінює колір тексту.
Direction: ltr / rtl	Визначає напрямок написання тексту. Ltr - напрямок зліва направо. Rtl — напрямок справа наліво
letter-spacing: <розмір> / normal	Контролює відстань між символами в тексті.
Line-height: <розмір> / % / normal	Визначає міжрядковий інтервал (інтерліньяж).
Text-align: center / justify / left / right	Вказує спосіб вирівнювання вмісту по горизонталі.
Text-decoration: line-through / overline / underline	Додає деякі елементи декорування до тексту. Line-through— перекреслений текст. Overline — лінія над текстом. Underline — підкреслений текст.
Text-indent: <розмір> / <проценти>	Визначає відступ першого рядка в тексті елемента.
text-transform: capitalize / lowercase / uppercase / none	Контролює використання малих і великих літер в тексті. Capitalize — Перший символ кожного слова в реченні буде Заголовковим. Lowercase - Всі символи тексту стають рядковими (нижній регістр). Uppercase - Всі символи тексту стають прописними (верхній регістр). None - Не змінюється регістр символів.
Word-spacing: <розмір> / normal	Визначає ширину пробілів між словами.
Word-wrap: normal / break-word	Дозволяє переривати довгі слова для переносу на інший рядок. Normal - рядки не переносяться або переносятья в тих місцях, де явно задано перенос (за допомоги <br>). Break-word - Перенос рядків додається автоматично, щоб слово вмістилось в задану ширину блоку.
Font-family: <шрифт>	Вказує шрифт або сімейство шрифтів для тексту. serif — шрифти із зарубками, типу Times New Roman; · sans-serif — рублені шрифти без зарубок, типу Arial; · cursive — курсивні шрифти; · fantasy — декоративні шрифти; · monospace — моноширинні шрифти, типу Courier.
Font-size: розмір (pt)	Вказує розмір для шрифту.
font-weight: bold / bolder / lighter / normal / 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900	Задає ширину символів тексту. bold - напівжирне накреслення, normal - нормальне накреслення. допустимо використовувати умовні одиниці від 100 до 900. Значення bolder і lighter змінюють жирність щодо насиченості попереднього шрифту, відповідно, у більшу і меншу сторону.

Використання псевдокласів: