Для початку займемося розглядом властивостей, що відповідають за кольорове оформлення елементів сторінки, а також властивостей CSS, що використовуються при роботі з фоновим зображенням.
Колір в CSS можна задати двома способами (докладніше тут.).
колір тексту
Властивість color призначений для завдання кольору тексту елемента.
Наприклад, за допомогою властивості color можна задати колір тексту для всієї сторінки, колір тексту окремого абзацу або всіх абзаців сторінки, колір тексту заголовка або в комірці таблиці і т.п.
Властивість може бути застосовано до всіх елементів.
З Ададе колір тексту для абзаців даного документа.
А також створимо стиль, який можна застосувати до першими літерами кожного абзацу!
Фрагмент коду з файлу зі стилями:
З Ададе колір тексту для абзаців даного документа.
А також створимо стиль, який можна застосувати до першими літерами кожного абзацу!
Колір фону
Властивість background-color призначений для завдання фонового кольору елемента.
Властивість може бути застосовано до всіх елементів.
Задамо фоновий колір.
Для всіх абзаців поточної сторінки.
Задамо фоновий колір.
Для всіх абзаців поточної сторінки.
фонове зображення
Властивість background-image призначене для завдання фонового зображення елементу.
Якщо зображення невелика (менше простору, займаного елементом), воно буде повторюватися і по вертикалі і по горизонталі, поки не займе всю область, яку займає елемент.
Властивість може бути застосовано до всіх елементів.
Пінгвін є фоновим зображенням даного абзацу.
Пінгвін є фоновим зображенням даного абзацу.
Повторення фонового зображення
Властивість background-repeate задає напрямок, в якому фонове зображення буде повторюватися.
Значення repeat-x і repeat-y встановлюють повторення фонового зображення по горизонталі і по вертикалі відповідно.
Значення no-repeat скасовує повтор зображення.
Якщо властивість не вказано або вказано значення repeat. то фонове зображення повторюється і по вертикалі і по горизонталі, як видно з попереднього прикладу для властивості background-image.
Властивість може бути застосовано до всіх елементів.
Пінгвін є фоновим зображенням даного абзацу. І він не повторюється!
Пінгвін є фоновим зображенням даного абзацу. І він не повторюється!
Розташування фонового зображення
Властивість background - position задає положення фонового зображення елементу щодо його верхнього лівого кута.
Положення зображення можна задати як за допомогою ключових слів: left. right. center. top. bottom. так і в одиницях, прийнятих в CSS (докладніше тут.).
Властивість може бути застосовано до блокових елементів (докладніше тут.).
За замовчуванням фонове зображення розташовується в лівому верхньому кутку елемента. Я розташував його в нижній частині області, займаної даними абзацом, змістивши на 120 пікселів вправо.
За замовчуванням фонове зображення розташовується в лівому верхньому кутку елемента. Я розташував його в нижній частині області, займаної даними абзацом, змістивши на 120 пікселів вправо.
Фіксація фонового зображення
Властивість background-attachment визначає, чи буде фонове зображення прокручуватися разом з вмістом елементу - значення scroll або буде нерухомим - значення fixed.
Властивість може бути застосовано до всіх елементів.
універсальна властивість
Властивість background є універсальним властивістю, що дозволяє одночасно вказати значення всіх властивостей, пов'язаних з фоном елемента і його фоновим зображенням.
Значення властивостей вказують через пробіл, в будь-якому порядку. А браузер автоматично визначає приналежність значення властивості.
Не обов'язково вказувати значення всіх властивостей. Чи не використовуваним властивостям присвоюються значення за замовчуванням.
Властивість може бути застосовано до всіх елементів.
До даного абзацу за допомогою властивості background я застосував три властивості, що відносяться до фону елемента та його фонового зображення, вказавши через пробіл тільки значення властивостей. Фоновим зображенням є пінгвін. Він зміщений вправо і не повторюється. Фоновий колір елемента не вказано, а за замовчуванням він білий.
До даного абзацу за допомогою властивості background я застосував три властивості, що відносяться до фону елемента та його фонового зображення, вказавши через пробіл тільки значення властивостей. Фоновим зображенням є пінгвін. Він зміщений вправо і не повторюється. Фоновий колір елемента не вказано, а за замовчуванням він білий.