Как прописать в html цвет текста: Цвет текста (color) в HTML

Leave a Comment / Html / By /

Содержание

seodon.ru | Учебник HTML — Меняем цвет текста и фона

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

В этом уроке вы узнаете, как менять цвет фона и текста любых элементов HTML-страницы. Вообще, в языке HTML у некоторых тегов есть специальные атрибуты меняющие цвет, например bgcolor (цвет фона). Но, во-первых, эти атрибуты являются устаревшими (думаю помните, что это значит), а во-вторых, как я уже сказал, они есть не у всех тегов. И вот, допустим, вы захотели изменить цвет фона у параграфа текста. И как вы это будете делать, ведь у тега <P> нет такого атрибута? Поэтому, как и в предыдущих уроках, мы будем использовать стили (CSS), то есть универсальный атрибут style, который позволит нам менять цвет там, где мы захотим.

Как можно указывать цвет?

Цвета в HTML (и CSS) можно указывать несколькими способами, я покажу вам самые популярные и распространенные:

  • Имя цвета — В HTML имеется большой список цветов с именами и для того, чтобы указать цвет, достаточно написать его имя на английском, например: red, green, blue.
  • HEX-код цвета — Абсолютно любой цвет можно получить, смешав в разных пропорциях три базовых цвета — красный, зеленый и синий. HEX-код — это три пары шестнадцатеричных значений отвечающих за количество этих цветов в каждом цвете. Перед кодом цвета необходимо поставить знак решетка (#), например: #FF8C00, #CC3300 и так далее.

Раньше в HTML рекомендовалось использовать только безопасную палитру цветов, которая гарантированно отображалась во всех браузерах и на всех мониторах одинаково. Но сегодня ей ограничиваться совершенно не обязательно, так как и браузеры и мониторы давно научились правильно отображать гораздо больший список цветов. А вот указывать цвета по именам я вам как раз и не рекомендую, дело в том, что многие браузеры до сих пор с одним и тем же именем связывают разные цвета. Поэтому в данном учебнике я буду всегда использовать именно HEX-коды цветов.

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

Чтобы изменить цвет текста в любом элементе HTML-страницы надо указать внутри тега атрибут style. Общий синтаксис следующий:

<тег>…</тег> — указание цвета текста по имени.

<тег>…</тег> — указание цвета текста по коду.

И как обычно, чтобы изменить цвет текста на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить цвет шрифта для фрагмента текста, то заключите его в тег <SPAN> и примените атрибут к нему.

Пример изменения цвета текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение цвета текста</title>
</head>
<body>
<h5>Красный текст заголовка</h5>
<p>Синий текст параграфа.</p>
<p>
 <em>Зеленый курсив.</em>
 <span>Красный текст.</span> 
</p>
</body>
</html>

Результат в браузере

Красный текст заголовка

Синий текст параграфа.

Зеленый курсив. Красный текст.

Как изменить цвет фона?

Цвет фона любого элемента страницы меняется также с помощью атрибута style. Общий синтаксис такой:

<тег>…</тег> — указание цвета фона по имени.

<тег>…</тег> — указание цвета фона по коду.

Пример изменения цвета фона

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение цвета фона</title>
</head>
<body>
<h5>Заголовок.</h5>
<p>Параграф.</p>
<p>
 <b>Жирный текст.</b>
 <span>Обычный текст.</span> 
</p>
</body>
</html>

Результат в браузере

Заголовок.

Параграф.

Жирный текст. Обычный текст.

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

Домашнее задание.

  1. Создайте заголовок статьи и двух ее разделов. Напишите в начале статьи и каждом разделе по одному параграфу.
  2. Установите на всей странице шрифт Courier с размером 16px, у заголовка статьи — 22px, а у подзаголовков по 19px.
  3. Пусть у заголовка статьи будет цвет текста #0000CC, а у подзаголовков — #CC3366.
  4. Выделите фоновым цветом #66CC33 два слова во втором параграфе. А в третьем параграфе этим же цветом, но одно подчеркнутое слово.
  5. Не забывайте о том, что значения атрибута style можно группировать, ставя между ними точку с запятой (;).

Посмотреть результат → Посмотреть ответ

Как изменить шрифт?← Содержание →Выравнивание содержимого

Как изменить цвет шрифта html

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

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

**<h2>Заголовок 1-го уровня</h2>

для файла стилей указываете цвет в соответствующем классе, заголовка, обычного текста или текста со слылкой.

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

Как задать цвет фона и текста на web-странице?

По умолчанию цвет текста и вообще любого шрифта на web-страницах всегда черный (#000000). Но мы всегда можем задать абсолютно любой цвет, который нам нравится и прилично смотрится или же больше подходит под дизайн конкретного сайта.

Задаем цвет текста

В HTML цвет текста, шрифта, фона и других элеменотов можно задать двумя способами:

1. Способ 1-й. В парных тегах <font> </font> прописывается атрибут <color> с указанием названия нужного цвета. Название цвета указывается по английски. Например, цвет заголовка на нашей web-странице можно задать таким способом:

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

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

Обзор автомобилей 2008 года.

2. Второй способ задания нужноо цвета — это прописать цвет его шестнадцатеричным значением в палитре RBG в виде: #RRBBGG, где RR — красный цвет (red), BB — синий (blue) и GG — зеленый (green). Чем выше значение одной из компонент, тем она более интенсивна (насыщена).

Оттенки серого получаются при задании одинаковых значений для всех трех компонент. Каждая компонента может варьироваться от 0 до FF (255), т.е. всего можно получить 256х256х256=16777216 цветов. При указании цвета в шестнадцатеричным значением обязательно ставится знак: # . Полностью код будет выглядеть вот так:

<p><font color=»#FF0000″> Текст красного цвета </font></p>

<p><font color=»red»> Текст красного цвета </font></p>

<p><font color=»#FF0000″> Текст красного цвета </font></p>

равнозначны и отображаться браузерами будут совершенно одинаково.

Для нашей web-странички, я например шрифт заголовка выделил красным цветом «red», а текст на статьи задал темно-синим, прописав внутри каждого абзаца (p) таким образом:

Задаем цвет фона web-страницы

Так же как и цвет текста Мы можем изменить и цвет фона нашей страницы.

По умолчанию фон web-страницы всегда задается белый цветом (white или #FFFFFF), но даже если Вы хотите оставить фон страницы белым, его всеравно рекомендуется прописать, потому что не всегда браузеры корректно отображают значения по умолчанию. Делается это через атрибут: bgcolor. Цвет фона на web-странице прописывается внутри тега: body , т.е запись будет выглядеть так:

Посмотреть на то, что у нас получилось можно здесь. Если Вам что-то не понятно можно открыть HTML код страницы. В браузере IE это делается через меню: Вид > Просмотр HTML кода, в браузере Opera это меню: Вид > Исходный текст.

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

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

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

Этот атрибут можно использовать как в CSS, так и в самих тегах на подобие FONT, SPAN и DIV. Здесь очень легко ориентироваться, но нужно знать определенные цвета. Цвета могут быть записаны на английском языке (red, green, blue), могут быть записаны в RGB или в 16-ричном коде.

Код для использования в CSS:

Код в тегах:

Также можно использовать для тега атрибут style , вот таким будет код:

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

Как узнать цвет в Photoshop?

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

2. Чтобы определить цвет на изображении используйте инструмент «Пипетка» , просто кликните по нужной вам области изображений, верхний цвет в панели инструментов изменится на выбранный.

Примеры цвета:

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

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

Уважаемые пользователи! Мы благодарим Вас за то, что Вам интересен нашен контент, поэтому с каждым днем хотим становиться все лучше и лучше!

Большое спасибо за вашу помощь и внимательность к нам!

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

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

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

Создаем папку background_color (создайте любую папку по своему желанию, только не забывайте в файле index.php в тегах option указывать правильный url путь к CSS файлу) и в нее помещаем четыре CSS файла, которые и будут менять сам фон.

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

Создаем файл index.php. В нем подключаем два CSS стиля.

Теперь сам код на JavaScript, который работает с CSS стилями. Все стили записываются в Cookie. Время хранения данных в Cookie 24 часа (по своему желанию, измените это время, на которое Вам необходимо). Затем создается метод, который считывает определенное время параметра из Cookie. Как параметр по времени проходит, Cookie автоматически обновляются в первичное состояние. При записи нового параметра в Cookie формируется url путь к CSS стилю. Если CSS файл существует, он записывается в Cookie, если же CSS файл не найден, то функция возвращает первичное значение. При записи выполняется установка фона. Как пользователь обновляет фон, информация сбрасывается с Cookie и перезаписывается на новый CSS файл.

Выборку я представил с помощью атрибута списка select, Вы же можете реализовать ее по своему желанию. Единственное, что стоит понимать, выборка осуществляется по обработчику событий onchange, в котором указывается связь между методом CSSThemeChanger(this. value) и в option указывается путь к CSS файлу.

  • white.css — по умолчанию
  • blue.css
  • orange.css
  • red.css

В каждом CSS файле прописываем цвет фона, соответственно, каждый под свое имя.

Плавное изменение текста и цвета
Есть 2 кнопки, надо чтобы при нажатии на 1 становился зелёный текст &quot;Work&quot;, а на 2 красный.

Изменение цвета тени текста
Привет всем! Подскажите пожалуйста как правильно прописать скрипт в onChange чтобы поменять цвет у.

Изменение цвета редактируемой области текста
Я новичок в сфере веб. Пытаюсь любые идеи\задачи реализовать при помощи html/css/js. Вот суть.

Изменение цвета текста в <input disabled>
Собственно как изменить цвет текста в &lt;input disabled. и вообще это возможно.

alexandr017, очень кратко:

1. в javascript’e имеются объекты (это само окно window; документ, который в это окно загружен document; любые теги, которые в этом документе прописаны)

2. все объекты обладают всякими-разными свойствами (в том числе и размером шрифта, и цветом, и высотой, и шириной, и отступом и т.д. и т.п. Всякий атрибут всякого тега — это отдельное свойство этого тега как объекта. Например, для <img src=»»> атрибут SRC — это свойство объекта тега <IMG>)

3. практически все свойства всех объектов можно и узнать («а какой там размер шрифта прописан?»), и изменить («а вот пусть теперь будет не 10 пикселей, а 25 пикселей!»)

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

итак, повторим:
в javascript’e имеются объекты, у которых есть всякие-разные свойства, которые можно узнавать и изменять по каким-то событиям

ваша задача как раз типовая: вы хотите по событию (наведение курсора мыши) изменить свойства (размер и цвет шрифта) у какого-то объекта (а вот здесь вы не указали — какого именно, потому что «надпись» — она же не просто так, она в каком-то теге, так ведь?)
——

это я всё к тому написал, чтобы вы, получив здесь ответ (мей би, кто-то его и даст) на свой первый вопрос, не стали задавать второй-третий-десятый. типа, спасибо за изменение размера и цвета, а вот как теперь изменить жирность? или ширину? или не у того тега, а у другого? и т.д.

всё и везде абсолютно одинаково: событие=»объект.свойство_объекта = ‘новое значение’;»

Sergio В первый раз за долгое время читаю пост о скриптах, спасибо =) NMitra Решила записать, вдруг кому-то пригодиться ) Александр Александрович Здравствуйте! Как можно выровнять по центру кнопки соц. сетей, которые под статьей и можно ли сделать так, чтобы они были только в статьях, а не в рубриках/главной.
Сайт: http://blog-fiz.blogspot.com/

Заранее спасибо! NMitra Нужно добавить CSS http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html#css

По второму вопросу: окружите код условием см. http://shpargalkablog.ru/2011/02/uslovnye-tegi-v-blogger.html

Александр Александрович Так дело в том что это скрипт. Может в сам скрипт вставить этот код? NMitra Окружите скрипт div, который от центрируйте. Анонимный «Заменить кнопку на ссылку»

Я не уверен, как это сделать с использованием чистого JavaScript. Используйте набор классов ‘a1’.

3 ответа

0 Решение brainbowler [2014-07-22 22:38:00]

Чтобы получить один элемент через id:

0 AstroCB [2014-07-22 22:57:00]

Вы должны установить встроенный стиль div , что довольно просто.

Просто перебирайте все элементы с классом a1 и задайте их атрибут style :

Это добавляет style=»#FFFFFF» к каждому элементу, который устанавливает цвет текста в белый.

Все, что вам нужно, чтобы изменить цвет текста, — это кнопка, которая вызывает функцию при нажатии

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

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

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

Вёрстка сайта с нуля 2.0

Как научиться верстать сайты любой сложности и под любые устройства, даже если сейчас Вы не знаете, что такое 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 минут дадут вам представление о том, как создаются современные сайты… Подробнее…

Помощь в технических вопросах

Помощь студентам. Курсовые, дипломы, чертежи (КОМПАС), задачи по программированию: Pascal/Delphi/Lazarus; С/С++; Ассемблер; языки программирования ПЛК; JavaScript; VBScript; Fortran; Python; C# и др. Разработка (доработка) ПО ПЛК (предпочтение — ОВЕН, CoDeSys 2 и 3), а также программирование панелей оператора, программируемых реле и других приборов систем автоматизации. Подробнее…

Как изменить цвет текста в HTML? — 3 лучших способа создать потрясающий контент для веб-сайта

  • Время чтения:

Темно-пурпурный цвет шрифта в различных форматах: Имя ШЕСТИГР. RGB
Темно-пурпурный #8b008b (139, 0, 139)