Как разукрасить html страницу

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

В создании этой статьи участвовала наша опытная команда редакторов и исследователей, которые проверили ее на точность и полноту.

Команда контент-менеджеров wikiHow тщательно следит за работой редакторов, чтобы гарантировать соответствие каждой статьи нашим высоким стандартам качества.

Количество просмотров этой статьи: 207 629.

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

Как подготовиться к редактированию HTML-кода

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

Добавьте заголовок «html» в документ. Все параметры стиля страницы, включая цвет фона, должны находиться между тегами :

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

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

, вы введете необходимую информацию.

• Все, что будет заключено внутри элемента «body» в CSS, повлияет на всю страницу.
• Пропустите этот шаг, если хотите создать градиентный фон.

Как создать однотонный фон

Добавьте свойство «background-color» в элемент «body». Введите background-color: в фигурных скобках внутри элемента «body». Должен получиться следующий код:

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

body  background-color: #d24dff; > 

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

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

Используйте «background-color», чтобы задать цвет фона других элементов (заголовков, абзацев и тому подобных). Например, чтобы задать цвет фона основного заголовка () или абзаца (

), напишите следующий код: [2] X Источник информации

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> 

Как создать градиентный фон

Запомните основной синтаксис этого процесса. Чтобы создать градиент, необходимо знать две величины: начальную точку/угол и ряд цветов, которые будут переходить один в другой. Можно выбрать несколько цветов, чтобы они переходили друг в друга; также можно задать направление или угол перехода. [3] X Источник информации

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

• В различных браузерах функции градиента реализованы по-разному, поэтому нужно добавить несколько версий кода.

Создайте направленный градиент. Если вы не хотите, чтобы градиент шел по вертикали, укажите направление перехода цветов. Для этого введите следующий код между тегами : [4] X Источник информации

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» (вправо), чтобы поэкспериментировать с разными направлениями градиента.

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

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> 

Как создать меняющийся фон

Добавьте свойство «animation» в элемент «body». Введите следующий код после «body

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

• Верхняя строка текста предназначена для браузеров на основе Chromium, а нижняя строка текста — для других браузеров.

Добавьте цвета в свойство «animation». Воспользуйтесь правилом «@keyframes», чтобы задать цвета фона, которые будут циклически меняться, а также время, в течение которого каждый цвет будет отображаться на странице. Не забудьте ввести разный код для различных браузеров. Введите следующий код под закрывающей фигурной скобкой элемента «body»: [6] X Источник информации

@-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-элементов

При работе с веб-страницей часто нужно каким-то образом обогатить разметку — привнести в неё некоторое визуальное разнообразие. Это может диктоваться требованиями дизайна или вашими личными предпочтениями. Вариантов, как разнообразить страницу и сделать её более эстетичной много: от гарнитуры шрифта до динамики поведения контента при прокрутке страницы.

Один из основных графических приёмов — изменение цвета фона или текста на странице. Современные браузеры предоставляют возможность гибко выбрать цвета фона или их сочетания и указать нужное значение в удобном вам формате.

Элементы, которые могут иметь цвет

Практически любой элемент HTML-разметки может иметь свой цвет. Он будет применяться по-разному в зависимости от того, что конкретно вы хотите раскрасить. Например, если вам нужно поменять цвет текста html , используйте атрибут color, а для рамки вокруг него — border-color.

Эти атрибуты вы можете задавать как напрямую в разметке, используя HTML-атрибуты, так и в CSS-файле, который подключаете к разметке. Как это сделать, читайте в блоге cloud.timeweb.com .

При работе с цветом в HTML все элементы можно условно разделить на две группы: текстовые и блочные. В текстовых вы указываете цвета текста и его оформления, а в блочных— цвета фона и границ.

Текстовые элементы

К текстовым элементам относится, например, параграф или поле ввода. Для таких элементов вы можете использовать несколько атрибутов для работы с визуальным оформлением. Рассмотрим, как изменить цвет текста.

color. Этот атрибут используется для того, чтобы задать цвет текста и его оформлению, заданному через text-decoration, — подчёркивание, надчёркивание и т. д.

background-color. Кроме изменения цвета текста, часто требуется поменять ещё и цвет фона. Как раз для таких случаев используется этот атрибут.

text-shadow. Иногда дизайн текста на странице предполагает наличие тени. Если её цвет отличается от стандартного, задайте его с помощью атрибута text-shadow.

text-decoration-color. Когда вы задаёте цвет для текстового элемента в атрибуте color, цвет применяется и для сопутствующего оформления. Но если нужно, например, задать подчёркиванию цвет отличный от основного, используйте этот атрибут.

caret-color. В специфических случаях вам может потребоваться стилизовать ещё и поля ввода (input, textarea) или элементы с атрибутом contenteditable. Этот атрибут позволяет раскрасить каретку — вертикальный курсор, который появляется в полях.

Блочные элементы

В блочных элементах, таких как div, кроме вышеперечисленных правил вы можете гибко задавать цвета фона и границ вне зависимости от контента, который содержится внутри блока.

background-color — добавляет заливку на всю площадь блочного элемента. Этот атрибут поможет, если вы не знаете, как изменить цвет фона в html на всей странице сайта. Просто добавьте к стилям body атрибут, в значении укажите нужный цвет.

outline-color задаёт цвет контура вокруг элемента, если указан тип контура outline-style.

border-color — позволяет указать цвет для границ по всему периметру блочного элемента. Чтобы задать цвета каждой отдельной стороны — верхней, нижней, правой, левой, — используйте атрибуты border-top-color, border-bottom-color, border-right-color, border-left-color соответственно.

Прочие элементы

Кроме элементов HTML, которые перечислены выше, вы можете также работать с визуальным оформлением страницы, используя такие технологии как SVG, Canvas или WebGL.

Как изменить цвет текста в CSS

Чтобы использовать цвет в разметке, в первую очередь нужно определиться с тем, как задавать его так, чтобы браузер мог понять, как красить элемент. В основном то, в какой форме вы указываете цвет, зависит от того, насколько он необычный — существует разница в использовании просто синего цвета или сочетания красного, синего и зелёного в разных пропорциях, да ещё и с прозрачностью.

Ключевые слова CSS

Самый простой способ указать цвет — использовать ключевое слово. Оно представляет из себя просто английское название цвета или цвета с оттенком — green или lightgrey, например. Так, чтобы использовать для текста чёрный цвет, напишите color: black, и браузер сам «поймёт», какой цвет ему отображать.

Полный список резервированных слов вы найдёте в документации .

Модель RGB

RGB — аббревиатура из первых букв слов red, green, blue. Когда вы задаёте цвет в этой модели вы кодируете нужный вам цвет из смешивания трёх цветов — красного, зелёного, синего. Как и в обычной палитре, смешивание цветов в разной пропорции будет создавать для вас новые сочетания и оттенки.

Все три значения RGB задаются целыми числами в диапазоне от 0 до 255 или в процентах от 0 до 100. Например, когда вы укажете rgb(0, 0, 255), в браузере увидите синий цвет.

Современные браузеры также поддерживают RGB-модель, в которой вы также можете задать прозрачность цвета. Такая запись выглядит так же, как и rgb, но добавляется ещё один аргумент — прозрачность в процентах. Синий с прозрачностью 50% записывается так — rgba(0, 0, 255, 0.5).

Hex-представление

Цвет в формате HEX — это шестнадцатеричное представление RGB. Обозначение цвета состоит из трёх групп шестнадцатеричных цифр, каждая отвечает за красный, зелёный и синий соответственно. Например, вы можете указать значение #00ff00, на выходе получите зелёный.

Если каждая из трёх групп содержит одинаковые символы, например, #2211dff, вы можете использовать сокращённую запись — #21f.

Система HSL

HSL — аббревиатура из слов Hue (оттенок), Saturation (Насыщенность) и Lightness (яркость). В этой системе цвет не зависит от смешивания трёх параметров, они независимы. Поэтому очень просто сделать цвет насыщеннее или уменьшить яркость, сохраняя тот же оттенок.

Источник