Таблица цветов 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.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector