HTML Цвета

Цвета HTML задаются с использованием предварительно определенных названий цветов или значений RGB, HEX, HSL, RGBA, HSLA.

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

В HTML цвет можно указать с помощью названия цвета:

Background Color — Цвет фона

Вы можете установить цвет фона для элементов HTML:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Пример

Hello World

Lorem ipsum.

Text Color — Цвет текста

Вы можете установить цвет текста:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Пример

Hello World

Lorem ipsum.

Ut wisi enim.

Border Color — Цвет границы

Вы можете установить цвет границ:

Hello World

Hello World

Hello World

Пример

Hello World

Hello World

Hello World

Значения цвета

В HTML цвета также могут быть указаны с использованием значений RGB, HEX, HSL, RGBA и HSLA:

То же, что и название цвета «Tomato»:

То же, что и название цвета «Tomato», но на 50% прозрачнее:

Пример

RGB Значение

В HTML цвет можно указать как значение RGB, используя эту формулу:

Каждый параметр (red, green и blue) определяет интенсивность цвета от 0 до 255.

Например, rgb(255, 0, 0) отображается как красный, потому что красный установлен на самое высокое значение (255), а остальные установлены на 0.

Чтобы отобразить черный цвет, установите все цветовые параметры на 0, как здесь: rgb(0, 0, 0).

Для отображения белого установите все параметры цвета на 255, как здесь: rgb(255, 255, 255).

Экспериментируйте, смешивая значения RGB ниже:

Пример

Оттенки серого часто определяются с использованием равных значений для всех трёх источников света:

Пример

HEX значение

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

Где rr ( red ), gg ( green ) и bb ( blue ) шестнадцатеричные значения от 00 до ff (такие же, как десятичные 0-255).

Например, #ff0000 отображается как красный, потому что красный установлен на самое высокое значение (ff), а остальные установлены на самое низкое значение (00).

Пример

Оттенки серого часто определяются с использованием равных значений для всех трёх источников света:

Пример

HSL значение

В HTML цвет можно указать с помощью оттенка (hue), насыщенности (saturation) и яркости (lightness) — HSL в форме:

Оттенок (hue) — это градус цветового круга от 0 до 360. 0 — красный, 120 — зеленый, 240 — синий.

Насыщенность (saturation) — это процентное значение, 0% означает оттенок серого, а 100% — это полный цвет.

Яркость (lightness) также в процентах, 0% — черный, 50% — ни светлый, ни темный, 100% — белый.

Пример

Насыщенность

Насыщенность можно описать как интенсивность цвета.

100% чистый цвет, без оттенков серого

50% — это 50% серый, но вы всё равно можете видеть цвет.

0% полностью серый, вы больше не видите цвет.

Пример

Яркость

Яркость цвета можно описать как количество света, которое вы хотите дать цвету, где 0% означает отсутствие света (черный), 50% означает 50% света (ни темно, ни светло), 100% означает полную яркость (белый цвет).

Пример

Оттенки серого часто определяются путем установки оттенка и насыщенности на 0 и регулировки яркости от 0% до 100%, чтобы получить более темные/более светлые оттенки:

Пример

RGBA значение

Цветовые значения RGBA являются расширением цветовых значений RGB с альфа-каналом, который определяет непрозрачность для цвета.

Значение цвета RGBA указывается с:

Альфа-параметр — это число от 0,0 (полностью прозрачное) до 1,0 (совсем не прозрачное):

Пример

HSLA значение

Значения цвета HSLA являются расширением значений цвета HSL с альфа-каналом, который определяет непрозрачность для цвета.

Значение цвета HSLA задается с помощью:

Альфа-параметр — это число от 0,0 (полностью прозрачное) до 1,0 (совсем не прозрачное):

Пример

Вопросы для самоконтроля

• Как задать цвета на веб-странице?
• Какие названия цветов используются на веб-страницах?
• Сколько стандартных названий цветов поддерживается в HTML?
• С помощью какого свойства можно установить цвет фона HTML-страницы?
• С помощью какого свойства можно установить цвет тексту HTML-страницы?
• С помощью какого свойства можно установить цвет границы HTML-элемента?
• С помощью каких значений цвета можна установить цвета на веб-странице?
• Как расшифровывается RGB-значение цвета?
• Что определяет каждый параметр в RGB-значении цвета?
• Какое минимальное и максимальное значение каждого параметра в RGB-цвете?
• Какие должны быть значения каждого из источников света при установлении оттенков серого в RGB-цвете?
• В какой форме указывается цвет с помощью шестнадцатеричного (HEX) значения?
• Какое минимальное и максимальное значение каждого параметра в HEX-цвете?
• Какие должны быть значения каждого из источников света при установлении оттенков серого в HEX-цвете?
• Как расшифровывается HSL-значение цвета?
• Какое минимальное и максимальное значение каждого параметра в HSL-цвете?
• Какие должны быть значения каждого из источников света при установлении оттенков серого в HSL-цвете?
• Для чего нужен альфа-канал при установлении значений цвета RGBA и HSLA?

ПАЛИТРА ЦВЕТОВ

ПРИСОЕДИНЯЙТЕСЬ!

Связь с админом

Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:

Топ Учебники

Топ Справочники

Топ Примеры

Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

Источник

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

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

Для начала отметим, что цвета можно задавать в трех форматах:

• Название цвета (red, blue, green, . );
• Шестнадцатеричный формат (#104A00, #0F0, . );
• Формат rgba (rgba(0,0,0,0.5), . );

На нашем сайте представлена полная палитра и названия html цветов для сайта, где можно выбрать подходящий цвет.

Способ 1. Через html тег

font [color value">Цвет"] [face value">Шрифт"] [size value">Размер"]>

html> body> Обычный шрифт font color css">blue">Синий шрифт/font> font color css">red" size css">4">Красный шрифт большего размера/font> /body> /html>

На странице преобразуется в следующее:

Новая версия стандарта HTML5 не поддерживает тег . Но все современные браузеры понимают и еще видимо будут долго понимать. Этот тег широко распространён в интернете. Что впрочем легко объяснить его доступностью и простотой.

Способ 2. Через атрибут style

html> body> p style css">color:#0000FF">Синий цвет текста/p> div style css">color:#00FF00">Зеленый цвет текста/div> /body> /html>

Если текст не изменяет свой цвет, то можно попробовать воспользоваться инструкцией декларацией !important:

p style css">color:#0000FF;!important">Синий цвет текста/p>

Стоит очищать кэш браузера после каждого внесения изменения в файлы стилей .css.

Способ 3. Через стили CSS

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

html> head> style> .primer1< color: #FF00AA; > .primer2< color: #5511AA; > /style> /head> body> div class css">primer1">Пример №1. Значение color:#FF00AA;/div> div class css">primer2">Пример №2. Значение color:#5511AA;/div> /body> /html>

Классы primer1 и primer2 можно применить к любым другим html тегам.

Источник

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

Изменение цвета текста в HTML выполняется довольно просто (впрочем, как и почти все остальные действия с HTML). Но, прежде чем рассказать об этом, я немного пройдусь по вопросу безопасных цветов.

Что такое безопасный цвет HTML

Постараюсь быть кратким. Суть в том, что современные компьютеры для кодирования цвета используют довольно большие числа. И, соответственно, в этих больших числах можно закодировать очень большое количество оттенков. Но беда в том, что многие видеокарты и мониторы не могут правильно отобразить ВСЕ эти оттенки. Поэтому, например, цвет, код которого FFFFAA, на вашем мониторе может выглядеть иначе, чем на мониторе другого пользователя. Также декодирование цветов может отличаться в зависимости от операционной системы пользователя (Windows может декодировать цвет не так, как, например, Mac).

Чтобы этого избежать, веб-мастера стараются использовать так называемые безопасные цвета. То есть цвета, которые с высокой долей вероятности будут одинаково отображаться на всех мониторах.

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

Надо сказать, что в наше время это уже не так значимо, поскольку почти у всех современные мониторы, видеокарты и браузеры. Поэтому, конечно, вы можете использовать и другие цвета, “НЕ безопасные”. Однако без особой надобности этого всё-таки лучше не делать, и работать по возможности с безопасными цветами.

Как поменять цвет текста в HTML

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

А здесь я расскажу только об одном старом добром способе, который использует тег цвета текста в HTML — тег (точнее, этот тег может изменять не только цвет, но об этом как-нибудь в другой раз).

С одной стороны, этот тег признан нежелательным стандартами HTML4 и XHTML. Но с другой стороны, он поддерживается всеми браузерами, в том числе и устаревшими.

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

Тег может иметь несколько разных атрибутов. Для изменения цвета используется атрибут color .

Значение этого атрибута может быть введено одним из двух способов:

Следующий текст будет красным. Следующий текст будет тоже красным.

Значение атрибута лучше заключать в кавычки (хотя это и необязательно).

Цветовая модель RGB

В цветовой модели RGB обозначение цвета представляет собой шестизначное шестнадцатеричное число. Для обозначения кода цвета в HTML перед этим числом должен быть знак решётки (#).

Первые две цифры определяют насыщенность красного цвета (от 00 — нет красного, до FF — ярко-красный. Таким же образом определяется насыщенность для зелёного (следующие две цифры) и синего (последние две цифры). Таким образом формат числа, с помощью которого кодируется цвет, следующий:

Где RR — красная составляющая, GG — зелёная, BB — синяя.

Чёрный цвет — это отсутствие “свечения” всех составляющих — #000000, а белый цвет — это наибольшая насыщенность RGB — #FFFFFF.

Также можно использовать сокращённую запись, когда вместо двух цифр используется одна:

Следующий текст будет тоже красным.

В этом случае формат записи числа будет таким:

ВНИМАНИЕ!
Некоторые бразуеры не поддерживают такой формат записи цветового кода.

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

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

В стандартах HTML4 и XHTML определены следующие названия цветов (в скобках указаны RGB-коды):

aqua (#00FFFF) gray (#808080) navy (#000080) silver (#C0C0C0) black (#FFFFFF) green (#008000) olive (#808000) teal (#008080) blue (#0000FF) lime (#00FF00) purple (#800080) yellow (#FFFF00) fuchsia (#FF00FF) maroon (#800000) red (#FF0000) white (#FFFFFF)

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

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

Источник