Справочник тегов CSS

Встановлює напрямок тексту на сторінці. Властивість writing-mode є універсальним і дозволяє одночасно задавати значення властивостей direction і block-progression.

writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr

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

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

Вирівнює елемент по вертикалі щодо свого батька.

vertical-align: baseline | bottom | middle | sub | super | text-bottom | text-top | top | значення | проценти

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

text-transform: capitalize | lowercase | uppercase | none

Встановлює величину відступу першого рядка блоку тексту (наприклад, для параграфа P). Впливу на всі інші рядки не виявляється. Допускається негативне значення для створення виступу першого рядка, але слід перевірити, щоб текст не виходив за межі вікна браузера.

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

text-align: center | justify | left | right

Як значення приймаються будь-які одиниці довжини, прийняті в CSS - наприклад, пікселі (px), дюйми (in), пункти (pt) та ін Значення параметра right може бути і негативним, в цьому випадку можливі накладення різних елементів один на одного. При завданні значення у відсотках, положення елемента обчислюється в залежності від ширини батьківського елементу. Аргумент auto не змінює положення елемента.

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

padding-top: значення | auto

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

padding-left: значення | auto

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

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

overflow-x: auto | hidden | scroll | visible

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

opacity: значення

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

margin-right: значення | auto

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

margin-bottom: значення | auto

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

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

list-style-image: none | url(шлях до файлу)

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

Для позиційований елемента визначає відстань від лівого краю батьківського елементу, не включаючи відступ, поле і ширину рамки, до лівого краю дочірнього елемента. Відлік координат залежить від значення параметра position. Якщо його аргумент дорівнює absolute, як батька виступає вікно браузера і положення елемента визначається від його лівого краю. У випадку значення relative, значення left відраховується від лівого краю батьків.

Встановлює насиченість шрифту. Значення встановлюється від 100 до 900 з кроком 100. Сверхсветлое накреслення, що може відобразити браузер, має значення 100, а сверхжірное - 900. Нормальне накреслення шрифту (яке встановлено за умовчанням) еквівалентно 400, стандартний напівжирний текст - значенням 700. Інші аргументи (bolder і lighter) дозволяють змінювати жирність тексту щодо насиченості батьківського елементу.

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

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

Застосовується для зміни алгоритму розрахунку ширини і висоти елемента. Згідно специфікації CSS ширина блоку складається з ширини контенту (width), значень відступів (margin), полів (padding) і границь (border). Аналогічно іде і з висотою блоку. Властивість box-sizing дозволяє змінити цей алгоритм, щоб властивості width і height задавали розміри не контенту, а розміри блоку.

Визначає товщину кордону одночасно на всіх сторонах елементу або індивідуально для кожної сторони. Спосіб зміни товщини залежить від числа аргументів.

border-width: thin | medium | thick | значення

Встановлює стиль кордону верхній частині елементу.

border-top-style: стиль

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

border-top-left-radius: [значення | відсотки] [значення | відсотки]

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

Встановлює товщину кордону правого боку елемента.

border-right-width: thin | medium | thick | значенння

Встановлює колір кордону правого боку елемента.

border-right-color: колір

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

border-radius: <радіус>{1,4} [ / <радіус>{1,4}]

Встановлює стиль кордону лівого боку елемента.

border-left-style: стиль

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

Встановлює стиль кордону внизу елемента.

border-bottom-style: стиль

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

border-bottom-left-radius: [значення | відсотки] [значення | відсотки]

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

Масштабує фонове зображення згідно заданих розмірах.

background-size: [ <значення> | <проценти> | auto ]{1,2} | cover | contain

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

background-position: [проценты | значение] | [left | center | right] || [top | center | bottom]

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

background-color: колір

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

Псевдокласс: root визначає кореневий елемент документа. У HTML цей селектор завжди відповідає елементу <HTML>.

:root { ... }

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

елемент:only-child { ... }

Псевдокласс: nth-child використовується для додавання стилю до елементів на основі нумерації в дереві елементів.

елемент:nth-child(odd | even | <число> | <вираз>) {...}

Псевдокласс: last-of-type задає правила стилів для останнього елемента в списку дочірніх елементів свого батька. Приміром, додавання: last-of-type до селектора LI встановлює стиль тільки для останнього пункту списку, при цьому не поширюється на інші пункти.

Псевдокласс: first-of-type задає правила стилів для першого елемента в списку дочірніх елементів свого батька. Приміром, додавання: first-of-type до селектора TD встановлює стиль для всіх перших осередків, оскільки батьком для тега <TD> виступає тег <TR>.