Как задать цвет фона в HTML
Соавтором этой статьи является Jessica Andzouana, наш постоянный соавтор. Постоянные соавторы wikiHow работают в тесном сотрудничестве с нашими редакторами, чтобы обеспечить максимальную точность и полноту статей.
Количество просмотров этой статьи: 218 587.
В этой статье:
Из этой статьи вы узнаете, как изменить цвет фона веб-страницы, если отредактировать ее HTML-код.
Метод 1 из 4:
Как подготовиться к редактированию HTML-кода
- Перейдите на страницу https://www.w3schools.com/colors/colors_picker.asp в веб-браузере компьютера.
- Выберите базовый цвет, который хотите использовать, в разделе «Pick a Color» (Выбрать цвет).
- Выберите оттенок в правой части страницы.
- Запишите код, который отобразится справа от выбранного оттенка.
- HTML-документ можно открыть в Notepad++ или Блокноте (Windows), а также в TextEdit или BBEdit (Mac).
Добавьте заголовок «html» в документ. Все параметры стиля страницы, включая цвет фона, должны находиться между тегами :
DOCTYPE html> html> head> style> style> head> html>
Создайте пустую строку между тегами «style». На этой строке, которая должна находиться под тегом
, вы введете необходимую информацию.
Добавьте элемент «body». Введите следующий код между тегами :
body >
- Все, что будет заключено внутри элемента «body» в CSS, повлияет на всю страницу.
- Пропустите этот шаг, если хотите создать градиентный фон.
Метод 2 из 4:
Как создать однотонный фон
Найдите заголовок «html». Он должен быть в верхней части документа.
Добавьте свойство «background-color» в элемент «body». Введите background-color: в фигурных скобках внутри элемента «body». Должен получиться следующий код:
body background-color: >
- Обратите внимание, что в этом коде необходимо использовать слово «color», а не «colour».
Добавьте нужный цвет фона в свойство «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 из 4:
Как создать градиентный фон
Найдите заголовок «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>
Метод 4 из 4:
Как создать меняющийся фон
Найдите заголовок «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>
Как задать фон блоков?
Как разделить страницу на блоки (css) и задать фон каждого из блоков? Нужно разделить страницу на блоки и задать фон каждого из них. Как это сделать?
Отслеживать
51.2k 86 86 золотых знаков 266 266 серебряных знаков 505 505 бронзовых знаков
задан 2 окт 2012 в 16:24
425 1 1 золотой знак 4 4 серебряных знака 12 12 бронзовых знаков
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Как разделить страницу на блоки, это вы уже сами смотрите. Чтобы определить бэкграунд для каждого отдельного блока, воспользуйтесь одним из CSS-правил:
background-color:#fff; background-image:url("pic.jpg"); background: url("pic.jpg") #fff; /* если вдруг картинка будет недоступной */ Отслеживать
ответ дан 2 окт 2012 в 16:41
2,539 3 3 золотых знака 22 22 серебряных знака 33 33 бронзовых знака
Вообще, как создавать и работать с «блоками» (чаще это называют слои, если я правильно понял, о чём вы) — это целая отдельная тема. Если вкратце — чтобы сделать слой, создайте блочный элемент —
У него вы можете задать любые свойства, необходимые вам (ширину/высоту, цвет, положение на экране и т.п.). Делается это через свойства CSS Например
А задать фон можно, как уже написали выше, одним из свойтв:
background-color: yellow;
background-image: url(ссылка на изображение)
ещё можно на всякий случай написать свойство background: no-repeat; чтобы фон не повторялся
Более подробно о любых свойствах CSS и HTML можно узнать тут
Как изменить цвет фона в HTML? Примеры С#
В этой статье мы будем использовать примеры C#, чтобы показать различные способы изменения цвета фона в файлах HTML с помощью библиотеки классов Aspose.HTML.
Изменить цвет фона на веб-странице легко с помощью свойства CSS background-color. Есть несколько способов установить значение этого свойства. Вы можете использовать встроенный, внутренний или внешний CSS, а значения цвета HTML могут быть указаны как стандартные имена цветов или со значениями HEX, RGB, RGBA, HSL и HSLA. В приведенных ниже примерах мы будем использовать цветовые коды HEX и RGB, поскольку они используются чаще всего.
Дополнительные сведения об использовании цветовых кодов HTML вы найдете в статье Цветовые коды HTML. В разделе Background Color вы найдете примеры кода HTML о том, как изменить цвет фона.
Изменить цвет фона определенного элемента
Чтобы изменить цвет фона для HTML-элемента с помощью Aspose.HTML API, выполните несколько шагов:
- Загрузите существующий файл HTML.
- Определите, для какого элемента вы хотите изменить цвет фона, и найдите этот элемент, чтобы установить для него атрибут стиля. Используйте метод GetElementsByTagName( name ) элемента Element, который возвращает HTML-элемент с заданным именем тега.
- Установите атрибут style со свойством background-color : используйте свойство Style элемента HTMLElement класс.
- Сохраните измененный HTML-документ.
Вы можете установить или изменить цвет фона для различных элементов HTML, таких как
, … , или . В следующем примере C# показано изменение цвета фона для первого элемента
:
C# example
1using Aspose.Html; 2using System.IO; 3. 4 5 // Prepare output path for document saving 6 string savePath = Path.Combine(OutputDir, "change-background-color-p-inline-css.html"); 7 8 // Prepare path to source HTML file 9 string documentPath = Path.Combine(DataDir, "file.html"); 10 11 // Create an instance of an HTML document 12 var document = new HTMLDocument(documentPath); 13 14 // Find the first paragraph element to set a style attribute 15 var paragraph = (HTMLElement)document.GetElementsByTagName("p").First(); 16 17 // Set the style attribute with background-color property 18 paragraph.Style.BackgroundColor = "#e5f3fd"; 19 20 // Save the HTML document to a file 21 document.Save(Path.Combine(savePath));JavaScript code
1script> 2 // Find the paragraph element to set a style attribute 3 var paragraph = document.getElementsByTagName("p")[0]; 4 5 // Set the style attribute with background-color property 6 paragraph.style.backgroundColor = "#e5f3fd"; 7script>На рисунке показаны результаты изменения цвета фона для первого абзаца в файле HTML с использованием встроенного CSS:
Изменить цвет фона всей веб-страницы
Вы можете изменить цвет фона с помощью встроенного атрибута style или с помощью внутреннего CSS.
Изменить цвет фона с помощью встроенного CSS
Если вы хотите изменить цвет всего HTML-документа, вы должны использовать свойство background-color атрибута style в открывающем теге раздела .
C# example
1using Aspose.Html; 2using System.IO; 3. 4 5 // Prepare output path for document saving 6 string savePath = Path.Combine(OutputDir, "change-background-color-inline-css.html"); 7 8 // Prepare path to source HTML file 9 string documentPath = Path.Combine(DataDir, "file.html"); 10 11 // Create an instance of an HTML document 12 var document = new HTMLDocument(documentPath); 13 14 // Find the body element to set a style attribute 15 var body = (HTMLElement)document.GetElementsByTagName("body").First(); 16 17 // Set the style attribute with background-color property 18 body.Style.BackgroundColor = "#e5f3fd"; 19 20 // Save the HTML document to a file 21 document.Save(Path.Combine(savePath));JavaScript code
1script> 2 // Find the body element to set a style attribute 3 var body = document.getElementsByTagName("body")[0]; 4 5 // Set style attribute with background-color property 6 body.style.backgroundColor = "#e5f3fd"; 7script>You can download the complete examples and data files from GitHub.
Изменить цвет фона с помощью внутреннего CSS
Тот же результат раскрашивания фона может быть достигнут с помощью внутреннего CSS, как показано в следующем примере кода HTML:
1head> 2style> 3 body 4 background-color: rgb(229, 243, 253); 5 > 6style> 7head>Примечание. Имейте в виду, что использование атрибута style переопределяет любой стиль, установленный в HTML-теге или во внешней таблице стилей.
В следующем примере C# показано, как реализовать внутренний CSS для изменения цвета фона для всего HTML-файла. Сделайте несколько шагов:
- Загрузите существующий файл HTML.
- Найдите элемент и удалите свойство background-color из атрибута style. Примечание. Если цвет фона задается с помощью встроенного атрибута style , этот шаг обязателен, поскольку использование атрибута style переопределяет как внутренний, так и внешний CSS.
- Создайте элемент и назначьте значение background-color для элемента .
- Найдите в документе элемент и добавьте в него элемент .
- Сохраните измененный HTML-документ.
C# example
1using Aspose.Html; 2using System.IO; 3. 4 5 // Prepare output path for document saving 6 string savePath = Path.Combine(OutputDir, "change-background-color-internal-css.html"); 7 8 // Prepare path to source HTML file 9 string documentPath = Path.Combine(DataDir, "file.html"); 10 11 // Create an instance of an HTML document 12 var document = new HTMLDocument(documentPath); 13 14 // Find the body element 15 var body = (HTMLElement)document.GetElementsByTagName("body").First(); 16 17 // Remove the background-color property from the style attribute 18 body.Style.RemoveProperty("background-color"); 19 20 // Create a style element and assign the background-color value for body element 21 var style = document.CreateElement("style"); 22 style.TextContent = "body < background-color: rgb(229, 243, 253) >"; 23 24 // Find the document head element and append style element to the head 25 var head = document.GetElementsByTagName("head").First(); 26 head.AppendChild(style); 27 28 // Save the HTML document 29 document.Save(Path.Combine(savePath));JavaScript code
1script> 2 // Find the body element 3 var body = document.getElementsByTagName("body")[0]; 4 5 // Remove the background-color property from style attribute 6 body.style.removeProperty("background-color"); 7 8 // Create a style element and assign the background-color value for body element 9 var style = document.createElement("style"); 10 style.textContent = "body < background-color: rgb(229, 243, 253) >"; 11 12 // Find the document head element and append style element to the head 13 var head = document.getElementsByTagName("head")[0]; 14 head.appendChild(style); 15script>На рисунке показаны два фрагмента HTML-файла до (а) и после (б) изменения цвета фона для всего документа:
Aspose.HTML предлагает бесплатные Веб-приложения HTML, которые представляют собой онлайн-коллекцию конвертеров, слияний, загрузчиков, инструментов SEO, генераторов HTML-кода и многое другое. Приложения работают в любой операционной системе с веб-браузером и не требуют установки дополнительного программного обеспечения. Это быстрый и простой способ эффективно и действенно решать ваши задачи, связанные с HTML.
Цвет фона страницы html
Цвет фона — это один из важных элементов любой интернет-страницы. Главная задача фона — формировать у пользователя настроение и привлекать внимание, делать восприятие информации на сайте удобным и легким.Атрибуты фона для веб-страниц — тег и bgcolor.
Меняем цвет фона и шрифта в HTML коде сайта
В данной статье речь пойдет о том, как же самостоятельно изменить цвет шрифта и фона в HTML-коде, т.е. на странице сайта. Проще всего сделать это при помощи CSS.
Первое, что необходимо запомнить, цвета в CSS указываются также, как и в HTML. А если подробнее, то вы можете указывать их как в шестнадцатеричном значении, к примеру #ff3355, так и указывать название цвета (red, blue, green и прочие).
А теперь давайте рассмотрим более подробно свойства. Начать стоит со свойства color, которое задает основной цвет или цвет переднего плана любого элемента. К примеру, если вы хотите задать синий цвет для текста, форма записи будет оформление текста .
Существует также атрибут background-color, который отвечает за параметры фона. С его помощью можно изменить цвет фона. К примеру, если вы хотите задать фон текста красного цвета, форма записи будет оформление текста .
Вставить фоновое изображение для элемента, поможет свойство background-image. Если одновременно для элемента задать цвет фона, то от не будет отображаться до того момента, пока фоновое изображение не загрузиться полностью.
Задать начальное положения для фонового изображения, поможет свойство background-position. Свойство имеет два значения, положение может быть как по горизонтали, так и вертикали. Кроме того, положение может быть задано в процентах, пикселях и других удобных для вас единицах.