В даній таблиці наведені найбіль вживані значення CSS.

Колір і фон (тло)

background - параметр дозволяє встановити одночасно до п'яти атрибутів стилю фона (далі тла). Значення можуть іти в будь-якому порядку, браузер сам визначить, яке з них відповідає потрібного атрибуту. Простішими словами задає колір для нашого сайту.

background-attachment - параметр background-attachment встановлює, чи буде прокручуватися фонове зображення разом із вмістом сайта. Зображення може бути зафіксовано і залишатися нерухомим, або переміщатися разом з документом.

background-color - встановлює колір тла для сайту.

background-image - встановлює зображення для тла (фона сайту).

Наведу приклад:

BODY {
   background-image: url(images/bg.jpg); /*вказуємо шлях до нашого зображення*/
   background-color: #c7b29a; /*колір тла*/
  }

background-position - встановлює початкове положення фонового зображення, встановленого за допомогою параметра background-image.

background-repeat - визначає, як буде повторюватися фонове зображення, встановлене за допомогою параметра background-ima, і по якій осі. Можна встановити повторення малюнка тільки по горизонталі, по вертикалі або в обидві сторони.

color - задає коріл тексту.

opacity - визначає рівень прозорості для елемента.  opacity 0.5; 0.1; це вже як потрібно налаштувати підбираєм під свій смак.

Межі

border - параметр одночасно позволяє встановити властивості для товщину, стиль і корір рамки навколо елемента.

border-bottom - параметр одночасно позволяє встановити властивості для товщину, стиль і корір рамки навколо елемента.

border-botoom-color - встановлює колір внизу алемента.

border-bottom-syle - встановлює стиль нижньої границі елемента.

border-bottom-width - встановлює товщину нижньої границі елемента.

border-color - задає колір на всіх границях елемента. Також можна задати тільки на окремих частинах.

border-left - параметр дозволяє одночасно встановити товщину, стиль і колір лівої межі елементу. Значення можуть іти в будь-якому порядку, розділяючись пробілом, браузер сам визначить, яке з них відповідає потрібному атрибуту.

border-left-syle - встановлює стиль межі ліворуч від елемента.

border-left-color - встанолює колір границі зліва від елемента.

border-left-width - задає товчигну межі зліва від елемента.

border-top, border-top-color, border-top-style, border-top-width, border-right, border-right-color, border-right-style, border-right-width - вони аналогічні з border-left i border-bottom. left - з ліва, right - з права, top - з верху, bottom - знизу.

border-style - встановлює стиль рамки навколо елемента.

outline - універсальний атрибут, одночасно встановлює колір, стиль і товщину зовнішнього кордону на всіх четрирьох сторонах елементу. На відміну від лінії, яка задається через border, атрибут outline не впливає на положення блоку і його ширину. Також може використовуватись із outline-color, outline-style, outline-width.

Шрифт

font - шрифт. Універсальний параметр, який дозволяє встановити одночасно декілька атрибутів стилю шрифта.

font-family - сама назва говорить за себе, Сімейство шрифтів. Встановлює шрифт, який буде опреділятись для відобреження тексту.

font-size - встановлює розмір шрифта, який буде відображатись на сайті.

font-style - визначає написання шрифту - звичайне, курсивне або похиле. Коли для тексту встановлено курсивне або похиле накреслення, браузер звертається до системи для пошуку відповідного шрифту. Якщо заданий шрифт не знайдений, браузер використовує спеціальний алгоритм для імітації потрібного виду тексту.

font-variant - визначає, як потрібно представляти літери в рядку? Робити їх все прописними зменшеного розміру або залишити без змін. Такий спосіб зміни символів називається капітеллю.

font-weight - встановлює насиченість шрифту. Значення встановлюється від 100 до 900 з кроком 100. Також допустимо використання ключових слів.

Текст

derection - атрибути unicode-bidi і direction задають, як повинен розташовуватися текст використовуваної мови - зліва направо чи справа наліво

letter-spacing - визначає інтервал між символами в межах елементу. Браузери зазвичай встановлюють відстань між символами, виходячи з типу і виду шрифту, його розмірів і настройок операційної системи. Щоб змінити це значення і застосовується цей атрибут.

line-height - встановлює інтерліньяж (міжрядковий інтервал) тексту, відлік ведеться від базової лінії шрифту. За звичайних обставин відстань між рядками залежить від виду та розміру шрифту і визначається браузером автоматично.

text-align- визначає горизонтальне вирівнювання тексту в межах елементу.

text-decoration - додає оформлення тексту у вигляді його підкреслення, перекреслення, лінії над текстом і миготіння. Одночасно можна застосувати більш одного стилю, перераховуючи значення через пробіл.

text-indent - встановлює величину відступу першого рядка блоку тексту (наприклад, для параграфа P). Впливу на всі інші рядки не виявляється.

text-transform - управляє перетворенням тексту елемента в заголовні або прописні символи. Коли значення відмінне від none, регістр вихідного тексту буде змінено.

unicode-bidi - атрибути unicode-bidi і direction задають, як повинен розташовуватися текст використовуваної мови - зліва направо чи справа наліво.

vertical-align - вирівнює елемент по вертикалі щодо свого батька або навколишнього тексту.

white-space -параметр white-space встановлює, як відображати пропуски (пробіли) між словами.

word-spacing - встановлює інтервал між словами. Якщо встановлено параметр вирівнювання justify, то атрибут word-spacing не діє, оскільки інтервал між словами буде встановлений примусово.

Списки

list-style - атрибут, що дозволяє одночасно задати стиль маркера, його положення, а також зображення, яке буде використовуватися в якості маркера.

list-style-image - встановлює адресу зображення, яке служить в якості маркера списку. Цей атрибут успадковується, тому для окремих елементів списку для відновлення маркера використовується значення none.

list-style-position - визначає, як буде розміщуватися маркер щодо тексту. Є два значення: outside - маркер винесений за кордон елемента списку і inside - маркер обтікає текстом.

list-style-type - змінює вигляд маркера для кожного елемента списку. Цей атрибут використовується тільки у випадку, коли значення властивості list-style-image встановлено як none. Маркери розрізняються для маркованого списку (тег UL) і нумерованого (тег OL).

Форматування

clear - параметр встановлює, з якого боку елемента заборонено його обтікання іншими елементами. Якщо встановлено обтікання елементу за допомогою параметра float, властивість clear скасовує її дію для зазначених сторін.

clip - параметр clip визначає область позіційованого елемента, в якій буде показано його вміст. Все, що не поміщається в цю область, буде обрізане і стає невидимим. На даний момент єдино доступна форма області - прямокутник.

display - багатоцільовий атрибут, який визначає, як елемент повинен бути показаний в документі.

float - визначає, по якій стороні буде вирівнюватися елемент, при цьому інші елементи будуть обтікати його з інших сторін.

height - встановлює висоту блокових або замінних елементів (до них, наприклад, відноситься тег IMG. Висота не включає товщину кордонів навколо елемента, значення відступів і полів.

max-height - встановлює максимальну висоту елемента. Значення висоти елемента буде обчислюватися в залежності від установлених параметрів height, max-height і min-height.

max-width - встановлює максимальну ширину елемента.

min-height - визначає мінімальну висоту елемента. Значення висоти елемента буде обчислюватися в залежності від установлених параметрів height, max-height і min-height.

min-width - визначає мінімальну ширину елемента. Якщо вікно браузера досягає заданої мінімальної ширини елементу, то його ширина залишається незмінною і з'являється горизонтальна смуга прокручування.

overflow - властивість overflow управляє відображенням змісту блокового елементу, якщо воно цілком не поміщається і виходить за область заданих розмірів.

visibility - призначений для відображення або приховування елементу, включаючи рамку навколо нього і фон. При приховуванні елементу, хоча він і стає не видимим, місце, яке займає елемент, залишається за ним.

width - встановлює ширину блокових або замінних елементів. Ширина не включає товщину кордонів навколо елемента, значення відступів і полів.

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

bottom - встановлює положення нижнього краю вмісту елемента без урахування товщини рамок і відступів. Відлік координат залежить від параметра position, він зазвичай приймає значення relative (відносне положення) або absolute (абсолютне положення).

left - для позіційованої елемента визначає відстань від лівого краю батьківського елементу, не включаючи відступ, поле і ширину рамки, до лівого краю дочірнього елемента. Відлік координат залежить від значення параметра position.

position - встановлює спосіб позиціонування елемента щодо вікна браузера або інших об'єктів на веб-сторінці.

right - для позіційованої елемента визначає відстань від правого краю батьківського елементу, не включаючи відступ, поле і ширину рамки, до правого краю дочірнього елемента.

top - для позіційованої елемента визначає відстань від верхнього краю батьківського елементу, не включаючи відступ, поле і ширину рамки, до верхнього краю дочірнього елемента.

z-index - управляє розміщенням елементів по z-осі, що дозволяє накладати елементи один на одного.

Відступи

margin - встановлює величину відступу від кожного краю елемента. Відступом є простір від кордону поточного елемента до внутрішнього кордону його батьківського елементу.

margin-bottom - встановлює величину відступу від нижнього краю елемента.

margin-left - встановлює величину відступу від лівого краю елемента.

margin-right - визначає величину відступу від правого краю елемента.

margin-top - встановлює величину відступу від верхнього краю елемента.

Поля

padding - встановлює значення полів навколо вмісту елементу. Полем називається відстань від внутрішнього краю рамки елемента до уявного прямокутника, що обмежує його вміст.

padding-bottom - встановлює значення поля від нижнього краю вмісту елементу.

padding-left - встановлює значення поля від лівого краю вмісту елементу.

padding-right - визначає значення поля від правого краю вмісту елементу.

padding-top - визначає величину поля від верхнього краю вмісту елементу.

Таблиці

border-collapse - встановлює, як відображати межі навколо клітинок таблиці. Цей параметр відіграє роль, коли для осередків встановлена рамка, тоді в місці стику осередків вийде лінія подвійної товщини. Додавання значення collapse змушує браузер аналізувати подібні місця в таблиці і прибирати в ній подвійні лінії.

border-spacing - визначає відстань між кордонами осередків в таблиці. Атрибут border-spacing не працює у випадку, коли для таблиці встановлено параметр border-collapse із значенням collapse.

caption-side - визначає положення заголовка таблиці, який задається за допомогою тега CAPTION, щодо самої таблиці. Параметр caption-side виводить заголовок до або після таблиці, а вирівнювання тексту по правому чи лівому краю встановлюється через атрибут text-align.

empty-cells - параметр задає відображення кордонів і фону в комірці, якщо в ній немає видимого змісту. При одночасному додаванні до таблиці параметра border-collapse із значенням collapse, атрибут empty-cells ігнорується.

table-layout - визначає, як браузери мають обчислювати висоту і ширину осередків таблиці, грунтуючись на її вміст.

Інтерфейс

cursor - встановлює форму курсора, коли він знаходиться в межах елементу. Вигляд курсору залежить від операційної системи і встановлених параметрів.

Важливість

! important - грає роль у тому випадку, коли користувачі підключають свою власну таблицю стилів. Якщо виникає суперечність, коли стиль автора сторінки і користувача для одного і того ж елемента не збігається, то! Important дозволяє підвищити пріоритет стильового параметра.

Псевдоелементи

after - псевдоелемент, який використовується для виведення бажаного контенту після елемента, до якого він додається. Псевдоелемент after працює спільно з атрибутом content.

before - псевдоелемент before застосовується для відображення бажаного контенту до елемента, до якого він додається. before працює спільно з атрибутом content.

first-letter - псевдоелемент first-letter визначає стиль першого символу в тексті елемента, до якого додається. До цього псевдоелементу можуть застосовуватися тільки стильові атрибути, пов'язані з властивостями шрифту, полями, відступами, кордонами, кольором і тлом (фоном).

Псевдокласси

active - псевдокласс active визначає стиль для активного посилання. Активної посилання стає при натисканні на неї.

first-child - псевдокласс first-child додає стильове оформлення до першого дочірньому елементу селектора, який розташований у лісі елементів документа.

focus - псевдокласс focus визначає стиль для елемента отримує фокус. Наприклад, їм може бути текстове поле форми, в яке встановлюється курсор.

hover - визначає стиль елемента при наведенні на нього курсору миші.

link - псевдокласс link застосовується до посилань, які ще не відвідував користувач, і задає для них стильове оформлення.

visited - псевдокласс visited застосовується до посилань, вже відвідані користувачем, і задає для них стильове оформлення.

Контент

content - атрибут content дозволяє вставляти генерується утримання в текст веб-сторінки, що спочатку в тексті відсутній.

counter-increment - призначений для збільшення значення лічильника збільшень, який задається параметром counter-reset. Такий лічильник підраховує кількість відображень елементів на сторінці та може виводитися за допомогою властивості content і псевдоелементов after і before. Це дозволяє створювати списки (у тому числі багаторівневі), в яких нумерація і вид задаються через стилі.

counter-reset - встановлює ідентифікатор, в якому буде зберігатися лічильник відображень певного елемента, а також початкове значення лічильника. Такий лічильник може виводитися за допомогою властивості content і псевдоелементов after і before.

quotes - встановлює вид лапок, який застосовується в тексті документа.

 

Успіхів вам у роботі з вашим сайтом. Сподіваюсь вам це стало у нагоді