Как сделать цвет страницы в html

Как добавить и изменить цвет фона в HTML. Часть 2

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

Цвет фона (HTML Codes)

В этой статье для примеров мы использовали цветовые коды (а именно шестнадцатеричные), чтобы добавить цвета к фону элементов нашей страницы. Но на самом деле есть несколько способов обозначить цвета фона. Давайте рассмотрим различные способы написания цветов в CSS.

Шестнадцатеричные коды цвета фона

Шестнадцатеричные коды — это наиболее популярный формат при добавлении цвета к элементам страницы в HTML. Шестнадцатеричный код представляет собой число, которому предшествует символ решетки (#).

Каждый шестнадцатеричный код содержит шесть символов, и каждая пара символов определяет интенсивность трех основных цветов (красного, зеленого и синего в указанном порядке) от 00 (самая низкая интенсивность) до FF (самая высокая).

Например, белый цвет имеет самую высокую интенсивность из всех трех цветов, поэтому его шестнадцатеричный код — #FFFFFF. У черного наоборот — самая низкая интенсивность среди всех цветов, или #000000.

Для выбора цвета мы рекомендуем использовать палитру цветов HTML , чтобы выбрать любой цвет из спектра, а затем просто скопировать код, который он выдаст.

Названия цветов фона

Шестнадцатеричные значения просты для понимания, но есть еще более простой способ добавить цвет в HTML: просто используйте название цвета.

Современные браузеры поддерживают 140 стандартных названий цветов HTML, включая простые, такие как Red, Green, Blue, Yellow, Orange. Существуют также более точные оттенки, такие как DarkRed, SpringGreen, SkyBlue, Khaki и Coral.

Когда вы найдете нужный цвет, используйте его в качестве значения свойства background-color (символ # не требуется):

Коды RGB цвета фона

Мы также можем создавать значения цвета HTML с нотацией RGB. Значения RGB позволяют нам указать значение цвета и его интенсивность.

Чтобы добавить цвет с помощью RGB, мы используем функцию CSS rgb(). Эта функция принимает три значения в скобках, каждое из которых определяет интенсивность красного, зеленого и синего цветов. Каждое значение представляет собой число от 0 до 255, где 0 — наименее интенсивный, а 255 — самый интенсивный.

Например, функция RGB для оранжевого цвета Solaris в CSS имеет вид rgb(255, 92, 53):

Цвет фона Значения HSL

Наконец, вы можете использовать значения HSL для установки цветов в CSS. HSL означает оттенок, насыщенность и яркость, который записывается с помощью функции hsl(). Синтаксис аналогичен RGB, за исключением того, что вы используете проценты для обозначения насыщенности оттенка.

Например, чтобы создать оранжевый цвет Solaris с HSL, используйте функцию hsl(12, 100%, 60%):

background-color : hsl (12, 100%, 60%);

Вы также можете указать значение альфа-канала с помощью функции hsl(), которая принимает дополнительное значение от 0 до 1 и устанавливает прозрачность цвета.

Как добавить прозрачность к цвету фона HTML

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

Добавление прозрачности с помощью RGBA

Вы можете установить уровень прозрачности с помощью функции CSS rgba(). «А» обозначает альфа-канал, который представляет уровень прозрачности цвета. Эта функция принимает одно дополнительное значение от 0 до 1, где 0 — полностью прозрачный, а 1 — полностью непрозрачный.

Вот как выглядит функция, если мы будем использовать оранжевый цвет Solaris с прозрачностью 75%:

background-color : rgba (255, 92, 53, 0.75);

Добавление прозрачности с помощью свойства opacity

Вы также можете использовать свойство opacity в CSS. Это свойство добавляется к элементу HTML (например, div или таблице) или атрибуту CSS (например, классу), чтобы сделать эти элементы частично или полностью прозрачными. Значения этого свойства находятся в диапазоне от 0 до 1, где 0 — полностью прозрачный, а 1 — полностью непрозрачный.

Ниже мы будем использовать две кнопки в качестве примера:

1. Определите элементы HTML, которые вы хотите сделать прозрачными

Если вы уже знаете, что хотите изменить, найдите это в своем HTML-коде. В нашем примере у нас есть две кнопки Bootstrap рядом. Нам нужно сделать так, чтобы пользователи нажимали только кнопку «submit», а кнопка «no thanks» осталась нетронутой.

Вот HTML:

Нам необходимо умен ьшить непрозрачность последней кнопки, чтобы она казалась деактивированной и вызывала меньше кликов. Чтобы добиться этого результата, мы будем использовать свойство opacity CSS после добавления класса к кнопке, которую мы изменим.

2. Добавьте класс к элементу, который вы хотите изменить

Далее мы назначим второй кнопке дополнительный класс CSS, чтобы отличать ее от первой. Мы добавим класс btn-secondary к кнопке, которую хотим уменьшить.

Вот как это выглядит:

3. Добавьте селектор класса в код CSS и примените свойство opacity

Теперь, когда вы создали новый класс, пришло время добавить его в код CSS. Чтобы сделать вторую кнопку прозрачной на 40%, мы будем использовать селектор класса .btn-secondary чтобы применить свойство opacity. Затем мы установим уровень непрозрачности на 0,4.

Как изменить цвет фона в 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, выполните несколько шагов:

1. Загрузите существующий файл HTML.
2. Определите, для какого элемента вы хотите изменить цвет фона, и найдите этот элемент, чтобы установить для него атрибут стиля. Используйте метод GetElementsByTagName( name ) элемента Element, который возвращает HTML-элемент с заданным именем тега.
3. Установите атрибут style со свойством background-color : используйте свойство Style элемента HTMLElement класс.
4. Сохраните измененный 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-файла. Сделайте несколько шагов:

1. Загрузите существующий файл HTML.
2. Найдите элемент и удалите свойство background-color из атрибута style. Примечание. Если цвет фона задается с помощью встроенного атрибута style , этот шаг обязателен, поскольку использование атрибута style переопределяет как внутренний, так и внешний CSS.
3. Создайте элемент и назначьте значение background-color для элемента .
4. Найдите в документе элемент и добавьте в него элемент .
5. Сохраните измененный 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.

Осваиваем свойство background color CSS

В этой статье мы рассмотрим свойства CSS , связанные с цветом. Прочитав ее, вы узнаете:

• как на веб-странице изменить цвет текста;
• как добавить цвет для фона или фоновое изображение;
• как добавить тени;
• как изменять прозрачность.

Цвет текста

Вы наверняка уже знаете о свойстве, используемом для изменения цвета текста – это свойство color . Мы рассмотрим различные способы указания цвета.

Указание названия цвета

Самый простой и удобный способ указать цвет — это ввести его название. Единственным недостатком этого метода является то, что существует только шестнадцать так называемых « стандартных » цветов.

На приведенном ниже рисунке показано шестнадцать цветов, которые можно использовать, введя их название:

Шестнадцать названий цветов, которые можно использовать в CSS

Чтобы изменить цвет всех заголовков на коричневый, нужно ввести:

Заголовок отображается коричневым цветом

Шестнадцатеричные обозначения

Шестнадцать цветов — это мало, если учесть, что большинство мониторов могут отображать шестнадцать миллионов цветов. Но представьте, если бы нужно было задать название каждому из шестнадцати миллионов оттенков .

К счастью, в CSS предусмотрено несколько способов выбора цвета. Первый способ — шестнадцатеричное значение. Вот как выглядит название цвета в шестнадцатеричном формате: #FF5A28 . Это комбинация букв и цифр, которые указывают цвет.

Всегда нужно начинать с указания символа хэша (#) , за которым следует шесть букв или цифр от 0 до 9 и от A до F .

Эти буквы или цифры работают парами. Первые две цифры указывают количество красного, две следующие — зеленого, а две последние — голубого. Смешивая эти значения ( которые являются компонентами Red-Green-Blue в цвете ), можно получить любой цвет.

Таким образом, #000000 соответствует черному цвету, а #FFFFFF — белому.

Некоторые графические программы, такие как Photoshop , Gimp и Paint.NET , позволяют указывать цвета в шестнадцатеричном формате.

Вот, например, как можно применить белый цвет, указанный в шестнадцатеричном формате, к абзацам:

При этом допускается сокращенная запись: можно указать цвет с помощью только трех символов. Например: #FA3 эквивалентно #FFAA33 .

Метод RGB

Red-Green-Blue , сокращенно обозначаемый как « RGB ». Как и в шестнадцатеричном коде, чтобы выбрать цвет, необходимо определить количество красного, зеленого и синего.

Это намного практичнее, и с помощью простой программы для рисования, такой как Paint , можно найти нужный цвет. Вот действия, которые необходимо выполнить:

1. Зайдите в меню « Пуск », найдите в нем программу Paint и запустите ее.
2. Перейдите в раздел « Редактировать цвета », как показано на рисунке, приведенном ниже.
3. Откроется окно. В поле справа переместите ползунки, чтобы выбрать нужный цвет. Предположим, нужно вывести заголовки

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

В уроке Основы HTML мы рассмотрели самые главные html теги, которые являются обязательными и присутствуют в любом html документе.

В данном уроке мы рассмотрим, как с помощью одного из этих тегов задать цвет фона html документа.

Материалы по теме:

• 4 подхода к созданию фона HTML страницы
• Как вставлять картинки и производить их позиционирование в html
• Как сделать ссылку в HTML — виды ссылок — изображение ссылка

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

Цвет фона всего html документа, задается в теге . Теперь сделаем фон нашего документа, например желтым. Для этого в теге необходимо прописать атрибут bgcolor=»#FFFF99″. Прописывается данный атрибут следующим образом: . Таким образом, код нашей html странички с желтым фоном будет выглядеть так:

    Вот вы и создали свою первую web страницу. 

Создайте html страничку, содержащую код, приведенный выше, и посмотрите в браузере, какой она будет иметь цвет фона. Для этого откройте ваш текстовый редактор блокнот скопируйте туда код представленный выше. Затем сохраните текстовый документ с расширением .html, как это сделать мы рассматривали в уроке основы html.

После этого запустите созданный html документ при помощи браузера, и вы увидите, что фон страницы стал бледно желтым. Атрибут bgcolor=»», который задает цвет фона, содержит в кавычках значение «#FFFF99» — это код цвета, который мы хотим задать в качестве фона, полный список таких кодов вы можете посмотреть в таблице html цветов.

Впереди этого кода всегда идет знак решетка “#”, а затем сочетание букв и цифр соответствующее определенному цвету или оттенку. Если вам понадобится узнать значение какого либо цвета или оттенка которого нет в таблице html цветов то это вы можете например сделать с помощью того же графического редактора Photoshop.

Для этого запустите Photoshop и в панели инструментов щелкните по значку выбор цвета (смотрите рисунок ), затем появится палитра цветов в которой с помощью ползунков вы можете выбрать тот или иной цвет, а его код будет отображен в низу, на рисунке оно обведено красным квадратом.

Скопировав это значение и вставив его в кавычки, вы измените цвет фона вашей странички. Только помните, что впереди значений должен находиться знак решетка #, например #dce8ff. Кроме этого цвет фона html документа можно устанавливать просто словами, например если в нашем атрибуте bgcolor вместо «#FFFF99» прописать «red» т. е. то цвет фона будет красным. Буквенное написание цветов вы также сможете найти в таблице htm кодов цветов.

Материал подготовлен порталом: webmastermix.ru

Рекомендуем ознакомиться:

• Заголовок в HTML
• Параграфы и выравнивание текста в HTML
• HTML цвета
• Как изменять цвет текста в html документе
• Фон в CSS