Задание цвета в html

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

Для задания цвета достаточно указать его название, например: red, green, blue. Рассмотрим небольшой пример:

Посмотрим результат в браузере:

Текст в первом абзаце стал зеленым, во втором – красным, а в третьем – фиолетовым. Всего существует 16 названий основных цветов и 130 дополнительных. Полный список цветов вы можете посмотреть в таблице цветов html.

Этот способ обозначения цвета очень прост, но весьма ограничен. Поэтому для того чтобы изменить цвет в html – коде, чаще используют шестнадцатеричное число перед которым стоит знак решетки (#), например:

С помощью такого обозначения можно получить более 16 миллионов цветов и их оттенков! Получить код цвета можно с помощью конвертера цветов HEX, который имеется на сайте, или воспользовавшись палитрой цветов в том же Photoshop. Рассмотрим пример и запишем следующий код:

Сохраним файл и посмотрим на результат:

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

Теперь вы научились изменять цвет текста в html и в конце урока предлагаю повторить все атрибуты тега , и задать тексту сразу несколько параметров, а именно: шрифт, размер и цвет. Запишите пример:

Как всегда не забудем сохранить файл и посмотрим результат:

Читайте также:  Как выбрать кофеварку капельного типа для дома

Тексту применились все параметры, которые мы задали и все отображается корректно. Сам код думаю пояснять не стоит, так как все теги и атрибуты мы рассматривали в предыдущих уроках, и вы их уже знаете.

На данной странице представлены специальные ключевые слова, которые можно применять для обозначения того или иного цвета на интернет сайтах, и при разработке на языках программирования для Web, таких как HTML, CSS, JavaScript, Flash, и др.

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

Таблица HTML цветов

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

Также стоит отметить, что имея 147 различных ключевых слов (17 старых и 130 новых), не все цвета в этом списке уникальны. Некоторые имена обозначают один и тот же цвет. Так, например, и Grey, и Gray обозначают 50-процентный серый цвет #808080, а Magenta — это лишь синоним HTML цвета Fuchsia, и ссылается на шестнадцатеричный код цвета #FF00FF.

В CSS было три основных способа задания цвета, но в CSS3 появилось ещё два. Вот о том, как можно задавать цвета в CSS3, мы и поговорим в этой статье.

Первый способ: по названию

Чтобы задать цвет, мы можем просто написать его название на английском языке. Например:

body <
color: blue; // синий цвет
color: green; // зелёный цвет
>

Второй способ: hex

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

Читайте также:  Полезные проги для айфона

body <
color: #0000FF; // синий
color: #00FF00; // зелёный
color: #FF0000; // красный
color: #000000; // чёрный
color: #FFFFFF; // белый
>

Третий способ: RGB

RGB(Red Green Blue) — это способ, где мы задаём три цвета — красный, зелёный и синий, смешивая которые можно получить разные сочетания цветов. Т.е это почти то же, что и hex, только формат другой. Значения здесь задаются от до 255

body <
color: rgb(0,0,255); // синий
color: rgb(0,255,0); // зелёный
color: rgb(255,0,0); // красный
color: rgb(0,0,0); // чёрный
color: rgb(255,255,255); // белый
>

Четвёртый способ: RGBA

RGBA(Red Green Blue Alpha) — это способ, который появился в CSS3. Он абсолютно идентичен RGB за исключением только того, что в последнем параметре мы можем указать прозрачность. Прозрачность может принимать значения от 0(полностью прозрачный) до 1(полностью непрозрачный)

body <
color: rgba(210, 255, 0, .5); // полупрозрачный жёлтый
>

Как видите, мы можем пропускать ведущий 0 в прозрачности.

Пятый способ: HSL

HSL(Hue Saturation Lightness) — это способ, в котором цвет определяется 3 параметрами: оттенком, насыщенностью и яркостью.

Оттенок цвета указывается в градусах поворота цветового круга(0 градусов — красный, 120 — зелёный, 240 — голубой и т.д.)

Насыщенность указывается в процентах. По мере понижения процентов цвет будет блекнуть
Яркость цвета также указывается в процентах(0% — тёмный, 100% — светлый)

body <
color: hsl(0, 30%, 50%);
color: hsl(120, 100%, 80%);
color: hsl(240, 100%, 50%);
>

HSLA отличается от HSL точно тем же, чем отличается RGB от RGBA, так что рассматривать его подробно я не буду, а просто приведу пример

Советы:

  • Считается, что преимуществом схемы hsl перед rgb являются более природные естественные цвета, так что советую использовать именно этот формат.
  • hsl интуитивно понятен. Т.е., взглянув на цифры, можно сразу представить, каким будет цвет.
  • hsl, hsla и rgba поддерживают браузеры IE 9.0+, Opera 10.0+, Firefox 3.0+. Если вы хотите иметь поддержку в более старых браузерах, то используйте старые форматы задания цвета.
Читайте также:  Где настройки для разработчиков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 1 ):

    Круто, спасибо за статью

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2019 Русаков Михаил Юрьевич. Все права защищены.