Довідник CSS прикладів

Глобальні стилі

• !important - Використовується для підвищення пріоритету стилю.
• @charset - Вказує кодування стилю.
• @font-face - Додає нові шрифти на веб-сторінку.
• @import - Імпортує зовнішній файл стилів.
• @media - Додає стилі для конкретних пристроїв.
• @page - Встановлює стилі для сторінок при друку.

Фони

• background - Встановлює всі властивості фону в одному місці.
• background-attachment - Встановлює, чи буде фон прокручуватися з вмістом.
• background-clip - Встановлює область, до якої застосовується фон.
• background-color - Встановлює колір фону.
• background-image - Встановлює зображення фону.
• background-origin - Встановлює початкову позицію фону.
• background-position - Встановлює позицію фону.
• background-position-x - Встановлює горизонтальну позицію фону.
• background-position-y - Встановлює вертикальну позицію фону.
• background-repeat - Встановлює спосіб повторення фону.
• background-size - Встановлює розмір фону.

Межі

• border - Встановлює всі властивості межі в одному місці.
• border-bottom - Встановлює всі властивості нижньої межі.
• border-bottom-color - Встановлює колір нижньої межі.
• border-bottom-left-radius - Встановлює радіус заокруглення лівого нижнього кута межі.
• border-bottom-right-radius - Встановлює радіус заокруглення правого нижнього кута межі.
• border-bottom-style - Встановлює стиль нижньої межі.
• border-bottom-width - Встановлює ширину нижньої межі.
• border-collapse - Встановлює режим колапсу меж у таблицях.
• border-color - Встановлює колір межі.
• border-image - Встановлює зображення межі.
• border-left - Встановлює всі властивості лівої межі.
• border-left-color - Встановлює колір лівої межі.
• border-left-style - Встановлює стиль лівої межі.
• border-left-width - Встановлює ширину лівої межі.
• border-radius - Встановлює радіус заокруглення межі.
• border-right - Встановлює всі властивості правої межі.
• border-right-color - Встановлює колір правої межі.
• border-right-style - Встановлює стиль правої межі.
• border-right-width - Встановлює ширину правої межі.
• border-spacing - Встановлює відстань між межами у таблицях.
• border-style - Встановлює стиль межі.
• border-top - Встановлює всі властивості верхньої межі.
• border-top-color - Встановлює колір верхньої межі.
• border-top-left-radius - Встановлює радіус заокруглення лівого верхнього кута межі.
• border-top-right-radius - Встановлює радіус заокруглення правого верхнього кута межі.
• border-top-style - Встановлює стиль верхньої межі.
• border-top-width - Встановлює ширину верхньої межі.
• border-width - Встановлює ширину межі.

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

• bottom - Встановлює нижнє позиціонування елемента.
• left - Встановлює ліве позиціонування елемента.
• right - Встановлює праве позиціонування елемента.
• top - Встановлює верхнє позиціонування елемента.

Тіні і розміри

• box-shadow - Встановлює тінь для елемента.
• box-sizing - Визначає, як розраховується розмір елемента.
• height - Встановлює висоту елемента.
• max-height - Встановлює максимальну висоту елемента.
• max-width - Встановлює максимальну ширину елемента.
• min-height - Встановлює мінімальну висоту елемента.
• min-width - Встановлює мінімальну ширину елемента.
• width - Встановлює ширину елемента.

Текстові властивості

• color - Встановлює колір тексту.
• font - Встановлює всі властивості шрифту в одному місці.
• font-family - Встановлює сімейство шрифтів.
• font-size - Встановлює розмір шрифту.
• font-stretch - Встановлює розтягування шрифту.
• font-style - Встановлює стиль шрифту.
• font-variant - Встановлює варіант шрифту.
• font-weight - Встановлює товщину шрифту.
• letter-spacing - Встановлює відстань між літерами.
• line-height - Встановлює висоту рядка.
• text-align - Встановлює вирівнювання тексту.
• text-align-last - Встановлює вирівнювання останнього рядка тексту.
• text-decoration - Встановлює оформлення тексту (підкреслення, закреслення тощо).
• text-decoration-color - Встановлює колір оформлення тексту.
• text-decoration-line - Встановлює тип лінії оформлення тексту (підкреслена, закреслена тощо).
• text-decoration-style - Встановлює стиль оформлення тексту (суцільна, пунктирна тощо).
• text-indent - Встановлює відступ першого рядка тексту.
• text-overflow - Встановлює, як обробляється текст, що виходить за межі контейнера.
• text-shadow - Встановлює тінь для тексту.
• text-transform - Встановлює перетворення тексту (великі літери, малі літери тощо).
• unicode-bidi - Встановлює спосіб обробки двонаправленого тексту.
• vertical-align - Встановлює вертикальне вирівнювання тексту.
• white-space - Встановлює, як обробляються пробіли в тексті.
• word-break - Встановлює правила переносу слів.
• word-spacing - Встановлює відстань між словами.
• word-wrap - Встановлює, як обробляються довгі слова, що виходять за межі контейнера.
• writing-mode - Встановлює режим написання тексту (горизонтально, вертикально).

Мультимедіа

• img - Вставляє зображення.
• audio - Вставляє звуковий контент.
• video - Вставляє відеоконтент.
• source - Вказує джерело для мультимедійних елементів.
• track - Додає текстову доріжку до медіа елементів.
• map - Визначає карту зображення.
• area - Визначає активну область на зображенні.
• svg - Вставляє векторну графіку.
• math - Вставляє математичні формули.

Вбудований контент

• iframe - Вставляє вбудоване вікно.
• embed - Вставляє вбудований зовнішній ресурс.
• object - Вставляє вбудований об'єкт.
• param - Визначає параметри для вбудованого об'єкта.

Псевдокласи та псевдоелементи

• :active - Застосовується до активного елемента.
• :checked - Застосовується до вибраних елементів форми.
• :default - Застосовується до стандартних елементів форми.
• :disabled - Застосовується до відключених елементів форми.
• :empty - Застосовується до елементів без дочірніх елементів.
• :enabled - Застосовується до включених елементів форми.
• :first-child - Застосовується до першого дочірнього елемента.
• :first-of-type - Застосовується до першого елемента певного типу.
• :focus - Застосовується до елемента, який має фокус.
• :hover - Застосовується до елемента при наведенні на нього курсора.
• :indeterminate - Застосовується до елементів, стан яких невизначений.
• :lang - Застосовується до елементів певної мови.
• :last-child - Застосовується до останнього дочірнього елемента.
• :last-of-type - Застосовується до останнього елемента певного типу.
• :link - Застосовується до непереглянутих посилань.
• :not - Застосовується до елементів, які не відповідають заданому селектору.
• :nth-child - Застосовується до елементів на основі їхньої позиції в батьківському елементі.
• :nth-last-child - Застосовується до елементів на основі їхньої позиції з кінця в батьківському елементі.
• :nth-last-of-type - Застосовується до елементів певного типу на основі їхньої позиції з кінця в батьківському елементі.
• :nth-of-type - Застосовується до елементів певного типу на основі їхньої позиції в батьківському елементі.
• :only-child - Застосовується до елементів, які є єдиними дочірніми елементами в батьківському елементі.
• :only-of-type - Застосовується до елементів, які є єдиними елементами певного типу в батьківському елементі.
• :optional - Застосовується до елементів форми, які є необов'язковими.
• :read-write - Застосовується до елементів форми, які можуть бути змінені користувачем.
• :required - Застосовується до елементів форми, які є обов'язковими.
• :root - Застосовується до кореневого елемента документа.
• :target - Застосовується до елемента, до якого йде посилання в URL.
• :visited - Застосовується до переглянутих посилань.
• Псевдоелемент ::after - Додає контент після елемента.
• Псевдоелемент ::before - Додає контент перед елементом.
• Псевдоелемент ::first-letter - Застосовується до першої літери тексту елемента.
• Псевдоелемент ::first-line - Застосовується до першого рядка тексту елемента.
• Псевдоелемент ::selection - Застосовується до виділеного тексту.
• Псевдоклас ::-moz-placeholder - Застосовується до тексту-заповнювача в полях форми (Mozilla).
• Псевдоклас ::-webkit-input-placeholder - Застосовується до тексту-заповнювача в полях форми (WebKit).
• Псевдоелемент ::-moz-selection - Застосовується до виділеного тексту (Mozilla).
• Псевдоелемент ::-ms-browse - Застосовується до кнопки перегляду файлів у полях форми (IE).
• Псевдоелемент ::-ms-check - Застосовується до прапорців у полях форми (IE).
• Псевдоелемент ::-ms-clear - Застосовується до кнопки очищення полів форми (IE).
• Псевдоелемент ::-ms-expand - Застосовується до кнопки розширення полів форми (IE).
• Псевдоелемент ::-ms-fill - Застосовується до заповнювальних елементів у полях форми (IE).
• Псевдоелемент ::-ms-reveal - Застосовується до кнопки показу прихованого тексту у полях форми (IE).
• Псевдоелемент ::-ms-value - Застосовується до значень у полях форми (IE).