Содержание

Как изменить цвет текста в HTML. Атрибут color

 

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

<font color=»цвет»>

Для задания цвета достаточно указать его название, например: red, green, blue. Рассмотрим небольшой пример:


<html>
  <head>
    <title>Урок 6. Изменяем цвет текста</title>
  </head>
  <body>
    <p><font color="green">Текст зеленого цвета</font></p>
    <p><font color="red">Текст красного цвета</font></p>
    <p><font color="purple">Текст фиолетового цвета</font></p>
  </body>
</html>

Посмотрим результат в браузере:

Текст в первом абзаце стал зеленым, во втором – красным, а в третьем – фиолетовым. Всего существует 16 названий основных цветов и 130 дополнительных. Полный список цветов вы можете посмотреть в таблице цветов html.

Этот способ обозначения цвета очень прост, но весьма ограничен. Поэтому для того чтобы изменить цвет в html – коде, чаще используют шестнадцатеричное число перед которым стоит знак решетки (#), например:

<font color=»#5AFF00″>

 

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


<html>
  <head>
    <title>Урок 6. Изменяем цвет текста</title>
  </head>
  <body>
    <p><font color="#008000">Текст зеленого цвета</font></p>
    <p><font color="#FF0000">Текст красного цвета</font></p>
    <p><font color="#800080">Текст фиолетового цвета</font></p>
  </body>
</html>

Сохраним файл и посмотрим на результат:

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

Теперь вы научились изменять цвет текста в html и в конце урока предлагаю повторить все атрибуты тега <font>, и задать тексту сразу несколько параметров, а именно: шрифт, размер и цвет. Запишите пример:


<html>
  <head>
    <title>Задаем тексту несколько параметров</title>
  </head>
  <body>
    <p>&nbsp</p>
    <p align="center"><font face="courier" size="+2" color="#008000">Задаем тексту шрифт, размер и цвет</font></p>
    <p align="center"><font face="arial" size="+3" color="#00FF02">Задаем тексту шрифт, размер и цвет</font></p>
    <p align="center"><font face="comic sans ms" size="+4" color="#FF002E">Задаем тексту шрифт, размер и цвет</font></p>
  </body>
</html>

Как всегда не забудем сохранить файл и посмотрим результат:

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

saperka.ru

УЧЕБНИК HTML для новичков — Цвет текста

Цвет текста



А можно ли сделать текст цветным? Да ради бога! Для этого существует атрибут

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

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

или

<FONT color=»#ff0000″>И тут красный!!!</FONT>

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

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

Название цвета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. Стихотворение


  

  
  
    <FONT color=red face=»Comic Sans MS» size=7>
      <CENTER>СТИХОТВОРЕНИЕ</CENTER>
    </font>

    <FONT color=blue>


      Это не сложно <BR>
      Это не важно <BR>
      Просто отважно <BR>
      В небо шагнуть <BR>
    </FONT>

    <FONT color=»#008000″ size=4>
      И осторожно <BR>
      Там, где возможно <BR>
      Темного облака <BR>
      Край отогнуть. <BR>
    </FONT> <BR>

    <FONT color=»#ffff00″ size=+2>
      Стертые лица,
<BR>
      Забытые профили <BR>
      И многоточий упрямая нить. <BR>
      Свет разливается <BR>
      И проявляется <BR>
      То, что уже никогда не забыть. <BR>
    </FONT>

    <ADDRESS>

Ирина Лео</ADDRESS>

  </BODY>
</HTML>

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


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

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

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

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

Тренировка!

Введите в форму любой текст, необходимые теги, нажмите на «посмотреть» и любуйтесь на свою работу!



highstar.ru

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

Здравствуйте, дороге друзья!

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

Навигация по статье:

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

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

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

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

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

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

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

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

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

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

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

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

HTML

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

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


CSS

.color-text { color:#555555; }

.color-text {

color:#555555;

}

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

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

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

Для этого:

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

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

    <style>

    .color-text {

    color:#555555;

    }

    </style>

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

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

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

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

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

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

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

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

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

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

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

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

Например:

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

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

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

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

Что делать если внесённые изменения не меняются?

Казалось бы, изменение цвета – одна из простейших операций при оформлении текста, ну что здесь может пойти не так?

Однако и здесь есть свои нюансы, которые нужно учитывать:

  1. 1.Приоритет стилей, о котором я писала выше. Если задавать цвет текста прямо в HTML то приоритет будет выше. Если вы задали его при помощи атрибута style, а он всё равно не изменилcя, то попробуйте добавить к нему правило !important;

    <p style=”color:#fff!important;”>…</p>

    <p style=”color:#fff!important;”>…</p>

  2. 2.Особенности тегов. Если вы зададите цвет текста для абзаца внутри которого есть ссылка, то он изменится для всего абзаца кроме ссылки. Чтобы изменился цвет ссылки нужно задавать его именно для тега ссылки.

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

  3. 3.Кеширование. Часто современные браузеры кешируют стили сайта и даже после внесения изменений в код они ещё какое то время отображают старую версию стилей. Для решения проблемы можно обновлять страницу при помощи сочетания клавиш CTRL+F5.
    Так же у вас на сайте может стоять плагин для кеширования, из-за которого вы так же можете не видеть внесённых изменений на сайте.

Вот, в общем то и всё что касается изменения цвета в HTML. Как видите, ничего сложного! Если у вас возникнут какие то вопросы – пишите их в комментариях.

Успехов вам и вашим проектам!

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

impuls-web.ru

font color, font face, font size

Font color, font face, font size

Доброго времени суток, уважаемые читатели блога Moi-tarakany.ru !

В прошлых статьях, мы с вами начали изучать HTML на примере простенькой странички.

В этом посте речь пойдёт о тегах, предназначенных для шрифтов.

Начнем, пожалуй, с цвета.

Font color

Как известно любой цвет — это смешанные в определенной пропорции три основных цвета — красный, зелёный и синий.

В HTML цвет задаётся шестнадцатеричным кодом. В шестнадцатеричной системе исчислений используется не десять, а 16 цифр. Первые 10 это цифры от 0 до 9, остальные 6 — обозначаются символами A, B, C, D, E и F. Цвет состоит из трёх пар цифр. Первая пара — обозначает красный цвет, вторая — зелёный, третья — синий. Чем выше значение конкретной пары, тем заметней будет цвет в конкретном оттенке.

#FF0000 — red — красный.
#00FF00 — green — зелёный.
#0000FF — blue — синий.
#000000 — black — чёрный.
#ffffff — white — белый.

Можно также использовать имена цветов на английском red, green, black, yellov, indigo, orange и так далее.
Но на самом деле цвета не всегда соответствуют своим именам. Например, darkgrey (тёмно-серый) светлее, чем grey (серый). Поэтому лучше использовать шестнадцатеричный код.

Для изменения цвета фона используется атрибут bgcolor (цвет фона) тэга body.
Например:

<body bgcolor="#00FF00">В этом примере цвет фона страницы будет зелёный</body>
В этом примере цвет фона страницы будет зелёный

Для придания нужного цвета тексту используется тэг font (шрифт) и его атрибут color (цвет). Пример:

<font color="#00ff00"></font>

Текст, заключённый в этот тег будет зелёный

<font color="#ffff00"></font>

или жёлтый.
Можно использовать тэг span (интервал) с атрибутом стиля style:

<span></span>

Текст, заключённый в этот тег тоже будет зелёный.

Тэг font кроме color имеет ещё два атрибута — size (размер) и face (гарнитура, начертание).

Font size

Для отображения текста используется семь предопределённых размеров. Чаще всего обычный текст отображается третьим размером:

<font size="4"></font>

Текст, заключённый в этот тег будет на один порядок крупнее обычного..

Font face

Атрибут fece — указывает браузеру, каким шрифтом отображать текст. В HTML используются шрифты трёх видов: serif — с засечечками на кончиках букв, sans-serif — без засечек и monospaced — моноширинные — все буквы имеют фиксированную ширину.

Шрифты с засечками, такие как «Times Nev Roman» и «Gorgia» хорошо подойдут для чтения больших фрагментов текста.

Для заголовков чаше используются шрифты без засечек, например «Arial».

А моноширинные, к примеру, «Courier Nev», пригодятся например, для отображения кода.

То, что вы укажете на страничке шрифт «Times Nev Roman», это не значит, что у посетителя вашего сайта текст обязательно отобразится указанным шрифтом. Дело в том на компьютере посетителя такого шрифта может не оказаться, и браузер использует шрифт, который стоит по умолчанию.

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

<font face="Times Nev Roman,Times,serif">

или так:

<font face="Verdana,Geneva,sans-serif">

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

Самые распостранённые шрифты для Windows: без засечек — Arial, Verdana, Tahoma, с засечками — Times New Roman, Georgia,

Давайте, используя полученные знания, создадим ещё одну страничку для нашего сайта. Создайте новый html-файл и вставьте в него следующий код:


<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    <title>Мой первый сайт. Страничка №2</title>
</head>
<body bgcolor="#330099" >
    <font color="#ffffff" >
        <h2 align="center">Привет мир</h2>
        <p>
	    <pre>                                                   Это вторая страничка моего первого сайта.

                          Текст на странице отображается белым,
                                              а сама страница цвета индиго.
                <font size="4">А в этой строке текст, на размер крупнее остального.</font>
        </pre>
	    </p>
        <hr/>
    </font>
</body>
</html>

Сохраним файл как 2.html

Вы, наверное, обратили внимание на то, как выровнен текст. Браузеры не воспринимают несколько пробелов подряд (сколько пробелов не ставь, браузер отобразит в тексте всего один).Вот для того чтобы «двигать» слова как Вам захочется можно использовать тег pre.

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

В следующих уроках продолжим изучать HTML тэги.

Похожие записи:

moi-tarakany.ru

HTML-теги. Изменение цвета шрифта — Инструкция по применению

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

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

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

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

Чтобы изменить цвет шрифта, войдите при редактировании в режим HTML.

 

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

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

 

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

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

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

 

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

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

 

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

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

 

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

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

 

www.help.siteberry.ru

Изменение цвета текста и добавление тени

Цвет текста

Если вам не нравится стандартный цвет текста, вы всегда можете его изменить с помощью свойства color, в качестве значения указав нужный вам цвет, например color:green:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      body { color:blue; }
      h2 { color:#00ff00; }
    </style>
  </head>

  <body>
    <h2>Заголовок имеет свой собственный цвет текста</h2>
    <p>Абзац будет наследовать цвет текста от родительского элемента, в качестве
    которого для него выступает элемент body.</p>
  </body>
</html>
Попробовать »

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

Добавление тени

Для добавления тени к тексту используется CSS свойство text-shadow, которое может принимать до четырех параметров:

  1. смещение тени вправо (при положительных значениях) или влево (при отрицательных значениях) от текста
  2. смещение тени вниз (при положительных значениях) или вверх (при отрицательных значениях) от текста
  3. размытие тени, чем больше число, тем смазаннее будет тень, нулевое значение означает полное отсутствие размытости (определяет четкую и резкую тень)
  4. цвет для тени
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>			
      h2 { text-shadow: 2px 2px 3px #000; }
    </style>
  </head>

  <body>
    <h2>Текст с тенью</h2>
  </body>
</html>
Попробовать »

С помощью свойства text-shadow можно задавать несколько эффектов тени к тексту, каждая тень в таком случае должна отделяться от предыдущей запятой:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      .test1 {
        background: #CCCCCC;
        color: #CCCCCC;
        font-size: 60px;
        text-align: center;
        text-shadow: 1px 1px 3px #666666,
                    -1px -1px 3px #FFFFFF;
      }
      .test2 {
        color: #707070;
        font-size: 60px;
        text-shadow: 1px 1px 0px #eee,
                     3px 3px 0px #707070;
      }
    </style>
  </head>

  <body>
    <h2>Текст с тенью</h2>
    <h2>Текст с тенью</h2>
  </body>
</html>
Попробовать »

Примечание: свойство text-shadow не поддерживается в IE9 и более ранних версиях.

С этой темой смотрят:

puzzleweb.ru

HTML атрибут цвет шрифта

HTML <FONT> Тег

примеров

Предустановленное цвет текста:

<font color=»red»>This is some text!</font>


Попробуйте »

Поддержка браузеров

Все основные браузеры поддерживают цветовые атрибуты.

Определение и использование

HTML5 не поддерживает тег <FONT>. Пожалуйста заменить CSS.

В HTML 4.01, <шрифт> атрибут Цвет устарел .

цвет атрибут определяет <FONT> элемент китайского цвета.

Замечания по совместимости

В HTML 4.01, <шрифт> Атрибут цвет отбрасывается. Пожалуйста заменить CSS.

CSS Синтаксис: <р стиль = «цвет: красный»>

Цвет настройки текста: CSS Примеры

В нашем учебнике CSS вы можете найти более подробную информацию о цветовых атрибутов текста деталей.

грамматика

<font color=»color_name|hex_number|rgb_number«>

Значение свойства

值 描述
color_name 规定颜色值为颜色名称的文本颜色（比如 «red»）。
hex_number 规定颜色值为十六进制值的文本颜色（比如 «#ff0000″）。
rgb_number 规定颜色值为 rgb 代码的文本颜色（比如 «rgb(255,0,0)»）。

HTML <FONT> Тег

www.w3big.com

No related posts.