Як змінити колір фону та тексту веб-сторінки?

Для зміни кольору фону застосовується властивість background додана до селектора body , а кольору тексту використовується властивість color , як показано у прикладі 1.

Приклад 1. Зміна кольору веб-сторінки

HTML5 CSS 2.1 IE Cr Op Sa Fx

Ескапізм стійко дає матеріалістичний комплекс незалежно від психічного стану пацієнта.

Результат цього прикладу показано на рис.

1. Вигляд сторінки, зі зміненим кольором фону та тексту

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

Фон у HTML

Фон для сайту HTML можна змінити як за допомогою атрибутів тега body, так і за допомогою CSS-стилів, застосованих також до тегу bodyРозглянемо обидва варіанти, як зробити фон для сайту.

Змінюємо колір фону за допомогою HTML

Тег body, як і практично будь-який HTML-тег має свої атрибути. body відносяться:

• bgcolor - Визначає колір фону для сторінки;
• background - дозволяє задати картинку як тло веб-сторінки (докладно це питання розглянуто у статті: Як зробити фон сайту картинкою HTML);
• scroll - керує відображенням смуги прокручування на сторінці;
• text - задає базовий колір тексту, який виводитиметься на веб-сторінці;
• bgproperties - вказує, чи прокручуватиметься фон разом зі сторінкою;
• link - керує кольором посилань за замовчуванням на сторінці;
• alink - Встановлює колір для активного посилання;
• vlink - Визначає колір для відвідуваного посилання на сторінці;
• leftmargin/rightmargin - Задає відступ контенту від лівого або правого краю вікна браузера;
• topmargin/bottommargin - Задає відступ контенту від верхнього або нижнього краю вікна браузера;

Щоб змінити колір фону за допомогою HTML, скористаємося атрибутом bgcolor:

Це приклад тексту білого кольору, заданого за допомогою атрибуту тексту тега body.

Примітка: Рекомендується визначити колір фону сторінки, навіть якщо білий фон. Це пов'язано з тим, що деякі користувачі можуть використовувати у браузері нестандартний колір тла, і через це текст на вашому сайті може бути нечитаним.

Змінюємо колір фону сторінки за допомогою CSS

Щоб уникнути надмірності коду, рекомендується все, що пов'язано з оформленням сторінки, переносити на плечі CSS. До цього належить і завдання кольору фону. CSS фон задається так:

 body
Це приклад тексту білого кольору, заданого за допомогою background CSS. Фон сторінки також встановлено за допомогою CSS.

У конструкторі сайтів "Нубекс" для будь-якого сайту можна вибрати вже готове тло з великої бібліотеки зображень, або додати свій.

Дивіться також:

Як зробити колір тла сторінки?

У цьому модулі ви дізнаєтесь, як можна стилізувати фон блоків за допомогою CSS.

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

Фонові шари знаходяться далі від користувача і відображаються за вмістом блоку, починаючи з його області padding-box . Це дозволяє фоновому шару взагалі перекривати кордону.

Колір фону¶

Одним із найпростіших ефектів, який можна застосувати до фонового шару, є встановлення color. Початкове значення background-color - transparent, що дозволяє бачити вміст батьківського шару. Правильний колір, встановлений на фоновому шарі, знаходиться за іншими елементами, намальованими на цьому шарі.

Фонові зображення¶

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

• URL-адреса зображення або data URI за допомогою CSS-функції url .
• Зображення, що динамічно створене градієнтною CSS-функцією.

Встановіть фонове зображення за допомогою CSS-функції url ¶

Градієнтні фони CSS¶

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

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

Демонстрація прикладу застосування фонового зображення за допомогою градієнтних функцій:

Фонові зображення, що повторюються¶

За замовчуванням фонові зображення повторюються по горизонталі та вертикалі, заповнюючи весь простір фонового шару.

Змінити це можна за допомогою властивості background-repeat з одним із наступних значень:

• repeat : Зображення повторюється в межах доступного простору, обрізаючись за необхідності.
• round : Зображення повторюється по горизонталі та вертикалі, щоб вмістити якнайбільше екземплярів у доступний простір, не обрізаючи, не стискаючи та не розтягуючи його.
• space : Зображення повторюється по горизонталі та вертикалі, щоб вмістити максимальну кількість екземплярів у доступний простір без обрізки, при необхідності розставляючи екземпляри зображення. Зображення, що повторюються, стосуються країв простору, займаного фоновим шаром, а між ними рівномірно розподіляється білий простір.

Властивість background-repeat дозволяє задавати поведінку для осей x та y незалежно один від одного. Перший параметр задає поведінку повтору по горизонталі, а другий по вертикалі.

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

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

Значення repeat-x повторює зображення лише горизонталлю, що еквівалентно repeat no-repeat .

Нижче наведений демонстраційний приклад демонструє ці можливості властивості background-repeat :

Положення фону¶

Ви можете помітити, що при стилізації деяких зображень у Web за допомогою оголошення background-repeat: no-repeat такі зображення відображаються ліворуч від свого контейнера.

Початкове положення фонових зображень – верхнє ліве. Властивість background-position дозволяє змінити цю поведінку шляхом усунення позиції зображення.

Як і властивість background-repeat, властивість background-position дозволяє позиціонувати зображення по осях x і y незалежно один від одного, причому за умовчанням використовується два значення.

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

При використанні тільки ключових слів порядок дотримання ключових слів не має значення:

Порядок не має значення для ключових слів, пов'язаних із різними осями положення.

Коли значення CSS використовуються разом із ключовими словами, порядок має значення. Перше значення представляє горизонтальну вісь, а друге вертикальну.

Не можна одночасно використовувати ключові слова, пов'язані з тією самою віссю.

Властивість background-position має зручне скорочення до одного значення; опущене значення перетворюється на 50% . Наведемо приклад, що демонструє це з прикладу ключових слів, прийнятих властивістю background-position :

Крім стандартних двох та одного параметра, властивість background-position може приймати до чотирьох параметрів;

При використанні трьох або чотирьох параметрів довжина або відсоток CSS повинні передувати ключовим словам top , left , right або bottom , щоб браузер міг обчислити, якого краю блоку CSS має відбуватися зміщення.

У разі використання трьох параметрів довжина або значення CSS може бути другим або третім параметром, а два інших є ключовими словами; ключове слово, яке слідує за ним, буде використовуватися для визначення краю, зсув якого відповідає довжина або значення CSS. Усунення іншого зазначеного ключового слова встановлюється рівним 0 .

При використанні трьох і більше параметрів перед значенням довжини CSS повинні стояти ключові слова top, right, bottom або left.

При використанні трьох і більше параметрів перед значенням довжини CSS повинні стояти ключові слова top, right, bottom або left.

Якщо background-position: top left 20% застосовується до фонового зображення CSS, то зображення розміщується у верхній частині блоку, а значення 20% являє собою 20% зсув від лівої частини блоку (по осі x).

Якщо до фонового зображення CSS застосовується параметр background-position: top 20% left , то значення 20% являє собою 20% зсув від верхньої частини блоку CSS (по осі y), а зображення розміщується в лівій частині блоку.

При використанні чотирьох параметрів два ключових слова сполучаються з двома значеннями, що відповідають зміщенню щодо початку кожного із зазначених ключових слів. Якщо до фонового зображення застосовується background-position: bottom 20% right 30%, то фонове зображення позиціонується на 20% знизу та на 30% праворуч від блоку CSS.

Ця поведінка демонструється в наступному прикладі:

Наведемо ще кілька прикладів використання властивості background-position з використанням поєднання значень CSS та ключових слів:

Детальніше про нюанси, пов'язані з позиціонуванням фонів, можна дізнатися зі статті background-position на MDN.

Розмір фону¶

Властивість background-size визначає розмір фонових зображень; за замовчуванням розмір фонових зображень визначається виходячи з їхньої власної (реальної) ширини, висоти та співвідношення сторін.

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

Властивість background-size приймає такі ключові слова:

• auto : При незалежному використанні розмір фонового зображення визначається його власною шириною та висотою; коли auto використовується разом з іншим CSS-значенням ширини (перший параметр) або висоти (другий параметр), розмір, встановлений в auto , змінюється при необхідності, щоб зберегти природне співвідношення сторін зображення. Це поведінка якості background-size за умовчанням.
• cover : Охоплює всю область шару фону. Це може означати, що зображення розтягується або обрізається.
• contain : Розмір зображення дозволяє заповнити простір без розтягування або обрізання. В результаті може залишитися порожній простір, що призведе до повторення зображення, якщо для параметра background-repeat не встановлено значення no-repeat.

Два останніх параметри призначені для самостійного використання без додаткових параметрів.

У наступному демонстраційному прикладі показані ці ключові слова у дії:

Демонстрація застосування цих ключових слів до background-size :

Фіксація фону¶

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

Воно приймає 3 ключові слова: scroll , fixed і local .

Поведінкою властивості background-attachment за умовчанням є початкове значення scroll. Коли потрібно більше місця, зображення переміщуються на це місце в межах фонового шару, який визначається межами блоку CSS.

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

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

Ключове слово local дозволяє фіксувати положення фонових зображень щодо вмісту елемента.Тепер фонові зображення переміщаються по займаному ними простору в міру того, як цей простір відображається всередині та за межами блоку CSS (зазвичай це пов'язано з прокручуванням, двовимірними або тривимірними перетвореннями).

Фонова область¶

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

Спробувати ці можливості можна за допомогою наступної демонстрації:

Обрізання фону¶

Властивість background-clip управляє тим, що візуально видно з фонового шару, незалежно від меж, створених властивістю background-origin.

Як і в background-origin , можуть бути вказані наступні області: border-box , padding-box і content-box , відповідні місцям, де може бути зображений фоновий шар CSS. вирізано.

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

Це відносно нова властивість і на момент написання статті Chrome і більшість браузерів вимагають префікс -webkit- для використання цієї властивості.

Слід також зазначити, що ця властивість несумісна з одночасним встановленням background-clip: text для блоку CSS.

Декілька фонових шарів¶

Як вже згадувалося на початку модуля, фоновий шар дозволяє визначити кілька підшарів.

Декілька фонів задаються зверху вниз; перший фон знаходиться найближче до користувача, а останній - далі від нього.

Єдине певне тло або останній шар позначається браузером як фінальний фоновий шарТільки цьому шару дозволяється призначати background-color.

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

Декілька шарів можуть бути налаштовані індивідуально за допомогою більшості CSS-властивостей, пов'язаних з фоном, які розділяються комами, як показано в наведеному нижче фрагменті коду та демонстраційному прикладі.

Короткий опис фону¶

Для полегшення стилізації фонового шару блоку, особливо якщо потрібно кілька фонових шарів, існує скорочення, яке виглядає так:

Важливо, що це властивості фону, опущені скорочення, встановлюються у свої початкові значення.

Порядок важливий при скороченій формі об'яви кількох фонів.

У наступному оголошенні фон обрізається та береться з блоку вмісту:

З урахуванням цієї скороченої семантики попередні оголошення, пов'язані з фоном, в даному фрагменті коду можуть бути переписані таким чином: