vlastivosti_css [wiki.hostingcloud.com.ua]

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
====== Властивості CSS ======
  * **color: red;** - колір тексту
  * **background-color** - колір фону
  * **[[background-image]]** - задає фонове зображення елемента, адреса якого вказується аргументом функції url(). Це може бути як відносний, так і абсолютний шлях.
  * **[[background-repeat]]** - керує повторенням фонового зображення. За замовчуванням воно повторюється по горизонталі (X) та вертикалі (Y). Це відбувається, якщо зображення менше ніж розмір елемента.
  * **[[background-position]]** - керує положенням фонового зображення відносно рамки елемента, використовуючи дві координати — x по горизонталі і y по вертикалі.
  * **[[background-size]]** - дозволяє коригувати розміри зображення шляхом налаштування необхідної ширини та висоти. Якщо не вказати висоту, вона буде розрахована автоматично зі збереженням пропорцій.
  * **[[background]]** - складена властивість для одночасного встановлення значень всіх розглянутих властивостей
  * **width** - ширина блоку
  * **max-width** - максимальна ширина блоку, але система може автоматично зробити меньше
  * **font-family** - задає [[shrifti|шрифт тексту елемента]]. Через кому можна перерахувати довільну кількість шрифтів, які браузер спробує знайти в системі користувача та застосувати. Браузер буде шукати шрифти зліва направо та застосує перший знайдений.
  * **font-size** - Надає розмір шрифту елемента в абсолютних або відносних одиницях вимірювання. Наразі обмежимося абсолютними одиницями — px (пікселями). За замовчуванням розмір шрифту абзацу = 16px.
  * **font-weight** - онтролює товщину зображення (жирність, вагу) літер у шрифті. Значення властивості можна задавати, за допомогою набору зарезервованих слів або за допомогою цифр від 100 до 900 з кроком 100. Ці значення задають ступінь товщини гліфу від тонкого 100 до товстого 900. У розробці використовуються тільки цифри, через можливість задати однаково точну вагу в усіх браузерах.
  * **font-style** - задає тип накреслення тексту, наприклад, можна зробити текст курсивом. __font-style: normal | italic | oblique | initial | inherit__
  * **text-decoration** - задає різні ефекти оформлення тексту: нижнє і верхнє підкреслення, а також закреслення. __text-decoration: none | underline | line-through | overline__. Таблиця стилів від браузера задає для більшості елементів значення none. А ось, наприклад, у посилань за замовчуванням зазначено underline.
  * **text-transform** -  задає регістр символів у тексті (наприклад, зробити всі літери великими або маленькими). У розмітці текст завжди набирається згідно з правилами мови. А потім, за допомогою text-transform, виконуються всі потрібні налаштування. Адже все оформлення має бути в CSS. __text-transform: none | uppercase | lowercase | capitalize__
  * **text-align** - керує вирівнюванням текстового вмісту по горизонталі. Використання значення justify — не найліпша ідея. Хоча текст і притискається до правої та лівої межі блоку рівномірно, його читабельність падає. Все тому, що прогалини між словами мають різну довжину, а це негативно впливає на сприйнятті тексту. __text-align: left | right | center | justify__
  * **line-height** - встановлює міжрядковий інтервал (інтерліньяж, висоту рядка) тексту. За замовчуванням відстань між рядками залежить від типу шрифту та його розмірів і визначається браузером автоматично. Використання множника гарантує рівномірне масштабування інтервалу між рядками при зміні розміру тексту.__line-height: множник | значення | відсотки | normal | inherit__
  * **letter-spacing** - визначає інтервал між символами. <__letter-spacing: значення | normal | inherit__
  * **text-indent** - встановлює величину відступу першого рядка текстового блоку, наприклад абзацу. __text-indent: значення | відсотки | inherit__
  * **text-shadow** - контролює тінь тексту, а також задає її параметри: колір, зміщення та радіус розмиття. __text-shadow: <зміщення по x>, <зміщення по y>, <радіус розмиття>, <колір>__
  * **list-style-type** - визначає тип маркера списку. Щоб прибрати відображення маркера, необхідно встановити значення __none__.
  * **cursor: pointer** - зміна вигляду при наведенні курсору
  * **[[box-sizing]]** - визначає тип блокової моделі елемента – формулу (алгоритм) розрахунку його розмірів.
  * **[[padding]]** - властивість, яка контролює внутрішні поля між вмістом і рамкою для всіх сторін елемента: зверху (top), справа (right), знизу (bottom) і зліва (left). Саме в такому порядку
  * **[[margin]]** - контролює зовнішні відступи від рамки до сусідніх елементів для всіх сторін елемента. Результат роботи залежить від того, скільки значень властивості вказано.
  * **[[border]]** - Складова властивість border контролює ширину, стиль і колір рамки елемента
  * **[[border-radius]]** - Для заокруглення всі кути рамки
  * **[[overflow]]** - Для заокруглення зображення
  * **[[display]]** - міняє поведінку блоку (блокови/строковий/блоковий)
  * **[[viewport]]** - видима частина сторінки, що відображається на екрані. Звісно ж, на комп’ютері та мобільному пристрої області перегляду різні. Користувач також може скористатися прокручуванням і змінити видиму частину.
  * **[[flex]]** - керування виравлюванням / установкою напрямку єлементів у середині тегу
  * **[[object-fit]]** - изначає яким чином вміст елемента img буде вміщатися в контейнер, коли розміри чи пропорції зображення та контейнера не збігаються. Зображення можна обрізати, розтягувати чи масштабувати.
  * **[[calc]]** - дозволяє розраховувати розміри
  * **[[nth-child]]** - приміняє ввластивості ксс до определенніх дочерних єлементів по формулі
  * **[[box-shadow]]** - додає елементу ефект об'єму та висоту
  * **[[fill]]** - керує кольором заливки векторної картинки SVG
  * **[[position]]** - Якщо треба розташувати один елемент поверх іншого
  * **[[z-index]]** - Позиціовані елементи випадають з потоку, а значить для них потрібно правило, яке визначатиме який елемент знаходиться вище, а який нижче на осі
  * **[[transition-property]]** - задає властивості, до яких буде застосовано ефект переходу. Значенням може бути одна властивість або список властивостей через кому. Значення за замовчуванням — all, тобто анімуються всі можливі властивості.
  * **[[transition-duration]]** - тривалість переходу
  * **[[transition-timing-function]]** - задає функцію розподілу часу, тобто поведінку анімації.
  * **[[transition-delay]]** - визначає затримку, після якої розпочинається анімація переходу. За замовчуванням встановлено значення 0s.
  * **[[transition]]** - Всі властивості переходу можна поєднати в одну складову властивість
  * **[[transform]]** - відповідає за застосування однієї або більше трансформацій елемента.
  * **[[clamp]]** - позволяет ограничивать диапазон изменения некоего значения