НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
HTML CSS JAVASCRIPT SQL PHP PYTHON JAVA KOTLIN GO C C++ C# AI W3.CSS TypeScript Як зробити? ДОВІДНИКИ БІЛЬШЕ 🔍 ◑ ВПРАВИ

CSS Підручник

CSS СТАРТ CSS Інтро CSS Синтаксис CSS Селектори CSS Як підключити CSS Коментарі CSS Кольори
Кольори RGB HEX HSL
CSS Фони
Background Колір Background Зображення Background Повторення Background Прикріплення Background Shorthand
CSS Межі
Межі Ширина межі Колір межі Сторони межі Border Shorthand Закруглені межі
CSS Поля
Поля Згортання полів
CSS Внутрішній відступ CSS Висота/Ширина CSS Блочна модель CSS Контур
Контур Ширина контура Колір контура Outline Shorthand Outline Offset
CSS Текст
Text Колір Text Вирівнювання Text Оформлення Text Трансформація Text Інтервал Text Тінь
CSS Шрифти
Сімейство шрифту Веб-безпечні шрифти Резервні шрифти Стиль шрифту Розмір шрифту Google-шрифти Поєднання шрифтів Font Shorthand
CSS Іконки CSS Посилання CSS Списки CSS Таблиці
Межі таблиці Розмір таблиці Вирівнювання в таблиці Стиль таблиці Адаптивність таблиці
CSS Display CSS Max-Width CSS Position CSS Z-index CSS Overflow CSS Float
Float Clear Float Приклади
CSS Inline-Block CSS Вирівнювання CSS Комбінатори CSS Псевдо-класи CSS Псевдо-елементи CSS Непрозорість CSS Панель навігації
Панель навігації Вертикальний навбар Горизонтальний навбар
CSS Випадаючі списки CSS Галерея зображень CSS Спрайти зображень CSS Селектори атрибутів CSS Форми CSS Лічильники CSS Макет веб-сайту CSS Одиниці CSS Специфічності CSS !important CSS Математичні функції

CSS Розширений

CSS Закруглені кути CSS Межі зображень CSS Фони CSS Кольори CSS Кольори. Ключові слова CSS Градієнти
Лінійні градієнти Радіальні градієнти Конічні градієнти
CSS Тіні
Ефекти тіні Тінь блоку
CSS Ефекти тексту CSS Веб-шрифти CSS 2D Трансформації CSS 3D Трансформації CSS Переходи CSS Анімації CSS Підказки CSS Стилі зображень CSS Image Reflection CSS Підгонка об'єкту CSS object-position CSS Masking CSS Кнопки CSS Нумерація сторінок CSS Кілька стовпців CSS Користувальницький інтерфейс CSS Змінні
Функція var() Перевизначення змінних Змінні та JavaScript Змінні в медіа-запитах
CSS Розміри блоків CSS Медіа-запити CSS Приклади медіа-запитів CSS Flexbox
CSS Flexbox CSS Flex Контейнер CSS Flex Елементи CSS Flex Адаптивність

CSS Адаптивний

RWD Інтро RWD Область перегляду RWD Вигляд сітки RWD Медіа-запити RWD Зображення RWD Відео RWD Фреймворки RWD Шаблони

CSS Grid (Сітка)

Grid Інтро Grid Контейнер Grid Елементи

CSS SASS

Підручник

CSS Приклади

CSS Шаблони CSS Приклади CSS Сніпети CSS Вікторина CSS Вправи CSS Сертифікат

CSS Довідники

CSS Довідник CSS Селектори CSS Функції CSS Довідник аудіо CSS Безпечні веб-шрифти CSS Анімація CSS Одиниці CSS PX-EM Конвертер CSS Кольори CSS Значення кольору CSS Значення за замовчуванням CSS Підтримка браузерами

CSS3. Уроки W3Schools для початківців українською мовою

En Es De

CSS Background Shorthand - Скорочена властивість

❮ Prev Next ❯

CSS Background Shorthand - Скорочена властивість

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

Замість того, щоб писати:

body {
  background-color: #fff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
 background-position: right top;
}

Ви можете використовувати скорочену властивість background:

Приклад

Використовуйте скорочену властивість, щоб встановити властивість фону в одній об’яві:

body {
  background: #fff url("../images/img_tree.png") no-repeat right top;
}
Спробуйте самі »

При використанні скороченої властивості порядок значень властивостей наступний:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Не має значення, чи відсутнє одне зі значень властивості, якщо інші знаходяться в цьому порядку. Зверніть увагу, що ми не використовуємо властивість background-attachment в наведених вище прикладах, бо воно не має значення.

Перевірте себе за допомогою вправ

Вправа:

Встановіть колір фону елементу <h1> на "lightblue" (світло-блакитний).

<style>
h1 {
  : lightblue;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

Всі CSS властивості фону

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

CSS — Скорочена властивість — W3Schools Відеоурок

Відеоінструкція по встановленню фону вебсторінки за допомогою скороченної властивості у CSS.

Частина серії відеоуроків для вивчення CSS для початківців!

❮ Prev Next ❯

✍ Коментарі