Содержание

цвет текста html

Автор admin На чтение 3 мин. Просмотров 37 Опубликовано

Этот урок HTML посвящен выбору цвета, размера и шрифта текста с помощью тега «font». Это устаревшая тема , потому что форматирование текста на всех современных сайтах определяется с помощью таблиц стилей.

Использование тега <font> также не рекомендуется W3C и поэтому перестает использоваться. В любом случае, это тема, которую хороший веб-мастер не может игнорировать: как уже упоминалось, будет время для изучения таблиц стилей, и в любом случае это шаг, который следует за знанием HTML.

HTML шрифты

Тип шрифта (то есть «font»), который браузер отображает по умолчанию, – «Times».

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

<font face = “Arial”> текст в Arial </ font> текст в Arial
<font face = “Verdana”> текст в Verdana </ font> текст в Verdana
<font face = “Geneva”> текст в Женеве </ font>  текст в Geneva

цвет текста в HTML

После того, как мы выбрали шрифт для написания нашего текста, мы можем выбрать цвет, вот код в соответствии с разметкой HTML :

<font color="blue">синий текст </font> <br/> или : <br/> <font color="#0000FF">синий текст</font> 
цвет текста html

Выбор цвета может быть сделан одновременно с выбором шрифта (поскольку «face» и «color» являются атрибутами тэга <font>):

<font face="Verdana, Arial, Helvetica, sans-serif" color="blue"> синий текст шрифт Verdana </font>

Размер текста HTML

Размер текста определяется атрибутом тега size<font> . Есть два способа задать размеры текста через тег <font>:

  • целые значения от 1 до 7
  • значения, относящиеся к базовому размеру тега шрифта (по умолчанию «3»)

В случае целочисленных значений вот шкала величин:

<font size = "1"> текст размером 1 </ font> <br />
<font size = "2"> текст размером 2 </ font> <br />
<font size = "3"> текст размером 3 </ font> <br />
<font size = "4"> текст размером 4 </ font> <br />
<font size = "5"> текст размером 5 </ font> <br />
<font size = "6"> текст размером 6 </ font> <br />
<font size = "7"> текст размером 7 </ font>
размер шрифта HTML

В случае значений относительно базового размера возможно «перемещение» по шкале величин <font> с использованием знаков « +» и « -».

Мы сказали, что базовый размер шрифта в браузере по умолчанию – 3.

Поэтому, если мы используем size="+2", то это будет означать, что размер шрифта должен быть на 2 размера больше, чем размер основного шрифта, поэтому у нас будет шрифт размером 5.

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

Раздел: Сайтостроение / HTML /

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Как определение красного, зелёного и синего (RGB).
  • Как стандартное название цвета.

Пример:


Следующий текст будет <font color="red">красным</font>.

Следующий текст будет тоже <font color="#FF0000">красным</font>.

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

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

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

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

#RRGGBB

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

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

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


Следующий текст будет тоже <font color="#F00">красным</font>.

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

#RGB

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

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

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

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


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

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

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


Как создать свой сайт Как создать свой сайт

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

Цвет | htmlbook.ru

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

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

Для задания цветов в HTML используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Числа от 10 до 15 заменены латинскими буквами. В табл. 1 приведено соответствие десятичных и шестнадцатеричных чисел.

Табл. 1. Десятичные и шестнадцатеричные числа меньше 16
Десятичные 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Шестнадцатеричные 1 2 3 4 5 6 7 8 9 A B C D E F

Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно (табл. 2). Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной.

Табл. 2. Десятичные и шестнадцатеричные числа больше 16
Десятичные 16 17 18 19 20 21 22 23 24 25 26 27 28
Шестнадцатеричные 10 11 12 13 14 15 16 17 18 19 1A 1B 1C

Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставится символ решетки #, например #aa69cc.

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

<body bgcolor="#fa8e47">

Здесь цвет фона веб-страницы задан как #fa8e47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (fa) определяют красную составляющую цвета, цифры с третьей по четвертую (8e) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет.

Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, общее количество цветов может быть 256х256х256 = 16.777.216 комбинаций. Цветовая модель, основанная на красной, зеленой и синей составляющей получила название RGB (red, green, blue; красный, зеленый, синий). Эта модель аддитивная (от add — складывать), при которой сложение всех трех компонент образует белый цвет.

Чтобы легче ориентироваться в шестнадцатеричных цветах, примите во внимание некоторые правила.

  • Если значения компонент цвета одинаковы (например: #d6d6d6), то получится серый оттенок. Чем больше число, тем светлее цвет, значения при этом меняются от #000000 (черный) до #ffffff (белый).
  • Ярко-красный цвет образуется, если красный компонент сделать максимальным (ff), а остальные компоненты обнулить. Цвет со значением #ff0000 самый красный из возможных красных оттенков. Аналогично обстоит с зеленым цветом (#00ff00) и синим (#0000ff).
  • Желтый цвет (#ffff00) получается смешением красного с зеленым. Это хорошо видно на цветовом круге (рис. 1), где представлены основные цвета (красный, зеленый, синий) и комплиментарные или дополнительные. К ним относятся желтый, голубой и фиолетовый (еще называемым пурпурным). Вообще, любой цвет можно получить смешением близлежащих к нему цветов. Так, голубой (#00ffff) получается за счет объединения синего и зеленого цвета.

Рис. 1. Цветовой круг

Цвета по шестнадцатеричным значениям не обязательно подбирать эмпирическим путем. Для этой цели подойдет графический редактор, умеющий работать с разными цветовыми моделями, например, Adobe Photoshop. На рис. 2 показано окно для выбора цвета в этой программе, линией обведено полученное шестнадцатеричное значение текущего цвета. Его можно скопировать и вставить к себе в код.

Рис. 2. Окно для выбора цвета в программе Photoshop

Веб-цвета

Если установить качество цветопередачи монитора в 8 бит (256 цветов), то один и тот же цвет может показываться в разных браузерах по-своему. Это связано со способом отображения графики, когда браузер работает со своей собственной палитрой и не может показать цвет, который у него в палитре отсутствует. В этом случае цвет заменяется сочетанием пикселов других, близких к нему, цветов, имитирующих заданный. Чтобы цвет оставался неизменным в разных браузерах, ввели палитру так называемых веб-цветов. Веб-цветами называются такие цвета, для каждой составляющей — красной, зеленой и синей, устанавливается одно из шести значений — 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). В скобках указано шестнадцатеричное значение данной компоненты. Общее количество цветов из всех возможных сочетаний дает 6х6х6 — 216 цветов. Пример веб-цвета — #33ff66.

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

Цвета по названию

Чтобы не запоминать совокупность цифр, вместо них можно использовать имена широко используемых цветов. В табл. 3 приведены имена популярных названий цветов.

Табл. 3. Названия некоторых цветов
Имя цвета Цвет Описание Шестнадцатеричное значение
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

Названия цветов | htmlbook.ru



Названия цветов | htmlbook.ru 

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

Табл. 1. Названия цветов и их значения
Название Цвет Значение Валидный
aliceblue   #f0f8ff
antiquewhite   #faebd7
aqua   #00ffff
aquamarine   #7fffd4
azure   #f0ffff
beige   #f5f5dc
bisque   #ffe4c4
black   #000000
blanchedalmond   #ffebcd
blue   #0000ff
blueviolet   #8a2be2
brown   #a52a2a
burlywood   #de8887
cadetblue   #5f9ea0
chocolate   #d2691e
coral   #ff7f50
cornflowerblue   #6495ed
cornsilk   #fff8dc
crimson   #dc143c
cyan   #00ffff
darkblue   #00008b
darkcyan   #008b8b
darkgoldenrod   #b8860b
darkgray   #a9a9a9
darkgreen   #006400
darkkhaki   #bdb76d
darkmagenta   #8b008b
darkolivegreen   #556b2f
darkorange   #ff8c00
darkorchid   #9932cc
darkred   #8b0000
darksalmon   #e9967a
darkseagreen   #8fbc8f
darkslateblue   #483d8b
darkslategray   #2f4f4f
darkturquoise   #00ced1
darkviolet   #9400d3
deeppink   #ff1493
deepskyblue   #00bfff
dimgray   #696969
dodgerblue   #1e90ff
firebrick   #b22222
floralwhite   #fffaf0
forestgreen   #228b22
fuchsia   #ff00ff
gainsboro   #dcdcdc
ghostwhite   #f8f8ff
gold   #ffd700
goldenrod   #daa520
gray   #808080
grey   #808080
green   #008000
greenyellow   #adff2f
honeydew   #f0fff0
hotpink   #ff69b4
indianred   #cd5c5c
indigo   #4b0082
ivory   #fffff0
khaki   #f0e68c
lavender   #e6e6fa
lavenderblush   fff0f5
lemonchiffon   #fffacd
lightblue   #add8e6
lightcoral   #f08080
lightcyan   #e0ffff
lightgoldenrodyellow   #fafad2
lightgreen   #90ee90
lightpink   #ffb6c1
lightsalmon   #ffa07a
lightseagreen   #20b2aa
lightskyblue   #87cefa
lightslategray   #778899
lightsteelblue   #b0c4de
lightyellow   #ffffe0
lime   #00ff00
limegreen   #32cd32
linen   #faf0f6
magenta   #ff00ff
maroon   #800000
mediumaquamarine   #66cdaa
mediumblue   #0000cd
mediumorchid   #ba55d3
mediumpurple   #9370db
mediumseagreen   #3cb371
mediumslateblue   #7b68ee
mediumspringgreen   #00fa9a
mediumturquoise   #48d1cc
mediumvioletred   #c71585
midnightblue   #191970
mintcream   #f5fffa
mistyrose   #ffe4e1
moccasin   #ffe4b5
navajowhite   #ffdead
navy   #000080
oldlace   #fdf5e6
olive   #808000
olivedrab   #6b8e23
orange   #ffa500
orangered   #ff4500
orchid   #da70d6
palegoldenrod   #eee8aa
palegreen   #98fb98
paleturquoise   #afeeee
palevioletred   #db7093
papayawhip   #ffefd5
peachpuff   #ffdab9
peru   #cd853f
pink   #ffc0cb
plum   #dda0dd
powderblue   #b0e0e6
purple   #800080
red   #ff0000
rosybrown   #bc8f8f
royalblue   #4169e1
salmon   #fa8072
sandybrown   #f4a460
seagreen   #2e2b57
seashell   #ffe5ee
sienna   #a0522d
silver   #c0c0c0
skyblue   #87ceeb
slateblue   #6a5acd
slategray   #708090
snow   #fffafa
springgreen   #00ff7f
steelblue   #4682b4
tan   #d2b48c
teal   #008080
thistle   #d8bfd8
tomato   #ff6347
turquoise   #40e0d0
violet   #ee82ee
wheat   #f5deb3
white   #ffffff
whitesmoke   #f5f5f5
yellow   #ffff00
yellowgreen   #9acd32
О сайте

Помощь

Копирование материалов

Борьба с ошибками

Технологии

Поисковый плагин

Основные разделы

Статьи

Блог

Практикум

Цифровые книги

Форум

HTML

Самоучитель HTML

XHTML

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

HTML5

CSS

Самоучитель CSS

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

Рецепты CSS

CSS3

Сайт

Вёрстка

Макеты

Веб-сервер

htmlbook.ru использует Друпал хостинг it-patrol

© 2002–2020 Влад Мержевич, по всем вопросам пишите по адресу [email protected]

Подпишитесь на материалы сайта по RSS

Коды цветов — Minecraft Tools

Minecraft цветные коды для чата

Коды цветов для чата MOTD коды цветов Название цвета/описание
§4 \u00A74 «dark_red»
§c \u00A7c «red»
§6 \u00A76 «gold»
§e \u00A7e «yellow»
§2 \u00A72 «dark_green»
§a \u00A7a «green»
§b \u00A7b «aqua»
§3 \u00A73 «dark_aqua»
§1 \u00A71 «dark_blue»
§9 \u00A79 «blue»
§d \u00A7d «light_purple»
§5 \u00A75 «dark_purple»
§f \u00A7f «white»
§7 \u00A77 «gray»
§8 \u00A78 «dark_gray»
§0 \u00A70 «black»
§r \u00A7r «reset» Сбросить цвет по умолчанию
§l \u00A7l Жирный
§o \u00A7o Курсивный
§n \u00A7n Подчеркнутый
§m \u00A7m Зачёркнутый
§k \u00A7k Искажённый

Цвет | htmlbook.ru

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

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

Для задания цветов в HTML используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Числа от 10 до 15 заменены латинскими буквами. В табл. 6.1 приведено соответствие десятичных и шестнадцатеричных чисел.

Табл. 6.1. Десятичные и шестнадцатеричные числа меньше 16
Десятичные 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Шестнадцатеричные 0 1 2 3 4 5 6 7 8 9 A B C D E F

Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно (табл. 6.2). Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной.

Табл. 6.2. Десятичные и шестнадцатеричные числа больше 16
Десятичные 16 17 18 19 20 21 22 23 24 25 26 27 28
Шестнадцатеричные 10 11 12 13 14 15 16 17 18 19 1A 1B 1C

Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставится символ решетки #, например #aa69cc. При этом регистр значения не имеет, поэтому допустимо писать #F0F0F0 или #f0f0f0.

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

<body bgcolor="#fa8e47">

Здесь цвет фона веб-страницы задан как #FA8E47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (FA) определяют красную составляющую цвета, цифры с третьей по четвертую (8E) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет.

Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, общее количество цветов может быть 256х256х256 = 16.777.216 комбинаций. Цветовая модель, основанная на красной, зеленой и синей составляющей получила название RGB (red, green, blue; красный, зеленый, синий). Эта модель аддитивная (от add — складывать), при которой сложение всех трех компонент образует белый цвет.

Чтобы легче ориентироваться в шестнадцатеричных цветах, примите во внимание некоторые правила.

  • Если значения компонент цвета одинаковы (например: #D6D6D6), то получится серый оттенок. Чем больше число, тем светлее цвет, значения при этом меняются от #000000 (черный) до #FFFFFF (белый).
  • Ярко-красный цвет образуется, если красный компонент сделать максимальным (FF), а остальные компоненты обнулить. Цвет со значением #FF0000 самый красный из возможных красных оттенков. Аналогично обстоит с зеленым цветом (#00FF00) и синим (#0000FF).
  • Желтый цвет (#FFFF00) получается смешением красного с зеленым. Это хорошо видно на цветовом круге (рис. 6.1), где представлены основные цвета (красный, зеленый, синий) и комплементарные или дополнительные. К ним относятся желтый, голубой и фиолетовый (еще называемым пурпурным). Вообще, любой цвет можно получить смешением близлежащих к нему цветов. Так, голубой (#00FFFF) получается за счет объединения синего и зеленого цвета.

Рис. 6.1. Цветовой круг

Цвета по шестнадцатеричным значениям не обязательно подбирать эмпирическим путем. Для этой цели подойдет графический редактор, умеющий работать с разными цветовыми моделями, например, Adobe Photoshop. На рис. 6.2 показано окно для выбора цвета в этой программе, линией обведено полученное шестнадцатеричное значение текущего цвета. Его можно скопировать и вставить к себе в код.

Рис. 6.2. Окно для выбора цвета в программе Photoshop

Веб-цвета

Если установить качество цветопередачи монитора в 8 бит (256 цветов), то один и тот же цвет может показываться в разных браузерах по-своему. Это связано со способом отображения графики, когда браузер работает со своей собственной палитрой и не может показать цвет, который у него в палитре отсутствует. В этом случае цвет заменяется сочетанием пикселов других, близких к нему, цветов, имитирующих заданный. Чтобы цвет оставался неизменным в разных браузерах, ввели палитру так называемых веб-цветов. Веб-цветами называются такие цвета, для каждой составляющей которых — красной, зеленой и синей — устанавливается одно из шести значений — 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). В скобках указано шестнадцатеричное значение данной компоненты. Общее количество цветов из всех возможных сочетаний дает 6х6х6 — 216 цветов. Пример веб-цвета — #33FF66.

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

Цвета по названию

Чтобы не запоминать совокупность цифр, вместо них можно использовать имена широко используемых цветов. В табл. 6.3 приведены имена популярных названий цветов.

Табл. 6.3. Названия некоторых цветов
Имя цвета Цвет Описание Шестнадцатеричное значение
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

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

Пример 6.1. Цвет фона и текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Цвета</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body bgcolor="teal" text="#ffffff">
  <p>Пример текста</p>
 </body>
</html>

В данном примере цвет фона задается с помощью атрибута bgcolor тега <body>, а цвет текста через атрибут text. Для разнообразия значение у атрибута text установлено в виде шестнадцатеричного числа, а у bgcolor с помощью зарезервированного ключевого слова teal.

HTML Цвета



В HTML цвет можно задавать тремя способами:

Задание цвета в HTML по его названию

Некоторые цвета можно задавать по их названию, используя в качестве значения название цвета на английском языке. Самые распространенные ключевые слова: black (черный), white (белый), red (красный), green (зеленый), blue (синий) и др:

<p>Цвет текста – красный</p>

Наиболее популярные цвета стандарта Консорциума Всемирной паутины (англ. World Wide Web Consortium, W3C):

ЦветНазваниеЦветНазвание ЦветНазвание ЦветНазвание
Black Gray Silver White
Yellow Lime Aqua Fuchsia
Red Green Blue Purple
Maroon Olive Navy Teal

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

Пример: задание цвета по его названию

Заголовок на красном фоне

Заголовок на оранжевом фоне

Заголовок на фоне лайм

Белый текст на синем фоне


<h3>Заголовок на красном фоне</h3>
<h3>Заголовок на оранжевом фоне</h3>
<h3>Заголовок на фоне лайм</h3>
<h3>Белый текст на синем фоне</h3>     

Задание цвета с помощью RGB

При отображении различных цветов на мониторе за основу берется RGB-палитра. Любой цвет получают, смешивая три основных: R — красный (red), G — зеленый (green), В — синий (blue). Яркость каждого цвета задается одним байтом и, следовательно, может принимать значения от 0 до 255. Например, RGB (255,0,0) отображается как красный, так как красный устанавливается в его самое высокое значение (255), а остальные установлены в 0. Также можно задавать цвет в процентном отношении. Каждый из параметров обозначает уровень яркости соответствующего цвета. Например: значения rgb(127, 255, 127) и rgb(50%, 100%, 50%) будут задавать одинаковый зеленый цвет средней насыщенности:

Пример: Задание цвета с помощью RGB

 rgb(127, 255, 127)

 rgb(50%, 100%, 50%)

<!-- Яркость каждого цвета может принимать значения от 0 до 255 -->
<h3> rgb(127, 255, 127)</h3>
<!-- Задание цвета в процентном отношении -->
<h3> rgb(50%, 100%, 50%)</h3>

Задание цвета по шестнадцатеричному значению

Значения RGB также могут быть указаны с помощью шестнадцатеричных (HEX) значений цвета в форме: #RRGGBB, где RR (красный), GG (зеленый) и BB (синий) являются шестнадцатеричными значениями от 00 до FF (так же, как десятичное 0-255). Шестнадцатеричная система, в отличие десятичной системы, базируется, как следует из ее названия, на числе 16. Шестнадцатеричная система использует следующие знаки: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, А, В, С, D, E, F. Здесь цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе представляют из себя объединением двух знаков в одно значение. Например, наибольшему числу 255 в десятичной системе соответствует самое высокое значение FF в шестнадцатеричной системе. В отличие десятичной системы, перед шестнадцатеричным числом ставят символ решетки #, например, #FF0000 отображается как красный цвет, так как красный устанавливается в его самое высокое значение (FF), а остальным цветам установлено минимальное значение (00). Знаки после символа решетки # можно набирать как прописными, так и строчными. Шестнадцатеричная система позволяет использовать сокращенную форму вида #rgb, где каждый символ равнозначен удвоенному. Так, запись #f7O следует расценивать как #ff7700.

Пример: Цвет HEX

 красный: #FF0000

 зеленый: #00FF00

 синий: #0000FF

 красный+зеленый=желтый: #FFFF00

 красный+синий=фиолетовый: #FF00FF

 зеленый+синий=голубой: #00FFFF


<h3> красный: #FF0000</h3>
<h3> зеленый: #00FF00</h3>
<h3> синий: #0000FF</h3>
<h3> красный+зеленый=желтый: #FFFF00</h3>
<h3> красный+синий=фиолетовый: #FF00FF</h3>
<h3> зеленый+синий=голубой: #00FFFF</h3>

Список широко распространённых цветов (название, HEX и RGB):

Английское название Русское название Образец HEX RGB
Amaranth Амарантовый #E52B50 229 43 80
Amber Янтарный #FFBF00 255 191 0
Aqua Сине-зеленый #00FFFF 0 255 255
Azure Лазурный #007FFF 0 127 255
Black Черный #000000 0 0 0
Blue Синий #0000FF 0 0 255
Bondi Blue Вода пляжа Бонди #0095B6 0 149 182
Brass Латунный #B5A642 181 166 66
Brown Коричневый #964B00 150 75 0
Cerulean Лазурный #007BA7 0 123 167
Dark spring green Тёмный весенне-зелёный #177245 23 114 69
Emerald Изумрудный #50C878 80 200 120
Eggplant Баклажановый #990066 153 0 102
Fuchsia Фуксия #FF00FF 255 0 255
Gold Золотой #FFD700 250 215 0
Gray Серый #808080 128 128 128
Green Зелёный #00FF00 0 255 0
Indigo Индиго #4B0082 75 0 130
Jade Нефритовый #00A86B 0 168 107
Lime Лайм #CCFF00 204 255 0
Malachite Малахитовый #0BDA51 11 218 81
Navy Тёмно-синий #000080 0 0 128
Ochre Охра #CC7722 204 119 34
Olive Оливковый #808000 128 128 0
Orange Оранжевый #FFA500 255 165 0
Peach Персиковый #FFE5B4 255 229 180
Pumpkin Тыква #FF7518 255 117 24
Purple Фиолетовый #800080 128 0 128
Red Красный #FF0000 255 0 0
Saffron Шафрановый #F4C430 244 196 48
Sea Green Зелёное море #2E8B57 46 139 87
Swamp green Болотный #ACB78E 172 183 142
Teal Сине-зелёный #008080 0 128 128
Ultramarine Ультрамариновый #120A8F 18 10 143
Violet Фиолетовый #8B00FF 139 0 255
Yellow Жёлтый #FFFF00 255 255 0

Коды цветов (фон) по насыщенности и оттенку: HTML Таблица цветов


Задачи


  • Задание цвета по его названию

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

    Задача HTML:

    Реши сам »
    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="UTF-8">
      <title>Задание цвета по его названию</title>  
     </head>
     <body>
      <h3>Заголовок второго уровня</h3>
     </body>
    </html>
  • Цвет HEX

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

    Задача HTML:

    Реши сам »
    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="UTF-8">
      <title>Цвет HEX</title>  
     </head>
     <body>
      <p>Это параграф</p>
     </body>
    </html>





Цвет текста — попутный ветер CSS

Попутный ветер CSS Попутный ветер CSS v1.4,6 v0.7.4 GitHub щебет диссонанс v1.4.6 v0.7.4 Документация Составные части Screencasts Блог Ресурсы сообщество
Начало работы
  • Монтаж
.

HTML-стилей


Атрибут в стиле HTML используется для добавления к элементу таких стилей, как цвет, шрифт, размер и т. Д.



Атрибут стиля HTML

Установка стиля элемента HTML может быть выполнена с помощью атрибута style .

Атрибут HTML в стиле имеет следующий синтаксис:

< тэг style = " property : value; ">

Свойство является свойством CSS.Значение является значением CSS.

Вы узнаете больше о CSS позже в этом уроке.


Цвет фона

Свойство CSS background-color определяет цвет фона для элемента HTML.

Пример

Установите цвет фона для пудры голубой:

Это заголовок

Это абзац.

Попробуй сам "

Пример

Установить цвет фона для двух разных элементов:

Это заголовок

Это абзац.

Попробуй сам "

Цвет текста

Свойство CSS color определяет цвет текста для элемент HTML:

Пример

Это заголовок

Это абзац.

Попробуй сам "

Шрифты

Свойство CSS font-family определяет используемый шрифт для элемента HTML:

Пример

Это заголовок

Это абзац.

Попробуй сам "

Размер текста

Свойство CSS font-size определяет размер текста для элемент HTML:

Пример

Это заголовок

Это абзац.

Попробуй сам "

Выравнивание текста

Свойство CSS text-align определяет горизонтальное выравнивание текста для элемента HTML:

Пример

Центрированный заголовок

Центрированный абзац.

Попробуй сам "

Краткое содержание главы

  • Используйте атрибут в стиле для стилизации элементов HTML
  • Используйте цвет фона для цвета фона
  • Используйте цвет для цвета текста
  • Используйте семейство шрифтов для текстовых шрифтов
  • Используйте размер шрифта для размеров текста
  • Используйте выравнивание текста для выравнивания текста

HTML Упражнения


,
CSS - HTML: изменение цвета определенных слов в текстовой строке
Переполнение стека
  1. Товары
  2. Клиенты
  3. Случаи использования
  1. Переполнение стека Публичные вопросы и ответы
  2. Команды Частные вопросы и ответы для вашей команды
  3. предприятие Частные вопросы и ответы для вашего предприятия
  4. работы Программирование и связанные с ним технические возможности карьерного роста
  5. Талант Нанимать технический талант
  6. реклама Связаться с разработчиками по всему миру
,

HTML Text Color Code

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

В HTML цвет применяется с помощью CSS (каскадных таблиц стилей). Более конкретно, чтобы установить цвет переднего плана элемента, вы используете свойство color .Чтобы установить цвет фона, используйте свойство background-color .

Цвет текста

- встроенные стили

Используя встроенные стили, ваш код вставляется в элемент HTML, к которому вы хотите применить цвет. Это делается с помощью атрибута стиля вместе с тегом .

обычный цвет текста другой цвет текста нормальный цвет текста другой цвет фона

Цвет текста - встроенные стили:

Используя встроенные стили, код CSS вставляется между тегами