Учебник HTML 5. Статья «Цвета»


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


В настоящее время цвета могут быть указаны с помощью следующих методов:

  • Шестнадцатеричные значения цвета.
  • RGB и RGBA значения цвета.
  • HSL и HSLA значения цвета.
  • Названия цветов (ключевые слова).

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

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

#RRGGBB, где:
  • RR (красный)
  • GG (зеленый)
  • BB (синий)

Все значения должны быть между 00 и FF. Например, значение #0000FF отображается как синий, потому что компонент BB установлен в его самое высокое значение (

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


Допускается сокращать шестнадцатеричные числа до трех символов, если каждое из трех двухзначных чисел содержит одинаковые символы. Например, #0000FF можно записывать как #00F.


Пример использования шестнадцатеричных значений:

<p style = color: #FF0000">Я абзац красного цвета</p> <!-- задаем цвет текста шестнадцатеричным значением --> 
<p style = color: #EE82EE">Я абзац фиолетового цвета</p> <!-- задаем цвет текста шестнадцатеричным значением --> 
<p style = color: #FF0">Я абзац желтого цвета</p> <!-- задаем цвет текста шестнадцатеричным значением --> 

RGB цвета

Значения цвета RGB поддерживается во всех основных браузерах. Значение цвета RGB задается в следующем порядке:

R(красный), G(зеленый), B (синий). Каждый параметр определяет интенсивность цвета и может быть целым числом от 0 до 255 .

Например, значение rgb(0,255,0) отображается как зеленый, так как параметр зеленого установлен в максимальное точке (255), а красный и зелёный установлены в 0. Записывается это следующим образом:

<p style = color: rgb(0,255,0)">Я абзац зеленого цвета</p> <!-- задаем цвет текста значением rgb --> 
<p style = color: rgb(255,0,0)">Я абзац красного цвета</p> <!-- задаем цвет текста значением rgb --> 
<p style = color: rgb(255,165,0)">Я абзац оранжевого цвета</p> <!-- задаем цвет текста значением rgb --> 

RGBA цвета

RGBA является более современным методом задания цвета, где:

  • R означает Red (красный)
  • G означает Green (зеленый)
  • B означает Blue (синий)
  • A означает Alpha (степень смешивания с фоном)

Этот метод отличается от RGB тем, что он добавляет альфа-канал, который позволяет задать уровень прозрачности со значениями от 0 до 1, где:

  • 0 — цвет невидимый.
  • 1 — цвет непрозрачный.
<p style = color: rgba(255, 0, 0, 0.1)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.1 --> 
<p style = color: rgba(255, 0, 0, 0.2)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.2 --> 
<p style = color: rgba(255, 0, 0, 0.3)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.3 --> 
<p style = color: rgba(255, 0, 0, 0.4)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.4 --> 
<p style = color: rgba(255, 0, 0, 0.5)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.5 --> 
<p style = color: rgba(255, 0, 0, 0.6)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.6 --> 
<p style = color: rgba(255, 0, 0, 0.7)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.7 --> 
<p style = color: rgba(255, 0, 0, 0.8)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.8 --> 
<p style = color: rgba(255, 0, 0, 0.9)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.9 --> 

HSL цвета

К еще одному методу задания цвета относится HSL. HSL это аббревиатура, которая объединяет в себе первые буквы трех признаков:

  • Hue — тон.
  • Saturation — насыщенность.
  • Lightness — осветленность.

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

hsl(от 0° до 360°, от 0 до 100%, от 0% до 100%), где:

Первое значение – это тон, который указывается в градусах от 0° до 360°. Градусы соответствуют цвету на круге оттенков, изображенном ниже:

Красный цвет соответствует значениям — 0° и 360°, желтый — 60°, зеленый — 120°, голубой — 180°, синий — 240°, фиолетовый — 300° и т. д.

Второе значение (насыщенность) — определяет, насколько чистым является цвет и указывается в процентах от 0% до 100%, где 0% — полное отсутствие насыщенности (тусклый серый), 100% — чистый и яркий цвет.

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

Например:

<p style = color: hsl(0,100%,50%)">Я абзац красного цвета</p> <!-- задаем цвет текста значением hsl --> 

Ниже приведено изображение, где для каждого блока задано свое значение hsl:

Рис. 16б Пример использования значений hsl

HSLA цвета

По аналогии с RGB, HSL поддерживает прозрачность с помощью добавления альфа-канала, который задает уровень прозрачности со значениями от 0 до 1 (от невидимого до полностью непрозрачного).

Данный формат задания цвета называется HSLA, давайте рассмотрим его применение:

<p style = color: hsla(0,100%,50%,0.1)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.1 --> 
<p style = color: hsla(0,100%,50%,0.2)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.2 --> 
<p style = color: hsla(0,100%,50%,0.3)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.3 --> 
<p style = color: hsla(0,100%,50%,0.4)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.4 --> 
<p style = color: hsla(0,100%,50%,0.5)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.5 --> 
<p style = color: hsla(0,100%,50%,0.6)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.6 --> 
<p style = color: hsla(0,100%,50%,0.7)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.7 --> 
<p style = color: hsla(0,100%,50%,0.8)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.8 --> 
<p style = color: hsla(0,100%,50%,0.9)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.9 --> 

Имена цветов

Кроме вышеуказанных способов задания цвета, существуют и предопределённые (стандартные) цвета, которые вы можете применять к элементам. Ранее мы уже рассматривали примеры с предопределёнными цветами, а полный перечень Вы можете найти в этом разделе.

Пример:

ЦветHEXRGBИмя
#FF0000rgb(255,0,0)Red
#00FF00rgb(0,255,0)Green
#0000FFrgb(0,0,255)Blue


Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Используя полученные знания составьте предложение в котором каждое слово начинается с новой строчки, а цвет слова соответствует цвету радуги:

Практическое задание № 11.

Нюанс: для выполнения задания вы можете задавать цвет любым методом, но задание считается выполненным если хотя бы один раз было использовано шестнадцатеричное значение, значение RGB, значение HSL и предопределённый цвет

.

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


basicweb.ru

Как сделать в html текст цветным: несколько простых способов

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

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

После прочтения статьи вы с легкостью сможете оперировать полученными знаниями и преображать дизайн текстовой информации на ваших веб-ресурсах! Итак, приступим к делу.

Раскрасим буквы разными цветами

В первую очередь изменить цвет как отдельных букв, так и целого предложения можно при помощи тега html <font>. Хоть это и слегка устаревший элемент, его иногда используют разработчики и поддерживают все браузеры. При помощи <font> можно определить стиль шрифта, его цвет и размер. Так, при запуске этой строки изменится внешний вид заглавной буквы:

<h3><font size=»7″ color=»blue» face=»Calibri»>П</font>ервая буква текущего предложения станет большой и синей</h3>

Более известным и распространенным среди верстальщиков приемом для видоизменения текста является css. Для установки определенного цвета шрифта в основном используют свойство color. Его описывают для конкретного тега в спецификациях стиля оформления.

Ниже приведен пример форматирования внешнего вида заголовка страницы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Видоизменение цветовой палитры при помощи css</title>
  <style>
   h3 {
    color: orange; 
    text-align:  center;
   }
    p {
     text-align:  center;
    }
  </style>
 </head>
 <body>
  <h3>Размещенный по центру оранжевый заголовок</h3>
   <p>Текст первого абзаца</p>
 </body>
</html>

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Видоизменение цветовой палитры при помощи css</title> <style> h3 { color: orange; text-align: center; } p { text-align: center; } </style> </head> <body> <h3>Размещенный по центру оранжевый заголовок</h3> <p>Текст первого абзаца</p> </body> </html>

Запустите данный код в браузере, и вы заметите, каким образом поменялось оформление названия первого абзаца.

Отмечу, что свойство text- align отвечает за горизонтальное выравнивание текста в пределах единицы языка html, в которой он задан.

Таблица цветовых кодов для html

Если в коде примера вы видите такие обозначения, как, например,

#F8F8FF, не пугайтесь. Это всего лишь указание цвета. Такой «шифр» используется для упрощения работы с цветовой палитрой при написании веб-страниц.

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

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

Название RGB Код для html
PeachPuff 255 218 185 #FFDAB9
LemonChiffon 255 250 205 #FFFACD
Azure 240 255 255 #F0FFFF
VioletRed 208 32 144 #D02090

Думаю, после просмотра выше представленной таблицы у некоторых может возникнуть вопрос: «А что такое RGB?». И это правильно!

RGB – это одна из разновидностей цветовых моделей, с помощью которой графическим элементам задаются оттенки.

Она относится к аддитивной группе моделей, так как каждый возможный оттенок получается путем добавления значений к черному (который задается цифрами 0 0 0). Таким образом, при изменении значений каждого канала R (отвечает за красный), G (зеленый) и B (синий) изменяется и выходной цвет.

Выделение текста при помощи фона

Как я уже упоминал, одну из прошлых статей я полностью посвятил теме задания фона и фоновых изображений. А сейчас я затрону только основные моменты.

Так, задний план лучше всего задавать через элементы css. Для этого чаще всего используют универсальное свойство background. С его помощью можно форматировать одновременно 5 параметров фона: задание картинки или цвета, позиции, повторов или прокручивание вместе с содержимым страницы.

Теперь дополним предыдущий пример полученными знаниями:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style>
    body {
          background:#F0FFFF;
    }
   h3 {
    color: orange; 
    text-align:  center;
   }
    p {
     text-align:  center;
     background: #FFDAB9;
    }
  </style>
 </head>
 <body>
  <h3>Размещенный по центру оранжевый заголовок</h3>
   <p>Текст первого абзаца</p>
 </body>
</html>

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Пример</title> <style> body { background:#F0FFFF; } h3 { color: orange; text-align: center; } p { text-align: center; background: #FFDAB9; } </style> </head> <body> <h3>Размещенный по центру оранжевый заголовок</h3> <p>Текст первого абзаца</p> </body> </html>

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

Надеюсь вам была полезна данная публикация. Не забывайте радовать меня, подписываясь на обновления блога. И конечно же делитесь ссылкой с друзьями. Пока-пока!

С уважением, Роман Чуешов

Загрузка…

Прочитано: 477 раз

romanchueshov.ru

Как изменять цвет текста в html документе

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

Для этого вам может понадобиться все та же таблица html цветов, в которой каждый цвет представлен как html кодом цвета, так и буквенным написанием.

В тему:

По умолчанию цвет текста в html документе черный. Изменить цвет текста можно двумя способами. В начале мы рассмотрим, как изменить цвет текста с помощью нам уже известного тега <body></body>. Для этого в этот тег мы добавим еще один атрибут text=»». Он будет выглядеть следующим образом <body text=»#0000CD»>. Т. е. с помощью text=» #0000CD» мы задали цвет текста и в данном случае он будет синим. Весь код нашей страницы будет иметь следующий вид:

<html>
<head>
<title>Моя первая страница</title>
</head>
<body text="#0000CD">Вот вы и создали свою первую web страницу!!!</body>
</html>

Должен вам сказать, что в данном случае задавая цвет текста через тег <body></body> мы установили такой текст для всего документа. Т. е. какой бы текст вы не написали на вашей странице, в данном случае он будет отображаться синим цветом.

Задать цвет только отдельному отрезку текста можно при помощи тега <font> и обязательного закрывающего его тега </font>. Поэтому если вам нужно изменить цвет текста не во всем документе, а в каком-то конкретном месте, то можно использовать этот тег.

К примеру, давайте изменим цвет текста слов, «web страницу!!!» которые присутствуют в нашем документе. Для этого нужно наши слова «web страницу!!!» поместить между тегами, следующим образом: <font>web страницу!!!</font>, а для того чтобы изменить цвет текста необходимо еще в тег <font> дописать следующий атрибут color=»», все это будет выглядеть следующим образом: <font color=»#B22222″>web страницу!!!</font>

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

<html>
<head>
<title>Моя первая страница</title>
</head>
<body text="#0000CD">Вот вы и создали свою первую 
<font color="#B22222">web страницу!!!</font>
</body>
</html>

Это не все атрибуты тега <font>, при помощи данного тега можно задавать не только цвет текста в html документе, но так же размер и вид шрифта текста. Как это сделать мы рассмотрим в следующих уроках по html.

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

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

Подробности

Обновлено: 04 Сентябрь 2013

Создано: 13 Январь 2010

Просмотров: 66015

webmastermix.ru