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

Как изменить цвет текста в HTML с использованием CSS?

Для изменения цвета текста для определённого абзаца или слова можно присвоить ему класс, а затем в CSS файле задать для этого класса свойство color.

Выглядеть это будет так:

HTML

PHP

<p class=”color-text”>Пример текста</div>

1	<pclass=”color-text”>Примертекста<div>

CSS

PHP

.color-text {
color:#555555;
}

1 2 3

.color-text{ color#555555; }

Вместо color-text вы можете указать свой класс.

Если вам нужно изменить цвет текста для элемента на сайте у которого уже есть класс или идентификатор, то можно вычислить его название и указать в CSS.

Как вычислить класс или идентификатор рассказано в этой статье: Как определить ID и класс элемента на странице?

Если вы не хотите лезть в CSS файл чтобы внести изменения, то можно дописать CSS стили прямо в HTML коде станицы, воспользовавшись тегом <style>.

Для этого:

1. 1.Находи вверху HTML страницы тег </head>. Если ваш сайт работает на CMS, то этот фрагмент кода находится в одном из файлов шаблона. Например: header.php, head.php или что-то наподобие этого в зависимости от CMS.
2. 2.Перед строкой </head> добавляем теги <style>…</style>.

3. 3.Внутри этих тегов задаём те CSS свойства, которые нам нужны. В данном случае color:

   PHP

   <style>
   .color-text {
   color:#555555;
   }
   </style>

   1 2 3 4 5

   <style> .color-text { color#555555; } </style>

Этот способ подходит если вам нужно изменить цвет сразу для нескольких элементов на сайте.

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

RGBA

Обычно по дизайну полупрозрачным должен быть только фон элемента, а текст непрозрачным для сохранения его читабельности. Свойство opacity
здесь не подходит, потому что текст внутри элемента также будет частично прозрачным. Лучше всего использовать формат RGBA, частью которого является альфа-канал или иными словами значение прозрачности. В качестве значения пишется rgba
, затем в скобках через запятую перечисляются значения красной, синей и зелёной компоненты цвета. Последним идёт прозрачность, которая задаётся от 0 до 1 (рис. 1), при этом 0 означает полную прозрачность, а 1 непрозрачность цвета..

Рис. 1. Синтаксис применения rgba

В примере 2 показано применение формата RGBA для создания полупрозрачного фона.

Пример 2. Полупрозрачный фон

HTML5
CSS3
IE 9+
Cr
Op
Sa
Fx

rgbaГоббс одним из первых осветил эту проблему с позиций психологии.

Результат данного примера показан на рис. 2. Значение непрозрачности для фона установлено 90%.

Рис. 2. Полупрозрачный фон и непрозрачный текст

Свойство CSS RGBa позволяет задать фоновый цвет с альфа-каналом (т.е. заливать блоки полупрозрачным цветом).

Разумеется, в CSS есть свойство opacity, однако основной его недостаток: все дочерние элементы внутри прозрачного блока будут также наследовать его прозрачность.

Чаще всего используют заливку фона элемента одно-пиксельным PNG24 и фиксят прозрачность в IE6, или ещё фон делают прозрачным через css opacity. Текст позиционируют отдельно уже в другом элементе, но это, на мой взгляд, не совсем удобно…

С помощью RGBa
решение выглядит следующим образом:

1. Допустим, нам нужен синий фон с прозрачностью 50%.

А не поддерживать его будут IE6–8, Opera 9.x, Mozilla Firefox 2.x

2. Для IE можно постараться и сделать более изящно:

.element{ background : transparent ; filter:progid :DXImageTransform .Microsoft .gradient(startColorstr= #990000ff , endColorstr= #990000ff ) ; zoom: 1 ; }

Примечание: Цвет в фильтре задается 8 числами. Первые 2 числа это степень прозрачности: FF — полностью непрозрачный, 00 — прозрачный. Следующие 6 чисел привычное обозначение HTML-цвета.

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

В CSS есть три способа изменить прозрачность элемента:с
помощью свойства opacity ,с
помощью функции rgba() ,с
помощью функции hsla() .

1. Свойство opacity

Свойство opacity позволяет сделать любой элемент веб-страницы частично или полностью прозрачным. Данное свойство изменяет прозрачность элементов, для которых установлено фоновое изображение (картинка) или задан фон с помощью цвета или градиента. Если элемент, для которого применено свойство opacity , содержит внутри себя другие элементы, то они также изменят свою прозрачность.
Свойство opacity принимает значения в диапазоне от 0 (полностью прозрачный) до 1 (непрозрачный), например:

H1 {color: #CD6829;}
div {
background: #CDD6DB;
opacity: .3;
}
Рис. 1. Прозрачность элементов с помощью opacity

2. Функция rgba()

Цветовая модель RGBA создает цветовой оттенок путем смешивания в необходимых пропорциях красного (Red)
, зеленого (Green)
и синего (Blue)
цветов, а альфа-канал (Alpha)
отвечает за степень прозрачности цвета. В отличие от свойства opacity , для блока, содержащего другие элементы, функция rgba() изменит прозрачность только блока.

3. Функция hsla()

Функция hsla() , параметры которой означают тон (Hue)
, насыщенность (Saturation)
, яркость (Lightness)
и альфа-канал (Alpha)
, также позволяет задать полупрозрачный цвет.

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

0/360° — красный цвет

60° — желтый цвет

120° — зеленый цвет

180° — голубой цвет

240° — синий цвет

270° — фиолетовый цвет

300° — пурпурный цвет
.

Чтобы получить черный цвет, нужно присвоить показателям тона, насыщенности и яркости нулевое значение — hsla(0, 0%, 0%, 1) . Белый цвет получается при 100%-ном значении яркости hsla(0, 0%, 100%, 1) , а серый цвет — при нулевом значении насыщенности hsla(0, 0%, 50%, 1) .

Инструмент для определения значений цветов онлайн

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

Кликните по области палитры чтобы определить значение цвета

• RGB:
• HSV:
• HEX:

Здесь вы можете двигать мышкой указатель  и получать значения цветов в формате RGB и HEX (в шестнадцатеричном коде)

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

Надеюсь, что данная статья была для вас полезной. Подбирайте цвета и разукрашивайте ваши сайты на свой вкус. Только не перестарайтесь 🙂

Хорошего вам настроения! До встречи в следующих статьях!

С уважением Юлия Гусарь

Тег html изменения цвета текста через атрибут style

Html атрибут style совместим абсолютно с любыми тегами: абзаца <p>; курсивного шрифта <em>; жирного шрифта <strong>; подчеркивания текста <u>; маркированного <ul> и нумерованного <ol> списков, и их составляющих <li>; таблицы <table> и составляющих <tr> и <td>.

Но помимо атрибута style, нам для изменения цвета текста необходимо знать html коды цветов, и в этом нам поможет специальная таблица html цветов с кодами 147 различных цветовых оттенков.

Переходим на сайт этой таблицы ColorScheme.Ru и сразу сохраняем в закладки своего браузера, если в дальнейшем собираетесь менять цвет текста в своих статьях на блоге.

А теперь давайте творить и вытворять. Начнем с абзаца, который мы не хотим видеть в стандартном черном цвете. Верстаем.

Изменение цвета текста абзаца <p>

В открытый тег абзаца <p> будем вставлять атрибут style и html код самого цвета, который нам нужен color: #FF0000 (я выбрал Red — красный). Для этого заходим на сайт ColorScheme.Ru и копируем код необходимого цвета:

Теперь собираем атрибут изменения цвета текста и вставляем в открытый тег абзаца:

<p style=»color: #FF0000″> (кавычки должны быть именно такого вида — » «, иначе цвет не поменяется)

Верстаем сам абзац:

<p style=»color: #FF0000″> Итак, у нас остался не оформленным раздел ”Рубрики”. По умолчанию на сайте он выглядит обычным списком. Что же можно сделать и как оформить рубрики, чтобы было приятно глазу посетителей, и они заметив этот раздел, переходили по рубрикам и на статьи, подольше находясь на блоге?</p>

Смотрим как будет выглядеть на блоге:

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

Изменение цвета текста списков <ul> и <ol>

Верстаем, к примеру маркированный список, код необходимого цвета также берем в таблице html цветов:

<li>Специалист по контекстной рекламе</li>

<li>Дизайн и Photoshop</li>

<li>Копирайтинг</li>

<li>Видео монтаж</li>

<li>Вёрстка сайтов</li>

<li>Специалист по продвижению Вконтакте</li></ul>

На сайте будет в таком виде:

А на примере нумерованного списка изменим цвета строк:

<li style=»color: #006400″>Специалист по контекстной рекламе</li>

<li style=»color: #C71585″>Дизайн и Photoshop</li>

<li style=»color: #FFD700″>Копирайтинг</li>

<li style=»color: #FF4500″>Видео монтаж</li>

<li style=»color: #191970″>Вёрстка сайтов</li>

<li style=»color: #8B4513″>Специалист по продвижению Вконтакте</li></ol>

На сайте список будет отображаться таким образом:

Изменение цвета текста таблицы <table>

Верстаем таблицу с изменением цвета текста всей таблицы:

<table style=»color: #FF0000″><tr><td>ячейка 1</td>

<td>ячейка 2</td>

<td>ячейка 3</td></tr>

<tr><td>ячейка 4</td>

<td>ячейка 5</td>

<td>ячейка 6</td></tr>

<tr><td>ячейка 7</td>

<td>ячейка 8</td>

<td>ячейка 9</td></tr></table>

На блоге получаем таблицу в таком виде:

ячейка 1	ячейка 2	ячейка 3
ячейка 4	ячейка 5	ячейка 6
ячейка 7	ячейка 8	ячейка 9

Теперь изменим цвет текста построчно:

<table><tr style=»color: #FF0000″><td>ячейка 1</td>

<td>ячейка 2</td>

<td>ячейка 3</td></tr>

<tr style=»color: #FFA500″><td>ячейка 4</td>

<td>ячейка 5</td>

<td>ячейка 6</td></tr>

<tr style=»color: #191970″><td>ячейка 7</td>

<td>ячейка 8</td>

<td>ячейка 9</td></tr></table>

И на сайте увидим такую таблицу:

ячейка 1	ячейка 2	ячейка 3
ячейка 4	ячейка 5	ячейка 6
ячейка 7	ячейка 8	ячейка 9

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

<table><tr><td style=»color: #FF0000″>ячейка 1</td>

<td style=»color: #FFA500″>ячейка 2</td>

<td style=»color: #191970″>ячейка 3</td></tr></table>

На блоге увидим в таком варианте:

ячейка 1

ячейка 2

ячейка 3

По такому же принципу меняется цвет текста в открытых тегах жирного, курсивного шрифта и подчеркивания текста.

Применяйте на своих блогах атрибут style для изменения цвета текста в своих публикациях, там, где это действительно необходимо.

Успехов вам и до новых встреч!

HSL значение

В HTML цвет можно задать с помощью оттенка, насыщенности и легкости (HSL) в форме:

HSL (оттенок, насыщенность, легкость)

Hue-это степень на цветном колесе от 0 до 360. 0-красный, 120-зеленый, 240-синий.

Насыщенность представляет собой процентное значение, 0% означает оттенок серого, а 100%-полный цвет.

Легкость также процент, 0% черный, 50% не является ни светлым, ни темным, 100% белый

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

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

Насыщенность может быть охарактеризована как интенсивность цвета.

100% является чистым цветом, не оттенки серого

50% является 50% серый, но вы все еще можете увидеть цвет.

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

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

Легкость

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

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

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

Имена цветов, поддерживаемые всеми обозревателями

Все современные браузеры поддерживают следующие 140 цветовых имен (нажмите на название цвета, или шестнадцатеричное значение, чтобы увидеть цвет как фон-цвет вместе с различными цветами текста):

Color Name	HEX	Color	Shades	Mix
AliceBlue	#F0F8FF		Shades	Mix
AntiqueWhite	#FAEBD7		Shades	Mix
Aqua	#00FFFF		Shades	Mix
Aquamarine	#7FFFD4		Shades	Mix
Azure	#F0FFFF		Shades	Mix
Beige	#F5F5DC		Shades	Mix
Bisque	#FFE4C4		Shades	Mix
Black	#000000		Shades	Mix
BlanchedAlmond	#FFEBCD		Shades	Mix
Blue	#0000FF		Shades	Mix
BlueViolet	#8A2BE2		Shades	Mix
Brown	#A52A2A		Shades	Mix
BurlyWood	#DEB887		Shades	Mix
CadetBlue	#5F9EA0		Shades	Mix
Chartreuse	#7FFF00		Shades	Mix
Chocolate	#D2691E		Shades	Mix
Coral	#FF7F50		Shades	Mix
CornflowerBlue	#6495ED		Shades	Mix
Cornsilk	#FFF8DC		Shades	Mix
Crimson	#DC143C		Shades	Mix
Cyan	#00FFFF		Shades	Mix
DarkBlue	#00008B		Shades	Mix
DarkCyan	#008B8B		Shades	Mix
DarkGoldenRod	#B8860B		Shades	Mix
DarkGray	#A9A9A9		Shades	Mix
DarkGrey	#A9A9A9		Shades	Mix
DarkGreen	#006400		Shades	Mix
DarkKhaki	#BDB76B		Shades	Mix
DarkMagenta	#8B008B		Shades	Mix
DarkOliveGreen	#556B2F		Shades	Mix
DarkOrange	#FF8C00		Shades	Mix
DarkOrchid	#9932CC		Shades	Mix
DarkRed	#8B0000		Shades	Mix
DarkSalmon	#E9967A		Shades	Mix
DarkSeaGreen	#8FBC8F		Shades	Mix
DarkSlateBlue	#483D8B		Shades	Mix
DarkSlateGray	#2F4F4F		Shades	Mix
DarkSlateGrey	#2F4F4F		Shades	Mix
DarkTurquoise	#00CED1		Shades	Mix
DarkViolet	#9400D3		Shades	Mix
DeepPink	#FF1493		Shades	Mix
DeepSkyBlue	#00BFFF		Shades	Mix
DimGray	#696969		Shades	Mix
DimGrey	#696969		Shades	Mix
DodgerBlue	#1E90FF		Shades	Mix
FireBrick	#B22222		Shades	Mix
FloralWhite	#FFFAF0		Shades	Mix
ForestGreen	#228B22		Shades	Mix
Fuchsia	#FF00FF		Shades	Mix
Gainsboro	#DCDCDC		Shades	Mix
GhostWhite	#F8F8FF		Shades	Mix
Gold	#FFD700		Shades	Mix
GoldenRod	#DAA520		Shades	Mix
Gray	#808080		Shades	Mix
Grey	#808080		Shades	Mix
Green	#008000		Shades	Mix
GreenYellow	#ADFF2F		Shades	Mix
HoneyDew	#F0FFF0		Shades	Mix
HotPink	#FF69B4		Shades	Mix
IndianRed	#CD5C5C		Shades	Mix
Indigo	#4B0082		Shades	Mix
Ivory	#FFFFF0		Shades	Mix
Khaki	#F0E68C		Shades	Mix
Lavender	#E6E6FA		Shades	Mix
LavenderBlush	#FFF0F5		Shades	Mix
LawnGreen	#7CFC00		Shades	Mix
LemonChiffon	#FFFACD		Shades	Mix
LightBlue	#ADD8E6		Shades	Mix
LightCoral	#F08080		Shades	Mix
LightCyan	#E0FFFF		Shades	Mix
LightGoldenRodYellow	#FAFAD2		Shades	Mix
LightGray	#D3D3D3		Shades	Mix
LightGrey	#D3D3D3		Shades	Mix
LightGreen	#90EE90		Shades	Mix
LightPink	#FFB6C1		Shades	Mix
LightSalmon	#FFA07A		Shades	Mix
LightSeaGreen	#20B2AA		Shades	Mix
LightSkyBlue	#87CEFA		Shades	Mix
LightSlateGray	#778899		Shades	Mix
LightSlateGrey	#778899		Shades	Mix
LightSteelBlue	#B0C4DE		Shades	Mix
LightYellow	#FFFFE0		Shades	Mix
Lime	#00FF00		Shades	Mix
LimeGreen	#32CD32		Shades	Mix
Linen	#FAF0E6		Shades	Mix
Magenta	#FF00FF		Shades	Mix
Maroon	#800000		Shades	Mix
MediumAquaMarine	#66CDAA		Shades	Mix
MediumBlue	#0000CD		Shades	Mix
MediumOrchid	#BA55D3		Shades	Mix
MediumPurple	#9370DB		Shades	Mix
MediumSeaGreen	#3CB371		Shades	Mix
MediumSlateBlue	#7B68EE		Shades	Mix
MediumSpringGreen	#00FA9A		Shades	Mix
MediumTurquoise	#48D1CC		Shades	Mix
MediumVioletRed	#C71585		Shades	Mix
MidnightBlue	#191970		Shades	Mix
MintCream	#F5FFFA		Shades	Mix
MistyRose	#FFE4E1		Shades	Mix
Moccasin	#FFE4B5		Shades	Mix
NavajoWhite	#FFDEAD		Shades	Mix
Navy	#000080		Shades	Mix
OldLace	#FDF5E6		Shades	Mix
Olive	#808000		Shades	Mix
OliveDrab	#6B8E23		Shades	Mix
Orange	#FFA500		Shades	Mix
OrangeRed	#FF4500		Shades	Mix
Orchid	#DA70D6		Shades	Mix
PaleGoldenRod	#EEE8AA		Shades	Mix
PaleGreen	#98FB98		Shades	Mix
PaleTurquoise	#AFEEEE		Shades	Mix
PaleVioletRed	#DB7093		Shades	Mix
PapayaWhip	#FFEFD5		Shades	Mix
PeachPuff	#FFDAB9		Shades	Mix
Peru	#CD853F		Shades	Mix
Pink	#FFC0CB		Shades	Mix
Plum	#DDA0DD		Shades	Mix
PowderBlue	#B0E0E6		Shades	Mix
Purple	#800080		Shades	Mix
RebeccaPurple	#663399		Shades	Mix
Red	#FF0000		Shades	Mix
RosyBrown	#BC8F8F		Shades	Mix
RoyalBlue	#4169E1		Shades	Mix
SaddleBrown	#8B4513		Shades	Mix
Salmon	#FA8072		Shades	Mix
SandyBrown	#F4A460		Shades	Mix
SeaGreen	#2E8B57		Shades	Mix
SeaShell	#FFF5EE		Shades	Mix
Sienna	#A0522D		Shades	Mix
Silver	#C0C0C0		Shades	Mix
SkyBlue	#87CEEB		Shades	Mix
SlateBlue	#6A5ACD		Shades	Mix
SlateGray	#708090		Shades	Mix
SlateGrey	#708090		Shades	Mix
Snow	#FFFAFA		Shades	Mix
SpringGreen	#00FF7F		Shades	Mix
SteelBlue	#4682B4		Shades	Mix
Tan	#D2B48C		Shades	Mix
Teal	#008080		Shades	Mix
Thistle	#D8BFD8		Shades	Mix
Tomato	#FF6347		Shades	Mix
Turquoise	#40E0D0		Shades	Mix
Violet	#EE82EE		Shades	Mix
Wheat	#F5DEB3		Shades	Mix
White	#FFFFFF		Shades	Mix
WhiteSmoke	#F5F5F5		Shades	Mix
Yellow	#FFFF00		Shades	Mix
YellowGreen	#9ACD32		Shades	Mix

❮ Назад
Дальше ❯

Изменения цвета текста средствами HTML

К счастью в HTML есть специальный тег с атрибутом color, в котором можно указать нужный цвет текста.

PHP

<font color=»red»>Красный текст</font>

1	<font color=»red»>Красныйтекст<font>

Значение цвета можно задавать несколькими способами:

• При помощи кодового названия (Например: red, black, blue)
• В шестнадцатиричном формате (Например: #000000, #ccc)
• В формате rgba (Например: rgba(0,0,0,0.5))

Более подробно о способах задания цветов и перечень их значений описан в этой статье: Изменение цвета шрифта в CSS. Коды цветов HTML и CSS

Если вы ещё не знаете как определить значение цвета на сайте, то вам сюда

Таким образом вы можете изменить цвет у целого абзаца, слова или одной буквы, обернув то что вам нужно в тег <font>

Оттенки красного

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

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

Красный свет	HEX	RGB
	# 000000	RGB (0,0,0)
	# 080000	RGB (8,0,0)
	# 100000	RGB (16,0,0)
	# 180000	RGB (24,0,0)
	# 200000	RGB (32,0,0)
	# 280000	RGB (40,0,0)
	# 300000	RGB (48,0,0)
	# 380000	RGB (56,0,0)
	# 400000	RGB (64,0,0)
	# 480000	RGB (72,0,0)
	# +500000	RGB (80,0,0)
	# 580000	RGB (88,0,0)
	# 600000	RGB (96,0,0)
	# 680000	RGB (104,0,0)
	# 700000	RGB (112,0,0)
	# 780000	RGB (120,0,0)
	# 800000	RGB (128,0,0)
	# 880000	RGB (136,0,0)
	# 900000	RGB (144,0,0)
	# 980000	RGB (152,0,0)
	# A00000	RGB (160,0,0)
	# A80000	RGB (168,0,0)
	# B00000	RGB (176,0,0)
	# B80000	RGB (184,0,0)
	# C00000	RGB (192,0,0)
	# C80000	RGB (200,0,0)
	# D00000	RGB (208,0,0)
	# D80000	RGB (216,0,0)
	# E00000	RGB (224,0,0)
	# E80000	RGB (232,0,0)
	# F00000	RGB (240,0,0)
	# F80000	RGB (248,0,0)
	# FF0000	RGB (255,0,0)

Цвет текста

А можно ли сделать текст цветным? Да ради бога! Для этого существует атрибут <color>. Вот с этим колером мы сейчас и поработаем. Вообще, цвета можно задавать двумя разными способами. Первый — можно использовать словесное обозначение цвета: blue, black, yellow, green, white и т.д. А можно — и их цифровое обозначение, только не забывайте перед цифровым эквивалентом ставить «решетку» — «#»! Так, цвет blue (голубой) имеет свое числовое значение #0000ff, цвет red (красный) — значение #FF0000 и так далее. То есть если мы напишем:

или

Обе эти записи идентичны. Приведу значения некоторых цветов:

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

Название цвета	Color	Код	Цвет
aква	Aqua	#00FFFF
Черный	black	#000000
Синий	blue	#0000FF
Фуксия	fuchsia	#FF00FF
Серый	gray	#808080
Зеленый	green	#008000
Известь	lime	#00FF00
Темно-бордовый	maroon	#800000
Темно-синий	navy	#000080
Оливковый	olive	#808000
фиолетовый	purple	#800080
Красный	red	#FF0000
Серебряный	silver	#C0C0C0
Чирок	teal	#008080
Белый	white	#FFFFFF
желтый	yellow	#FFFF00

Ну а теперь от слов к практике?

Возьмем то же самое стихотворение, и поставим перед собой задачу:

1. Заголовок напишем шрифтом Comic Sans MS, дадим крупный размер в 7 пунктов, разместим по центру и зальем красным цветом.
2. Каждый куплет стихотворения раскрасим в свой цвет: первый — в синий, второй — в зеленый, ну а третий — в желтый. Причем, цвет первого куплета дадим в простом названии blue, второй и третий — в числовом эквиваленте зеленого и желтого цветов.
3. Первый куплет напишем шрифтом Impact
4. Размер второго куплета дадим размером в абсолютном размере 4 пункта
5. Размер третьего куплета дадим в относительном размере +1 пункт
6. Ну и автора задвинем в тег ADDRESS

Задача ясна? Ну тогда поехали!
Открываем наш незаменимый шаблон shablon.html и вставляем туда то, что нам надо:

Листинг 10. Стихотворение

  

  
  
    
      СТИХОТВОРЕНИЕ
    
    
      Это не сложно
      Это не важно
      Просто отважно
      В небо шагнуть
    
    
      И осторожно
      Там, где возможно
      Темного облака
      Край отогнуть.     
    
      Стертые лица,
      Забытые профили
      И многоточий упрямая нить.       Свет разливается
      И проявляется
      То, что уже никогда не забыть

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

Ирина Лео

Сохраним наш файл под именем «text4.html» и затем откроем этот файл в окне браузера:

Вот они, цвета радуги!

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

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

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

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

Название цвета	Red	Green	Blue	Цвет
alicemblue	F0	F8	FF	образец
antiquewhite	FA	EB	D7	образец
aqua	00	FF	FF	образец
aquamarine	7F	FF	D4	образец
azure	F0	FF	FF	образец
beige	F5	F5	DC	образец
bisque	FF	E4	C4	образец
black	00	00	00	образец
blanchedalmond	FF	EB	CD	образец
blue	00	00	FF	образец
blueviolet	8A	2B	E2	образец
brown	A5	2A	2A	образец
burlywood	DE	B8	87	образец
cadetblue	5F	9E	A0	образец
chartreuse	7F	FF	00	образец
chocolate	D2	69	1E	образец
coral	FF	7F	50	образец
cornflowerblue	64	95	ED	образец
cornsilk	FF	F8	DC	образец
crimson	DC	14	3C	образец
cyan	00	FF	FF	образец
darkblue	00	00	8B	образец
darkcyan	00	8B	8B	образец
darkgoldenrod	B8	86	0B	образец
darkgray	A9	A9	A9	образец
darkgreen	00	64	00	образец
darkkhaki	BD	B7	6B	образец
darkmagenta	8B	00	8b	образец
darkolivegreen	55	6B	2F	образец
darkorange	FF	8C	00	образец
darkochid	99	32	CC	образец
darkred	8B	00	00	образец
darksalmon	E9	96	7A	образец
darkseagreen	8F	BC	8F	образец
darkslateblue	48	3D	8B	образец
darkslategray	2F	4F	4F	образец
darkturquoise	00	CE	D1	образец
darkviolet	94	00	D3	образец
deeppink	FF	14	93	образец
deepskyblue	00	BF	FF	образец
dimgray	69	69	69	образец
dodgerblue	1E	90	FF	образец
firebrick	B2	22	22	образец
floralwhite	FF	FA	F0	образец
forestgreen	22	8B	22	образец
fushsia	FF	00	FF	образец
gainsboro	DC	DC	DC	образец
ghostwhite	F8	F8	FF	образец
gold	FF	D7	00	образец
goldenrod	DA	A5	20	образец
gray	80	80	80	образец
green	00	80	00	образец
greenyellow	AD	FF	2F	образец
honeydew	F0	FF	F0	образец
hotpink	FF	69	B4	образец
indiandred	CD	5C	5C	образец
indigo	4B	00	82	образец
ivory	FF	FF	F0	образец
khaki	F0	E6	8C	образец
lavender	E6	E6	FA	образец
lavenderblush	FF	F0	F5	образец
lawngreen	7C	FC	00	образец
lemonchiffon	FF	FA	CD	образец
ligtblue	AD	D8	E6	образец
lightcoral	F0	80	80	образец
lightcyan	E0	FF	FF	образец
lightgoldenrodyellow	FA	FA	D2	образец
lightpink	FF	B6	C1	образец
lightsalmon	FF	A0	7A	образец
lightseagreen	20	B2	AA	образец
lightscyblue	87	CE	FA	образец
lightslategray	77	88	99	образец
lightsteelblue	B0	C4	DE	образец
lightyellow	FF	FF	E0	образец
lime	00	FF	00	образец
limegreen	32	CD	32	образец
linen	FA	F0	E6	образец
magenta	FF	00	FF	образец
maroon	80	00	00	образец
mediumaquamarine	66	CD	AA	образец
mediumblue	00	00	CD	образец
mediumorchid	BA	55	D3	образец
mediumpurple	93	70	DB	образец
mediumseagreen	3C	B3	71	образец
mediumslateblue	7B	68	EE	образец
mediumspringgreen	00	FA	9A	образец
mediumturquoise	48	D1	CC	образец
medium violetred	C7	15	85	образец
midnightblue	19	19	70	образец
mintcream	F5	FF	FA	образец
mistyrose	FF	E4	E1	образец
moccasin	FF	E4	B5	образец
navajowhite	FF	DE	AD	образец
navy	00	00	80	образец
oldlace	FD	F5	E6	образец
olive	80	80	00	образец
olivedrab	6B	8E	23	образец
orange	FF	A5	00	образец
orengered	FF	45	00	образец
orchid	DA	70	D6	образец
palegoldenrod	EE	E8	AA	образец
palegreen	98	FB	98	образец
paleturquose	AF	EE	EE	образец
palevioletred	DB	70	93	образец
papayawhop	FF	EF	D5	образец
peachpuff	FF	DA	B9	образец
peru	CD	85	3F	образец
pink	FF	C0	CB	образец
plum	DD	A0	DD	образец
powderblue	B0	E0	E6	образец
purple	80	00	80	образец
red	FF	00	00	образец
rosybrown	BC	8F	8F	образец
royalblue	41	69	E1	образец
saddlebrown	8B	45	13	образец
salmon	FA	80	72	образец
sandybrown	F4	A4	60	образец
seagreen	2E	8B	57	образец
seashell	FF	F5	EE	образец
sienna	A0	52	2D	образец
silver	C0	C0	C0	образец
skyblue	87	CE	EB	образец
slateblue	6A	5A	CD	образец
slategray	70	80	80	образец
snow	FF	FA	FA	образец
springgreen	00	FF	7F	образец
steelblue	46	82	B4	образец
tan	D2	B4	8C	образец
teal	00	80	80	образец
thistle	D8	BF	D8	образец
tomato	FF	63	47	образец
turquose	40	E0	D0	образец
violet	EE	82	EE	образец
wheat	F5	DE	B3	образец
white	FF	FF	FF	образец
whitesmoke	F5	F5	F5	образец
yellow	FF	FF	00	образец
yellowgreen	9A	CD	32	образец

Форматы задания цветов в CSS

Все цвета шрифта вы можете задавать в различных форматах. Вот наиболее распространённые:

1. 1. При помощи кодового значения цвета хтмл.

Например:

color: black;

где black – это черный цвет html.

Примеры конкретных значений цветов HTML и CSS смотрите ниже.

1. 2. Задание цвета в шестнадцатеричном коде:

Например:

color: #000000;

Где #000000; — это код черного цвета.

Если значение цвета в шестнадцатеричном коде имеет 6 одинаковых цифр или букв, то его можно сократить до трёх.

Например:

#ffffff – это код белого цвета

Его можно записать так: #fff

1. 1. Задание цвета в формате rgb

Данный формат представляет собой набор трёх числовых значений от 0 до 255.

Он основывается на использовании трёх цветов, путём смешивания которых получаются все остальные  оттенки

R – (red) – числовое значение красного цвета
G – (green) – числовое зелёного
B – (blue) — числовое значение синего

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

сolor: rgb (0, 155, 0);

Где 0, 155, 0 – это код зелёного цвета.

Таблица, в которой представлены основные цвета ргб,  приведена ниже

1. 4. Задание цвета при помощи формата rgba

Здесь принцип использования абсолютно такой же как и в предыдущем случае, но добавляется ещё один параметр – прозрачность. То есть вы можете регулировать не только оттенок, но и его прозрачность

Например:

color: rgba (89, 107, 108, 0.5);

Где 89, 107, 108 – это ргб  код серого цвета, а 0,5 – это уровень прозрачности.

Прозрачность задаётся в виде десятичного значения от 0  до 1, где 0 – цвет совсем не виден, а 1 – цвет максимально непрозрачный

В одной из прошлых статей я писала про определение цвета на сайте. Там я давала несколько полезных инструментов по определению цветов.
Если вы её ещё не читали вот ссылка

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

В HTML цвета также могут быть заданы с помощью значений RGB, шестнадцатеричных значений, HSL значений, RGBA значений и HSLA значений:

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

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

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

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)

Пример

<h1 style=»background-color:rgb(255,
99, 71);»>…</h1><h1 style=»background-color:#ff6347;»>…</h1><h1 style=»background-color:hsl(9,
100%, 64%);»>…</h1><h1 style=»background-color:rgba(255,
99, 71, 0.5);»>…</h1><h1 style=»background-color:hsla(9,
100%, 64%, 0.5);»>…</h1>

Существующие цветовые палитры

Палитры, или иначе оттеночные диапазоны, начали создаваться несколько веков назад. Они представлялись в виде шкал или атласов колеров. Среди наиболее распространенных и широко используемых 3 основных стандарта.

RAL

Палитра разработана в начале XX в. в Германии как стандарт для лакокрасочной продукции. Reichs-Ausschuss fur Lieferbedingungen – это цветовой диапазон, созданный Государственным комитетом по условиям поставок. В нем с большой скрупулезностью колористическое пространство разделено на отдельные диапазоны. Каждому разделу присвоен цифровой индекс. Обозначения четырехзначные.

Первая цифра	Раздел	Количество оттенков
1	желтые	27
2	оранжевые	22
3	красные	22
4	фиолетовые	10
5	синие	23
6	зеленые	32
7	серые	37
8	коричневые	19
9	светлые и темные	12

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

RAL – это самый популярный и применяемый в мире цветовой стандарт.

Палитра включает шкалы:

• Classic;
• Design;
• Digital;
• Effect;
• Plastics;
• Books.

NCS

Natural Color System переводится с английского как “естественная система цвета”. Авторство принадлежит Скандинавскому одноименному институту. Появилась NCS в 1979 г. Главный принцип – использование 6 простых цветовых тонов, которые невозможно представить сочетанием двух других (исключение – зеленый).

Колористические элементы:

• белый;
• черный;
• красный;
• желтый;
• зеленый;
• голубой.

NCS – цветовая модель, предложенная Скандинавским институтом цвета.

Прочие получаются смешением двух других

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

Pantone

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

Другие варианты

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

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

Существуют колористические справочники для использования в компьютерном художественном творчестве. Один тон представляется в различных цифровых цветовых моделях.

Наиболее распространенная – RGB, в ее основе 3 цвета:

• красный – Red;
• зеленый – Green;
• синий (голубой) – Blue.

CMYK – модель, активно использующаяся в полиграфии.

Наряду с ней применяется модель CMYK:

• Cyan;
• Magenta;
• Yellow;
• Key (Black).

В работе используются еще HSL, HSB/HSV, LAB, XYZ. Для перевода обозначений одного и того же тона из одной модели в другую применяют конвертеры колеров. Они встраиваются в некоторые графические программы.

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

Шестнадцатеричный цветовой код – универсальная цифровая модель для отображения веб-страниц. Другое название – HTML-цвета.
Обозначение колера выглядит следующим образом: знак #, далее буквенно-цифровой формат, например #FAEBD7.
Код описывает тона и оттенки исходя из трех элементов, которые соответствуют модели RGB.

Изменяем цвет в HTML коде при помощи атрибута style

Для этого добавляем к тегу для которого нам нужно изменить цвет текста атрибут style.

PHP

<p style=”color:red;”>Пример</p>

1	<pstyle=”colorred;”>Пример<p>

Здесь же при необходимости через ; вы можете задать и другие CSS свойства, например, размер шрифта, жирность и так далее.

PHP

<p style=”color:red; font-size:20px; font-weight:bolder;”>Пример</p>

1	<pstyle=”colorred;font-size20px;font-weightbolder;”>Пример<p>

Лично я обычно использую вариант с заданием стилей в CSS файле, но если вам нужно изменить цвет текста для какого то одного-двух элементов, то не обязательно присваивать им класс и потом открывать CSS файл и там дописывать слили. Проще это сделать прямо в HTML при помощи тега <font> или артибута style.

Так же вы должны знать, что есть такое понятие как приоритет стилей. Так вот когда вы задаёте цвет текста или другие стили в html при помощи атрибута style, то у этих стилей приоритет будет выше чем если вы их зададите в CSS файле (при условии что там не использовалось правило !important)

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

Например:

PHP

<p>Пример <span style=”color:#2F73B6;”> текста</span></p>

1	<p>Пример<span style=”color#2F73B6;”> текста</span></p>

В итог получится вот так:

Пример текста

Предоставляем возможность пользователю выбрать цвет

There are many situations in which your web site may need to let the user select a color. Perhaps you have a customizable user interface, or you’re implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it’s been necessary to implement your own color picker, HTML now provides support for browsers to provide one for your use through the element, by using as the value of its attribute.

The element represents a color only in the covered above.

Let’s look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker’s value is displayed.

On macOS, you indicate that you’ve finalized selection of the color by closing the color picker window.

HTML

The HTML here creates a box that contains a color picker control (with a label created using the element) and an empty paragraph element () into which we’ll output some text from our JavaScript code.

CSS

The CSS simply establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won’t last, courtesy of the JavaScript below…

JavaScript

The script here handles the task of updating the starting color of the border to match the color picker’s value. Then two event handlers are added to deal with input from the element.

The event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box’s border color to match the color picker’s current value.

The event is received when the color picker’s value is finalized. We respond by setting the contents of the element with the ID to a string describing the finally selected color.