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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также:  Как сделать деньги на мтс

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

Для начала отметим, что все цвета можно задавать в трех форматах:

  • Название цвета (red, blue, green и т.д.)
  • Шестнадцатеричный формат (#104A00, #0F0 и т.д.)
  • Формат rgba (rgba(0,0,0,0.5) и т.д.)

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

Способ 1. Через html тег

Самым простым способом изменить цвет текста в html является использование тега . Он позволяет изменить цвет, размер и стиль текста. Для этого у него есть три атрибута. Синтаксис:

На странице преобразуется в следующее

Новая версия стандарта HTML5 его не поддерживает. Но все современные браузеры понимают и еще видимо будут долго понимать. Тег font широко распространен на сайтах. Что впрочем легко объяснить его доступностью и простотой.

Способ 2. Через атрибут style

Есть второй похожий способ для изменения цвета шрифта. Для этого есть атрибут style, который можно применять к любым html тегам (

Синий цвет текста

Если текст не изменяет свой цвет, то можно попробовать воспользоваться декларацией !important

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

Способ 3. Через стили CSS

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

Классы primer1 и primer2 можно применить к любым другим html тегам.

Как изменить цвет HTML текста с помощь CSS атрибутов

  • HTML цвет текста определяется с помощью CSS атрибутов.
  • HTML цвет текста может быть задан в режиме HEX, например, color:#cc0000 .
  • Цвет текста в HTML также может быть задан словом, например, color:Black .
  • HTML фон текста определяется значением атрибута background-color .
Читайте также:  Увеличить скорость интернета windows 7 бесплатно

Попробуем изменить цвет текста в HTML:

Ссылка на основную публикацию
Как запустить лаунчер майнкрафт без интернета
В игре уже давно ввели возможность создание локального сервера в своём собственном мире, при этом все, кто находится в одной...
Как готовится к 1с специалист
Курс по Подготовка к аттестации 1С:Специалист по платформе 1С:Предприятие 8.3 Описание курса Курс для всех, кто хочет быстро подготовиться к...
Как делается сканирование документов
Пошаговая инструкция сканирования документов или фотографий через программу Paint. 1. Нажимаем кнопку ПУСК — левый нижний угол Рабочего стола. 2....
Как запустить мультиварку polaris
Многим доводилось посмотреть видео ютубовское: девочка лет десяти готовила сложные рецепты мультиваркой. Поларис, Редмонд, Панасоник — имена на слуху каждый...
Adblock detector