З цієї статті ви дізнаєтеся, як змінити колір фону веб-сторінки, якщо відредагувати її HTML-код.

кроки

Метод 1 з 4:

Як підготуватися до редагування HTML-коду

1. Визначте колір фону, який ви хочете використовувати. В HTML кольору задаються кодами, які визначають різні відтінки. Скористайтеся безкоштовним онлайн-інструментом W3Schools HTML Color Picker, щоб знайти коди потрібних кольорів:

Перейдіть на сторінку https: // w3schools.com / colors / colors_picker.asp в веб-браузері комп`ютера.
Виберіть базовий колір, який хочете використовувати, в розділі «Pick a Color» (Вибрати колір).
Виберіть відтінок в правій частині сторінки.
Запишіть код, який відобразиться праворуч від обраного відтінку.

2. Відкрийте HTML-файл в текстовому редакторі. Пам`ятайте, що в HTML5 атрибут більше не підтримується. Тому колір фону і інші параметри стилю сторінки задаються за допомогою CSS.

HTML-документ можна відкрити в Notepad ++ або Блокноті (Windows), а також в TextEdit або BBEdit (Mac).

3. Додайте заголовок «html» в документ. Всі параметри стилю сторінки, включаючи колір фону, повинні перебувати між тегами :

4. Створіть порожній рядок між тегами «style». На цьому рядку, яка повинна знаходитися під тегом і над тегом , ви введете необхідну інформацію.

6. Додайте елемент «body». Введіть наступний код між тегами :

body {}

Все, що буде укладено всередині елемента «body» в CSS, вплине на всю сторінку.

Пропустіть цей крок, якщо хочете створити градієнтний фон.

Метод 2 з 4:

Як створити однотонний фон

1. Знайдіть заголовок «html». Він повинен бути у верхній частині документа.

2. Додайте властивість «background-color» в елемент «body». Введіть background-color: в фігурних дужках всередині елемента «body». Повинен вийти наступний код:

body {background-color:}

Зверніть увагу, що в цьому коді необхідно використовувати слово «color», а не «colour».

3. Додайте потрібний колір фону в властивість «background-color». Праворуч від «background-color:» введіть числовий код вибраного кольору, а потім введіть крапку з комою (-). Наприклад, щоб фон сторінки зробити рожевим, напишіть наступний код:

body {background-color: # d24dff-}

4. Перегляньте інформацію всередині тегів «style». На цьому етапі заголовок вашого HTML-документа повинен виглядати наступним чином:

 {Background-color: # d24dff}

5. Використовуйте «background-color», щоб задати колір фону інших елементів (заголовків, абзаців і тому подібних). Наприклад, щоб задати колір фону основного заголовка (

) Або абзацу (
), Напишіть наступний код:

 {Background-color: # 93B874-} h1 {background-color: # 00b33c-} p {background-color: #FFFFFF) -}Заголовок
 на зеленому тліабзац
 на білому тлі

Метод 3 з 4:

Як створити градієнтний фон

1. Знайдіть заголовок «html». Він повинен бути у верхній частині документа.

2. Запам`ятайте основний синтаксис цього процесу. Щоб створити градієнт, необхідно знати дві величини: початкову точку / кут і ряд кольорів, які будуть переходити один в інший. Можна вибрати кілька кольорів, щоб вони переходили один в одного-також можна задати напрямок або кут переходу.

background: linear-gradient (напрямок / кут, цвет1, цвет2, цвет3 і так далі)-

3. Створіть вертикальний градієнт. Якщо не задати напрямок, градієнт буде йти зверху вниз. Щоб створити такий градієнт, введіть наступний код між тегами :

html {min-height: 100% -} body {background: -webkit-linear-gradient (# 93B874, # C9DCB9) -background: -o-linear-gradient (# 93B874, # C9DCB9) -background: -moz-linear -gradient (# 93B874, # C9DCB9) -background: linear-gradient (# 93B874, # C9DCB9) -background-color: # 93B874-}

У різних браузерах функції градієнта реалізовані по-різному, тому потрібно додати кілька версій коду.

4. Створіть спрямований градієнт. Якщо ви не хочете, щоб градієнт йшов по вертикалі, вкажіть напрямок переходу квітів. Для цього введіть наступний код між тегами :

html {min-height: 100% -} body {background: -webkit-linear-gradient (left, # 93B874, # C9DCB9) -background: -o-linear-gradient (right, # 93B874, # C9DCB9) -background: -moz-linear-gradient (right, # 93B874, # C9DCB9) -background: linear-gradient (to right, # 93B874, # C9DCB9) -background-color: # 93B874-}

Якщо хочете, переставте слова «left» (вліво) і «right» (вправо), щоб поекспериментувати з різними напрямками градієнта.

5. Використовуйте інші властивості для налаштування градієнта. З ним можна зробити більше, ніж здається.

Наприклад, після кожного кольору можна ввести число в процентах. Так ви вкажіть, який простір буде займати кожний колірний сегмент. Ось приклад коду з такими параметрами:

background: linear-gradient (# 93B874 10%, # C9DCB9 70%, # 000000 90%)-

Додайте прозорість до кольору. У цьому випадку він буде поступово загасати. Щоб домогтися ефекту загасання, використовуйте один і той же колір. Щоб задати колір, знадобиться функція rgba (). Останнє значення визначить прозорість: 0 - непрозорий колір і 1 - прозорий колір.

background: linear-gradient (to right, rgba (147,184,116,0), rgba (147,184,116,1))-

6. перегляньте код. Код для створення колірного градієнта як фон веб-сторінки буде виглядати приблизно так:

 {Min-height: 100% -} body {background: -webkit-linear-gradient (left, # 93B874, # C9DCB9) -background: -o-linear-gradient (right, # 93B874, # C9DCB9) -background: - moz-linear-gradient (right, # 93B874, # C9DCB9) -background: linear-gradient (to right, # 93B874, # C9DCB9) -background-color: # 93B874-}

Метод 4 з 4:

Як створити мінливий фон

1. Знайдіть заголовок «html». Він повинен бути у верхній частині документа.

2. Додайте властивість «animation» в елемент «body». Введіть наступний код після «body {» і до закриває фігурної дужки:

-webkit-animation: colorchange 60s infinite-animation: colorchange 60s infinite-

Верхній рядок тексту призначена для браузерів на основі Chromium, а нижня рядок тексту - для інших браузерів.

3. Додайте кольору в властивість «animation». Скористайтеся правилом «@keyframes», щоб задати кольору фону, які будуть циклічно змінюватися, а також час, протягом якого кожен колір буде відображатися на сторінці. Не забудьте ввести різний код для різних браузерів. Введіть наступний код під закриває фігурної дужки елемента «body»:

@ -Webkit-keyframes colorchange {0% {background: # 33FFF3-} 25% {background: # 78281F-} 50% {background: # 117A65-} 75% {background: # DC7633-} 100% {background: # 9B59B6 -}} @ keyframes colorchange {0% {background: # 33FFF3-} 25% {background: # 78281F-} 50% {background: # 117A65-} 75% {background: # DC7633-} 100% {background: # 9B59B6 -}}

Зверніть увагу, що два правила (@ -Webkit-keyframes і @keyframes) Мають однакові кольори фону і відсотки. Це зроблено для того, щоб мінливий фон правильно працював в будь-якому браузері.

відсотки (0%, 25% і так далі) позначають частку від часу (60 з). Коли сторінка завантажиться, її фоном буде колір # 33FFF3. Коли пройде 15 с (25% від 60 с), фон зміниться на колір # 7821F і так далі.

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

4. перегляньте код. Код для створення мінливого фону повинен виглядати наступним чином:

 {-Webkit-animation: colorchange 60s infinite-animation: colorchange 60s infinite -} @ - webkit-keyframes colorchange {0% {background: # 33FFF3-} 25% {background: # 78281F-} 50% {background: # 117A65- } 75% {background: # DC7633-} 100% {background: # 9B59B6 -}} @ keyframes colorchange {0% {background: # 33FFF3-} 25% {background: # 78281F-} 50% {background: # 117A65- } 75% {background: # DC7633-} 100% {background: # 9B59B6-}}

Поради

Якщо ви хочете використовувати основні кольори в HTML-коді, можна вводити імена квітів (без символу #), а не їх числові коди. Наприклад, щоб створити помаранчевий фон, введіть background-color: orange-.
В якості фону веб-сторінки можна встановити зображення.