Довідник по CSS

Властивості

  • font-family

    font-family

    Встановлює сімейство шрифту, яке використовуватиметься для оформлення тексту змісту. Список шрифтів може містити одну або кілька назв, розділених комою. Якщо в імені шрифту містяться пробіли, наприклад Trebuchet MS, воно має братися в одинарні або подвійні лапки.

  • animation

    animation

  • float

    float

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

  • empty-cells

    empty-cells

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

  • filter

    filter

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

  • flex

    flex

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

  • flex-basis

    flex-basis

    Властивість flex-basis визначає основу флексу, яка є початковим розміром елемента. Схоже на властивості width та height, до яких додається вміст елемента.

  • flex-direction

    flex-direction

    Властивість flex-direction задає напрямок основних вісей у контейнері, чим і визначає положення флексів у контейнері. На напрямок також впливає значення атрибута dir у контейнері.

  • flex-flow

    flex-flow

    Є скороченою властивістю окремих властивостей flex-direction та flex-wrap.

  • flex-grow

    flex-grow

    Визначає, скільки простору може займати флекс усередині контейнера. За значення беруться числа, вони задають пропорції кожного флексу. Наприклад, якщо для всіх елементів встановлено значення 1, всі вони вийдуть однакового розміру. Якщо якийсь елемент отримав значення 2, його розмір буде вдвічі більшим від інших.

  • flex-shrink

    flex-shrink

    Встановлює коефіцієнт стиснення флексів у контейнері та задає, наскільки елемент зменшуватиметься відносно інших флексів, щоб розмістити всі елементи в один рядок.

  • flex-wrap

    flex-wrap

    Вказує, чи варто флексам розташовуватися в один рядок, чи можна зайняти кілька рядків. Якщо перенесення рядків допускається, то властивість також дозволяє контролювати напрямок, у якому викладаються рядки.

  • font

    font

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

  • justify-content

    justify-content

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

  • inline-size

    inline-size

    Визначає розмір елемента за рядковою віссю, напрямок якої залежить від значення властивості writing-mode. Для горизонтального листа (writing-mode: horizontal-tb) рядкова вісь буде горизонтальною, inline-size встановлює ширину елемента. Для вертикального напрямку письма (writing-mode: vertical-lr та writing-mode: vertical-rl) рядкова вісь буде вертикальною, inline-size встановлює висоту елемента.

  • font-kerning

    font-kerning

    Властивість font-kerning керує кернінгом шрифту. Кернінг – це зміна інтервалу між певними поєднаннями літер для збереження щільності літер у тексті. Це особливо важливо для літер, у яких є похилі лінії, наприклад А, У, W, V. Інформація про кернінг зберігається в самому шрифті, і якщо шрифт не підтримує цю можливість, то властивість font-kerning не вплине на текст.

  • font-size

    font-size

    Визначає розмір елемента шрифту. Розмір може бути встановлений декількома способами. Набір констант (xx-small, x-small, small, medium, large, x-large, xx-large) визначає розмір, який називається абсолютним. Правду кажучи, вони не зовсім абсолютні, оскільки залежать від налаштувань браузера та операційної системи.

  • font-stretch

    font-stretch

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

  • font-style

    font-style

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

  • font-variant

    font-variant

    Визначає, як потрібно представляти малі літери: залишити їх без модифікацій або робити їх великими зменшеними розмірами. Такий спосіб зміни символів називається капітель.

  • font-weight

    font-weight

    Встановлює насиченість шрифту. Значення вказується у вигляді чисел від 100 до 900 з кроком 100 або за допомогою ключових слів.

  • !important

    !important

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

Правила

  • @charset

    @charset

    Команда @charset використовується для кодування зовнішнього файлу CSS. Це має значення, якщо в CSS-файлі використовуються символи національного алфавіту.

Вендорні властивості

  • -ms-interpolation-mode

    -ms-interpolation-mode

    -ms-interpolation-mode вказує браузерe, який алгоритм використовувати при масштабуванні картинок. Використовується лише для елементів <img>.

CSS по категоріям

  • @-правила

    @-правила

    Задає кодування зовнішнього файлу CSS. Це має значення, якщо в CSS-файлі використовуються символи національного алфавіту.