Html теги для текста цвета: Цвет текста (color) в HTML

Leave a Comment / Html / By /

Содержание

HTML — Цвета — CoderLessons.com

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

Тег <body> имеет следующие атрибуты, которые можно использовать для установки разных цветов:

  • bgcolor – устанавливает цвет фона страницы.

  • текст – устанавливает цвет для основного текста.

  • alink – устанавливает цвет для активных или выбранных ссылок.

  • ссылка – устанавливает цвет для связанного текста.

  • vlink – устанавливает цвет для посещенных ссылок, то есть для связанного текста, по которому вы уже щелкнули.

bgcolor – устанавливает цвет фона страницы.

текст – устанавливает цвет для основного текста.

alink – устанавливает цвет для активных или выбранных ссылок.

ссылка – устанавливает цвет для связанного текста.

vlink – устанавливает цвет для посещенных ссылок, то есть для связанного текста, по которому вы уже щелкнули.

Методы цветового кодирования HTML

Существует три способа настройки цвета на вашей веб-странице:

  • Названия цветов – Вы можете указать названия цветов, например, зеленый, синий или красный.

  • Шестнадцатеричные коды – шестизначный код, обозначающий количество красного, зеленого и синего цветов, составляющих цвет.

  • Цветные десятичные или процентные значения – это значение указывается с помощью свойства rgb ().

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

Шестнадцатеричные коды – шестизначный код, обозначающий количество красного, зеленого и синего цветов, составляющих цвет.

Цветные десятичные или процентные значения

– это значение указывается с помощью свойства rgb ().

Теперь мы увидим эти раскраски одну за другой.

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

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

Примечание. Проверьте полный список имен цветов HTML.

Стандарт W3C 16 цветов

Вот список имен W3C Standard 16 Colours, и их рекомендуется использовать.

черный Серый Серебряный белый
желтый Лайм вода фуксия
красный зеленый синий Пурпурный
каштановый оливковый
 флот чирок

пример

Вот примеры для установки фона тега HTML по имени цвета –

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Colors by Name</title>
   </head>
	
   <body text = "blue" bgcolor = "green">
      <p>Use different color names for for body and table and see the result. </p>
      
      <table bgcolor = "black">
         <tr>
            <td>
               <font color = "white">This text will appear white on black background.</font>
            </td>
         </tr>
      </table>
   </body>
   
</html>

HTML-цвета – шестнадцатеричные коды

Шестнадцатеричное – это 6-значное представление цвета. Первые две цифры (RR) представляют значение красного цвета, следующие две – значение зеленого цвета (GG), а последние – значение синего (BB).

Шестнадцатеричное значение может быть взято из любого графического программного обеспечения, такого как Adobe Photoshop, Paintshop Pro или MS Paint.

Каждому шестнадцатеричному коду будет предшествовать знак фунта или хеша #. Ниже приведен список нескольких цветов с использованием шестнадцатеричной записи.

цвет Цвет HEX
# 000000
# FF0000
# 00FF00
# 0000FF
# FFFF00
# 00FFFF
# FF00FF
# C0C0C0
#FFFFFF

пример

Вот примеры для установки фона тега HTML по цветному коду в шестнадцатеричном формате –

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Colors by Hex</title>
   </head>
	
   <body text = "#0000FF" bgcolor = "#00FF00">
      <p>Use different color hexa for for body and table and see the result. </p>
      
      <table bgcolor = "#000000">
         <tr>
            <td>
               <font color = "#FFFFFF">This text will appear white on black background.</font>
            </td>
         </tr>
      </table>
   </body>
   
</html>

HTML-цвета – значения RGB

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

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

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

Ниже приведен список, показывающий несколько цветов с использованием значений RGB.

цвет Цвет RGB
RGB (0,0,0)
RGB (255,0,0)
RGB (0,255,0)
RGB (0,0,255)
RGB (255,255,0)
RGB (0255255)
RGB (255,0,255)
RGB (192192192)
RGB (255,255,255)

пример

Вот примеры для установки фона тега HTML с помощью цветового кода с использованием значений rgb () –

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Colors by RGB code</title>
   </head>
	
   <body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)">
      <p>Use different color code for for body and table and see the result. </p>
      
      <table bgcolor = "rgb(0,0,0)">
         <tr>
            <td>
               <font color = "rgb(255,255,255)">This text will appear white on black background.</font>
            </td>
         </tr>
      </table>
   </body>
   
</html>

Браузер Безопасные Цвета

Вот список из 216 цветов, которые должны быть самыми безопасными и независимыми от компьютера. Эти цвета очень от гекса кода 000000 до FFFFFF, и они будут поддерживаться всеми компьютерами, имеющими 256 цветовую палитру.

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

HTML-теги. Изменение цвета шрифта

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

Для этого вам понадобятся страница, созданная с модулем «Редактируемая страница», «Периодика», «Каталог товаров» (только при редактировании текстового поля «Описание раздела» или «Описание» для позиции каталога), «Анкета» (только при редактировании формы «Помощь/Информация») и начальное понимание об оформлении при помощи тегов.

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

HTML-теги. Изменение цвета шрифта. Шаг 1
HTML-теги. Изменение цвета шрифта. Шаг 2

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

HTML-теги. Изменение цвета шрифта. Шаг 3

Вставьте тег « » (где после знака «=» название или код цвета, который вам необходим) перед словом/словосочетанием/предложением/абзацем.

Внимание! Узнать код необходимого вам оттенка можно в графическом редакторе или в интернете, например, по этой ссылке.

HTML-теги. Изменение цвета шрифта. Шаг 4

Сразу же после слова/словосочетания/предложения/абзаца вставьте тег « ».

HTML-теги. Изменение цвета шрифта. Шаг 5

Подтвердите изменение цвета, нажав кнопку «Сохранить».

HTML-теги.
Изменение цвета шрифта

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

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

Изменяем цвет текста для сайте

Если вы сами хотите сделать через теги на подобие FONT, SPAN и DIV, то здесь все очень просто, но в этом случай вам только нужно знать цвета. Вы на самом сайте можете увидеть прописные цвета, как «red, green, blue» но больше всего вам попадется 16-ричном код, который вам представлен ниже. И лучше безусловно его делать на фотошоп, как там вы просто видите курсор и смотрите какой оттенок и код автоматически появляется. Есть и скрипты оттенков, и там можно что то подобрать, но вам виднее будет.

Скрипт для использования в CSS:

Ставим его и настраиваем как вам нужно.

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

Здесь вы даже в этом случай можете использовать сам стиль и получиться так.

Оттенок цвета как #0000FF он и является является 16-ричным кодом.

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

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

Оформление текста на сайте

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

Размеры шрифта:

Оформление текста с помощью шрифтов:

Оформление текста с помощью цвета:

<font color=»#0000ff»> Синий текст </font>
* Цифра #0000ff означает синий цвет в RGB палитре.

<font color=»red»> Красный текст </font>
* Можно пользоваться стандартными словесными обозначениями цветов: Red, Green, Blue и т.д.

<div> Голубой фон </div>
* У фона тоже можно менять цвет. Обратите внимание, что атрибут style использует синтаксис CSS.

<div> Синий текст, серый фон </div>

Некоторые предопределённые цвета

Black White Red Green Blue Purple Firebrick Maroon OrangeRed MidnightBlue CornflowerBlue
Cyan Yellow Magenta DarkGreen DarkGoldenrod Gold Orchid BlueViolet Burlywood PeachPuff

Некоторые цвета в шестнадцатиричном коде — интенсивность красного, зелёного и синего (RRGGBB&#41;:

#000000 #FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #FF4444 #FF9999 #FFCCCC #9999FF #FF99FF #DDDDDD #FFE4C4 #CCCC99 #FF8DC #FA8072 #990000 #FF3030 #000080 #000066 #0000CD #AFEEEE #006400 #66FF00 #00B800 #DAA520 #FFCC33 #FFA500 #C71585 #8B008B #CC33FF

Оформление текста с использованием тени/подсветки:

Свойство text-shadow имеет четыре параметра: X Y амплитуда цвет.
X — горизонтальное смещение тени/подсветки к тексту. Положительное значение — смещение вправо, отрицательное значение — смещение влево.
Y — вертикально смещение тени/подсветки к тексту. Положительное значение — смещение вниз, отрицательное значение — смещение вверх.
Амплитуда — чем выше значение, тем больше степень размытия.
Цвет — тёмные тона дадут тень, светлые тона — «подсветку».

<font>
Только тень </font>

<font>
Tahoma с тенью </font>

<font>
Tahoma с контуром </font>

<font>
Tahoma вдавленный </font>

<font>
Tahoma объёмный </font>

<font>
Tahoma неоновый </font>

<font>
Tahoma неоновый </font>

<font>
Tahoma неоновый </font>

<font>
Tahoma, много оттенков </font>

Выравнивание текста и форматирование параграфов

<p align=»left»> Выравнивание текста по левой стороне </p>

<p align=»center»> Выравнивание текста по центру </p>

<center> Отцентрированный текст </center>
<p align=»right»> Выравнивание текста по правой стороне </p>

<p align=»justify»> Выравнивание текстов по обеим сторонам — для текстов, имеющих длину более одной строки </p>

<p> Вариант выравнивания текстов по обеим сторонам с использованием параметра форматирования CSS </p>

Как задать цвет тексту в html css

Цвет текста css по умолчанию, как обозначается цвет в css?

Как еще можно подобрать цвет текста!?

Как обозначается цвет в css?

Цвет в css обозначается color : red ;

Как используется цвет в стилях css!?

Задать цвет текста внутри тега

Цвет текста может быть задан внутри тега!

Предположим, что нам нужно задать какой то цвет тексту в теге.

Для этого нам понадобится какой-то тег? путь это будет span

Внутрь первого тега помещаем атрибут «style» со значением цвет -> «color» и определяем цвет, путь это будет фиолетовый -> color:violet

Мы задали нашему тексту цвет фиолетовый:

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

После этого берем выше приведенный тег и меняем цвет внутри тега:

Задать свой собственный тег для цвета текста

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

и например цвет текста в собственном теге, намного проще. :

Результат изменения цвета текста в теге

Или же путь это будет зеленый цвет:

Как создать такой тег, для изменения цвета текста!?

записываем таким образом:

Тоже самое для любого другого цвета

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

Для того, чтобы задать цвет тексту можно воспользоваться стилями на одной странице! Этот способ подходит в тех случаях, когда требуется задать/изменить цвет текста только на это странице!

Нам понадобится тег style :

Располагаем данный стиль в любом месте на странице, лучше всего его располагать внутри тега head :

Создадим новый тег, который у нас не используется на сайте, пусть это будет violet, задаем ему цвет violet :

Внутри тега violet помещаем текст,чтобы мы могли его увидеть!

Результат, цвет для текста задан через стили на странице:

Задать цвет тексту через файл css

Для того, чтобы задать цвет текста через файл css -повторяем все операции, как и пункте 2, только в файле стилей!

Задать цвет тексту через class

Для того, чтобы задать цвет текста через класс, нужно создать стили для этого класса:

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

После класса используются двойные фигурные скобки:

Внутри скобок прописываются цвет для текста:

Далее нужно прикрепить данный класс к тегу:

Задать цвет тексту через id

Для того, чтобы задать цвет текста через id, нужно создать стили для этого id:

Все тоже самое. что и для класса, лишь изменяется точка на решетку,

и слово «class» на «id»

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

HTML тег изменения цвета текста: атрибут style

 

Обновлено: 28.03.2021 Автор: Планета Успеха

Приветствую вас на «Планете Успеха»! Начну сразу с вопроса. У вас возникало желание в своих статьях на блоге изменить цвет шрифта в определенных местах текста? Уверен, что да! Этим мы сегодня и будем заниматься.

Предыдущие занятия по ручной html верстке текста:

  1. Текстовый html редактор notepad++ Html теги для текста в один клик
  2. HTML теги пробела и красной строки для текста
  3. HTML теги таблицы: td, tr, table, для текста
  4. HTML теги для текста: жирный шрифт, курсивный шрифт и подчеркивание текста

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

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

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

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

2 Поделиться ссылкой:

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> (кавычки должны быть именно такого вида — » «, иначе цвет не поменяется)

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

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

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

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

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

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

<ul><li>Администратор в социальных сетях</li>

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

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

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

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

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

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

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

  • Администратор в социальных сетях
  • Специалист по контекстной рекламе
  • Дизайн и Photoshop
  • Копирайтинг
  • Видеомонтаж
  • Вёрстка сайтов
  • Специалист по продвижению Вконтакте

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

<ol><li>Администратор в социальных сетях</li>

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

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

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

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

 

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

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

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

  1. Администратор в социальных сетях
  2. Специалист по контекстной рекламе
  3. Дизайн и Photoshop
  4. Копирайтинг
  5. Видео монтаж
  6. Вёрстка сайтов
  7. Специалист по продвижению Вконтакте

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

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

<table><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><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><td>ячейка 1</td>

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

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

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

ячейка 1ячейка 2ячейка 3

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

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

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

Просмотров: 1 008

   

 

 

Что такое цветовой тег в HTML? (с изображением)

`;

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

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

При использовании тега цвета существует несколько вариантов указания цвета. Один из них — просто назвать цвет, например, «черный» или «синий». Другой способ — использовать шестизначный шестнадцатеричный код, определяющий определенный цвет, например, #FFFFFF для белого, хотя люди должны знать, что иногда эти коды по-разному отображаются в разных браузерах, когда речь идет о неясных цветах. Еще один вариант — использовать цвет RGB, в котором указаны уровни красного, зеленого и синего, например 0,0,0 для черного.

Одним из примеров использования тега цвета было окрашивание текста, например . Для шестнадцатеричных кодов будет использоваться формат , тогда как коды RGB будут записаны как Все эти значения для тега цвета являются только примерами; в Интернете можно найти таблицы с перечнем вариантов цвета. Этот трюк также можно использовать для окрашивания ссылок путем вложения спецификации «font color=» в ссылку, например: wiseGEEK. Для фона HTML будет выглядеть как . Элемент цвета также можно использовать в коде, определяющем характеристики границы или ячейки в таблице.

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

216 цветов считаются веб-безопасными, а это означает, что когда они используются с цветовыми тегами, они должны отображаться одинаково на любом мониторе. Однако, как многие узнали, ситуация немного сложнее. Цвета могут сильно различаться на разных мониторах, поэтому стоит протестировать веб-сайт с несколькими мониторами, чтобы получить представление о спектре цветов, которые можно увидеть. Различные операционные системы также могут иметь проблемы с некоторыми цветами, а некоторые браузеры вообще отвергают цвета, что означает, что похожие оттенки могут начать расплываться вместе при отображении в оттенках серого.

Мэри МакМахон

С тех пор как несколько лет назад Мэри начала работать над сайтом, она приняла захватывающая задача быть исследователем и писателем EasyTechJunkie. Мэри имеет степень по гуманитарным наукам в Годдард-колледже и проводит свободное время за чтением, приготовлением пищи и прогулками на свежем воздухе.

Вам также может понравиться

Рекомендуется

HTML Color – Инженерно-технические услуги

Обзор

HTML-теги

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

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

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

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

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

цвет морской волны     серый    темно-синий    серебро   
черный    зеленый    оливковое     бирюзовый   
синий    лайм     фиолетовый    желтый   
фуксия    темно-бордовый    красный    белый   

Многие люди поняли, что эти цвета были довольно ограниченными, поэтому люди, стоящие за Netscape и Internet Explorer, создали гораздо больше имен цветов для использования. Они называются названиями цветов X11. Названий этих цветов слишком много, чтобы перечислять их здесь, но небольшой представитель списка показан ниже. Кроме того, вы можете использовать в общей сложности 100 вариантов серого. Цвет «серый1» — самый темный, а «серый100» — самый светлый. По умолчанию «серый», показанный выше, похож на «серый75».

Алисблю    бежевый     шартрез    темно-золотистый    доджерблю    огнеупорный кирпич   
Гейнсборо    падь    ярко-розовый    слоновая кость    зеленый газон    белье   
темно-синий    мятный крем    старая лейка    орхидея     папайя-хлыст    перу   
розово-коричневый    лосось     морская ракушка    сине-серый    чертополох     белый дым   

Как вы понимаете, названия некоторых цветов довольно странные. И в чем именно разница между «медвяной росой» и «мятным кремом»? Вы быстро сталкиваетесь с проблемой, что у вас слишком много имен для ссылок и отслеживания. Кроме того, не все браузеры могут распознавать эти цвета X11. Что приводит меня к…

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

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

Все значения цвета создаются в теге HTML с помощью шестизначного шестнадцатеричного числа, которому предшествует символ решетки (#). Например: «#FF0000» — красный цвет. Это число является представлением значения цвета, называемого RGB, что означает красный-зеленый-синий. Таким образом, первые две цифры обозначают красный цвет, вторые две — зеленый, а последние две — синий.

Так что же означает шестнадцатеричное число? Это система счисления с основанием 16, которая обычно используется компьютерами. В шестнадцатеричном формате используются обычные числа от 0 до 9.цифры, а также добавление букв от A до F, как показано в этой таблице:

Номер 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 А Б С Д Е Ф

Итак, чтобы использовать значения цвета, вам сначала нужно знать значение RGB вашего цвета. (Если вы используете такую ​​программу, как Adobe Photoshop, это легко определить.) Каждый из трех цветов цвета RGB будет иметь значение от 0 (без цвета) до 255 (полный цвет). Таким образом, полный красный — это 255, 0, 0; полный зеленый — это 0, 255, 0, а полный синий — 0, 0, 255. Эта комбинация допускает 16 миллионов различных вариаций.

Как только вы узнаете значение RGB, вам нужно будет преобразовать его в шестнадцатеричное с помощью следующей формулы: Разделите каждое значение на 16 и умножьте остаток на 16, чтобы получить две цифры.

Например: предположим, что наш цвет RGB — тусклый синий (   ), который имеет значение RGB 106, 90, 205. Чтобы найти шестнадцатеричный эквивалент, мы просто делим каждое значение на 16 и умножаем остаток на 16. Таким образом, 106 разделить на 16 будет 6,625. а 16, умноженное на 0,625, равно 10. Итак, первое (или красное) шестнадцатеричное число — «6А». Зеленое число 90, который делится на 16, дает 5,625. Это делает зеленое шестнадцатеричное число «5A». Для синего числа 205; 16, разделенное на него, дает 12,8125, а 16, умноженное на 0,8125, равно 13. Таким образом, синий шестнадцатеричный эквивалент — «CD». Таким образом, окончательный эквивалент RGB 106, 90, 205 — это 6A5ACD. Затем этот номер можно вставить в HTML-атрибут следующим образом: Этот текст тускло-синего цвета

К счастью, существует ряд инструментов, которые можно найти в Интернете или загрузить на свой компьютер. компьютер, который будет преобразовывать RGB в шестнадцатеричные цвета. Кроме того, многие HTML-редакторы, такие как Macromedia Dreamweaver, уже имеют встроенные инструменты.0003

Последнее

Многие старые и дешевые компьютерные мониторы могут отображать только ограниченное количество цветов. Любой цвет за пределами этого диапазона будет отображаться очень плохо. Эта проблема осложняется различиями между ПК, Unix/Linux и Mac и тем, как каждый из них отображает цвет. Чтобы исправить эту проблему, была разработана коллекция цветов «Web Safe». Эти цвета безопасны в использовании и не меняются монитором компьютера. Палитра цветов Web Safe показана ниже.

Веб-безопасные цвета

Шестнадцатеричный код Цвет
#FFFFFF  
#FFFFCC  
#FFFF99  
#FFFF66  
#FFFF33  
#FFFF00  
#FFCCFF  
#FFCCCC  
#FFCC99  
#FFCC66  
#FFCC33  
#FFCC00  
#FF99FF  
#FF99CC  
#FF9999  
#FF9966  
#FF9933  
#FF9900  
#FF66FF  
#FF66CC  
#FF6699  
#FF6666  
#FF6633  
#FF6600  
#FF33FF  
#FF33CC  
#FF3399  
#FF3366  
#FF3333  
#FF3300  
#FF00FF  
#FF00CC  
#FF0099  
#FF0066  
#FF0033  
#FF0000  

Шестнадцатеричный код Цвет
#66FFFF  
#66FFCC  
#66FF99  
#66FF66  
#66FF33  
#66FF00  
#66CCFF  
#66CCCC  
#66CC99  
#66CC66  
#66CC33  
#66CC00  
#6699FF  
#6699CC  
#669999  
#669966  
#669933  
#669900  
#6666FF  
#6666CC  
#666699  
#666666  
#666633  
#666600  
#6633FF  
#6633CC  
#663399  
#663366  
#663333  
#663300  
#6600FF  
#6600CC  
#660099  
#660066  
#660033  
#660000  
Шестнадцатеричный код Цвет
#CCFFFF  
#CCFFCC  
#CCFF99  
#CCFF66  
#CCFF33  
#CCFF00  
#CCCCFF  
#CCCCCC  
#CCCC99  
#CCCC66  
#CCCC33  
#CCCC00  
#CC99FF  
#CC99CC  
#CC9999  
#CC9966  
#CC9933  
#CC9900  
#CC66FF  
#CC66CC  
#CC6699  
#CC6666  
#CC6633  
#CC6600  
#CC33FF  
#CC33CC  
#CC3399  
#CC3366  
#CC3333  
#CC3300  
#CC00FF  
#CC00CC  
#CC0099  
#CC0066  
#CC0033  
#CC0000  

Шестнадцатеричный цвет Цвет
#33FFFF  
#33FFCC  
#33FF99  
#33FF66  
#33FF33  
#33FF00  
#33CCFF  
#33CCCC  
#33CC99  
#33CC66  
#33CC33  
#33CC00  
#3399FF  
#3399CC  
#339999  
#339966  
#339933  
#339900  
#3366FF  
#3366CC  
#336699  
#336666  
#336633  
#336600  
#3333FF  
#3333CC  
#333399  
#333366  
#333333  
#333300  
#3300FF  
#3300CC  
#330099  
#330066  
#330033  
#330000  
  
Шестнадцатеричный код Цвет
#99FFFF  
#99FFCC  
#99FF99  
#99FF66  
#99FF33  
#99FF00  
#99CCFF  
#99CCCC  
#99CC99  
#99CC66  
#99CC33  
#99CC00  
#9999FF  
#9999CC  
#999999  
#999966  
#999933  
#999900  
#9966FF  
#9966CC  
#996699  
#996666  
#996633  
#996600  
#9933FF  
#9933CC  
#993399  
#993366  
#993333  
#993300  
#9900FF  
#9900CC  
#9  
#9
 
#9

  
#9

  

Шестнадцатеричный код Цвет
#00FFFF  
#00FFCC  
#00FF99  
#00FF66  
#00FF33  
#00FF00  
#00CCFF  
#00CCCC  
#00CC99  
#00CC66  
#00CC33  
#00CC00  
#0099FF  
#0099CC  
#009999  
#009966  
#009933  
#009900  
#0066FF  
#0066CC  
#006699  
#006666  
#006633  
#006600  
#0033FF  
#0033CC  
#003399  
#003366  
#003333  
#003300  
#0000FF  
#0000CC  
#000099  
#000066  
#000033  
#000000  
 

Форматированный текст, Документация TextMesh Pro

Вы можете использовать теги форматированного текста для изменения внешнего вида и макета текста. Эти теги работают как теги HTML или XML, но имеют менее строгий синтаксис.

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

Некоторые теги имеют значения и атрибуты, например <тег=значение> и <тег атрибут=значение> . Эти аргументы являются либо именами, либо числовыми значениями. Числа представляют собой обычные десятичные числа, пиксели, такие как 1px , проценты, такие как 80% , единицы шрифта, такие как 1.2em , или шестнадцатеричные значения цвета, такие как #FF . Имена могут быть как с двойными кавычками, так и без них, но если атрибутов больше, лучше использовать кавычки.

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

Обзор тегов

Теги Сводка
выравнивание Выравнивание текста.
альфа, цвет Цвет и непрозрачность.
b, i Жирный и курсив.
cspace Межсимвольный интервал.
шрифт Выбор шрифта и материала.
отступ отступ.
высота строки Высота строки.
отступ строки Отступ строки.
ссылка Текстовые метаданные.
строчные, прописные, прописные Заглавные буквы.
поле Поля текста.
знак Текст маркировки.
mspace Моноширинный.
noparse Предотвратить синтаксический анализ.
nobr Неразрывные пробелы.
стр. Разрыв страницы.
pos Горизонтальное положение курсора.
Размер Размер шрифта.
пробел Горизонтальное пространство.
спрайт Вставка спрайтов.
с, у Зачеркнуть и подчеркнуть.
стиль Пользовательские стили.
нижний, дополнительный Нижний и верхний индекс.
vсмещение Смещение базовой линии.
Ширина Ширина текста.

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

Каждый текстовый объект имеет общее выравнивание, но его можно переопределить с помощью тегов. Доступны все четыре варианта горизонтального выравнивания.

Обычно эти теги помещаются в начало абзаца. Если в одной строке окажется несколько тегов выравнивания, победит последний.

Последовательные области выравнивания не складываются. Тег возвращается к общему выравниванию объекта.

Справа
По центру
Слева
Переключение выравнивания.

Цвет

Вы можете изменить цвет текста различными способами. Самый простой способ — использовать . Поддерживаемые имена цветов: черный, синий, зеленый, оранжевый, фиолетовый, красный, белый и желтый.

Для указания цвета можно также использовать шестнадцатеричное число. Такие цвета имеют форму #FFFFFF или #FFFFFFFF , если вы также хотите определить альфа-значение. В этом случае вы можете опустить имя тега color .

Красный Темно-зеленый <#0000FF>Синий Полупрозрачный красный
Цвета.

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

FF CC AA 88 66 44 22 <альфа=#00>00
Альфа от 100% до 0%.

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

Красный, Синий и снова красный.
Восстановление цвета.

Жирный и курсив

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

быстрая коричневая лиса перепрыгивает через ленивую собаку.
Жирный и курсив.

Интервал между символами

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

Закрывающий тег возвращается к нормальному интервалу шрифта.

Интервал так же важен, как и время.
Расстояние между символами.

Шрифт

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

Теги шрифта могут быть вложенными. Вернуться к шрифту по умолчанию можно, закрыв все теги шрифта или используя по умолчанию в качестве имени актива шрифта.

Хотите другой шрифт? или просто другой материал?
Смешивание шрифтов и материалов.

Отступ

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

1. Это полезно для таких вещей, как маркеры.
2. Это удобно.
Использование отступов для создания списка.

Высота строки

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

Можно использовать пиксели, единицы шрифта и проценты. Относительные корректировки основаны на высоте строки, указанной в ресурсе шрифта. Закрывающий тег возвращается к этой высоте.

Высота строки при 100%
Высота строки при 50%
Довольно уютно.
Высота строки при масштабе 150%
Какое расстояние!
Разная высота строк.

Отступ строки

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

Закрывающий тег завершает отступ строк.

Это первая строка этого примера текста.
Это вторая строка того же текста.
Отступ каждой новой строки с одним тегом.

Текстовая ссылка

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

Не обязательно присваивать каждой ссылке уникальный идентификатор. Вы можете повторно использовать идентификаторы, когда это имеет смысл, например, при многократном связывании с одними и теми же данными. Массив linkInfo будет содержать каждый идентификатор только один раз.

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

Строчные, прописные и строчные буквы

Эти три тега используются для изменения заглавных букв вашего текста. 9Теги 0029 нижнего регистра и верхнего регистра работают так, как вы ожидаете. allcaps — это псевдоним для в верхнем регистре .

Тег smallcaps работает так же, как верхний регистр , но также уменьшает размер всех символов, которые изначально не были в верхнем регистре.

Алиса и Боб смотрели телевизор.
Алиса и Боб смотрели телевизор.
Алиса и Боб смотрели телевизор.
г. Изменение капитализации.

Маржа

Вы можете настроить горизонтальные поля текста с помощью тега margin . Если вы хотите настроить только левое или правое поле, вы можете использовать теги margin-left или margin-right . Вы можете использовать пиксели, единицы шрифта и проценты.

Раньше наши поля были очень широкими.
Но те времена давно прошли.
Регулировка полей.

Марка

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

Теги Marks не складываются, они заменяют друг друга.

Текст может быть помечен наложением.
Выделенный текст.

Моноширинный

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

Тег удаляет все переопределения моноширин.

Любой шрифт может стать моноширинным, если вы действительно этого хотите.
Обработка шрифта как моноширинного.

Нопарс

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

Используйте для полужирного текста.
Предотвратить синтаксический анализ некоторых тегов.

Неразрывные пробелы

Если вы хотите, чтобы слова оставались вместе и не разделялись переносом слов, вы можете использовать тег nobr .

Вы не хотите, чтобы ВАЖНОЕ ВАЖНОЕ разваливалось.
Важные части остаются вместе.

Разрыв страницы

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

Горизонтальное положение

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

Эти теги лучше всего использовать с выравниванием по левому краю.

при 75%
при 25%
при 50%
при 0%
Установка позиций.

Размер шрифта

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

Эхо Эхо Эхо Эхо Эхо
Регулировка размера.

Горизонтальное пространство

Тег space вставляет смещение по горизонтали, как если бы вы вставили несколько пробелов. Вы можете использовать пиксели или единицы шрифта.

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

Дайте мне немного места .
Добавление пространства.

Спрайт

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

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

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

По умолчанию на спрайты не влияет параметр Цвет (вершина) текста. Добавление атрибута tint=1 к тегу окрасит спрайты этим цветом. Вы также можете использовать определенный цвет, добавив цвет=#FFFFFF .

Спрайты! Больше спрайтов! И даже больше!
Вставка спрайтов из спрайта по умолчанию.

Зачеркнутый и подчеркнутый

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

быстрая коричневая лиса перепрыгивает через ленивую собаку.
Зачеркнуть и подчеркнуть.

Стиль

Доступ к пользовательским стилям

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


Вы можете создавать свои собственные.
Пользовательские стили удобны.

Нижний и верхний индекс

Теги sup и sub позволяют размещать текст в виде верхнего или нижнего индекса. Их смещение и размер определяются активом шрифта. Это часто используется в научных обозначениях и нумерации, например, 1 st и 2 nd .

У нас есть 1 м3 H2O.
Нижний и верхний индекс.

Вертикальное смещение

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

Высота строки регулируется для размещения смещенного текста. Если вы этого не хотите, вы можете вручную отрегулировать высоту строки.

Вверх вверх ВВЕРХ и вниз мы идем снова.
Вертикальное смещение.

Ширина текста

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

Изменение вступает в силу в текущей строке, но только после самого тега. Обычно вы размещаете его в начале абзаца.

Настройки ширины перекрывают друг друга, и закрывающий тег возвращается к исходной ширине.

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

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