Как задать цвет фона в HTML

Из этой статьи вы узнаете, как изменить цвет фона веб-страницы, если отредактировать ее HTML-код.

1
Определите цвет фона, который вы хотите использовать. В HTML цвета задаются кодами, которые определяют различные оттенки. Воспользуйтесь бесплатным онлайн-инструментом W3Schools HTML Color Picker, чтобы найти коды нужных цветов:
- Перейдите на страницу https://www.w3schools.com/colors/colors_picker.asp в веб-браузере компьютера.
- Выберите базовый цвет, который хотите использовать, в разделе «Pick a Color» (Выбрать цвет).
- Выберите оттенок в правой части страницы.
- Запишите код, который отобразится справа от выбранного оттенка.
2
Откройте HTML-файл в текстовом редакторе. Помните, что в HTML5 атрибут
больше не поддерживается. Поэтому цвет фона и другие параметры стиля страницы задаются с помощью CSS.
- HTML-документ можно открыть в Notepad++ или Блокноте (Windows), а также в TextEdit или BBEdit (Mac).
3
Добавьте заголовок «html» в документ. Все параметры стиля страницы, включая цвет фона, должны находиться между тегами :
```
DOCTYPE html> <html> <head> <style> style>  head> html> 
```
4

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

6
Добавьте элемент «body». Введите следующий код между тегами :
```
body {  } 
```
- Все, что будет заключено внутри элемента «body» в CSS, повлияет на всю страницу.
- Пропустите этот шаг, если хотите создать градиентный фон.
Реклама

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-документа должен выглядеть следующим образом:
```
DOCTYPE html> <html> <head> <style> body { background-color: #d24dff } style> head> html> 
```
5
Используйте «background-color», чтобы задать цвет фона других элементов (заголовков, абзацев и тому подобных). Например, чтобы задать цвет фона основного заголовка (
) или абзаца (

), напишите следующий код:
DOCTYPE html> <html> <head> <style> body { background-color: #93B874; } h1 { background-color: #00b33c; } p { background-color: #FFFFFF); } style> head> <body> <h1>Заголовок на зеленом фонеh1> <p>Абзац на белом фонеp> body> html>
Реклама

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));

Просмотрите код. Код для создания цветового градиента в качестве фона веб-страницы будет выглядеть примерно так:

DOCTYPE html> <html> <head> <style> 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;  } style> head> <body> body> html>

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 и так далее.
- Измените время и цвета, чтобы они соответствовали желаемому результату.

Просмотрите код. Код для создания меняющегося фона должен выглядеть следующим образом:

DOCTYPE html> <html> <head> <style> body {     -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;} }    style> head> <body> body> html>

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

Проверьте изменения, внесенные в код веб-сайта, прежде чем публиковать их.

DOCTYPE html> <html> <head> <style> style>  head> html>

body {  }

body {     background-color:  }

body {     background-color: #d24dff; }

DOCTYPE html> <html> <head> <style> body { background-color: #d24dff } style> head> html>

DOCTYPE html> <html> <head> <style> body {     background-color: #93B874; } h1 {     background-color: #00b33c; } p {     background-color: #FFFFFF); } style> head> <body> <h1>Заголовок на зеленом фонеh1> <p>Абзац на белом фонеp> body> html>

background: linear-gradient(направление/угол, цвет1, цвет2, цвет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;  }

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;  }

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

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

DOCTYPE html> <html> <head> <style> 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;  } style> head> <body> body> html>

    -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;} }

DOCTYPE html> <html> <head> <style> body {     -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;} }    style> head> <body> body> html>