Как поменять цвет текста в html
Перейти к содержимому

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

  • автор:

Меняем цвет текста и фона

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

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

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

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

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

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

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

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

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

    Изменение цвета текста  
Красный текст заголовка

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

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

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

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

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

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

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

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

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

    Изменение цвета фона  
Заголовок.

Параграф.

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

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

Заголовок.

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

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

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

Разделы сайта

  • Как сделать сайт
    Самому и бесплатно
  • Учебник HTML
    Для начинающих
  • Учебник CSS
    Для новичков
  • Справочники
    По HTML и CSS
  • Примеры
    HTML и CSS
  • Ссылки
    Полезные сайты для вебмастеров
  • Инструментарий
    Программы для создания сайтов

Учебник HTML

  • Введение
  • Что такое HTML?
  • Теги и синтаксис HTML
  • Атрибуты HTML-тегов
  • Общие и текст
  • Структура HTML-документа
  • Параграфы и заголовки
  • Как изменить шрифт?
  • Меняем цвет текста и фона
  • Выравнивание содержимого
  • Цитаты и обрыв строки
  • Что такое спецсимволы HTML?
  • Горизонтальные линии
  • Группирование элементов
  • Комментарии в HTML
  • Ссылки
  • Cсылки и их разновидности
  • Меняем цвета ссылок
  • Ссылки на электронную почту
  • Якоря — создаем закладки
  • Изображения
  • Изображения
  • Изображения для фонов
  • Изображения — ссылки
  • Таблицы
  • Таблицы
  • Границы, рамки и отступы HTML-таблиц
  • Объединение ячеек таблицы
  • Вложенные таблицы
  • Списки
  • Нумерованные и маркированные списки
  • Метатеги
  • Метатеги и их типы

Copyright © 2010-2015 seodon.ru Все права защищены.

С условиями использования материалов данного сайта вы можете ознакомиться на странице автора.

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

В CSS за цвет текста отвечает свойство color . Оно может применяться к любому элементу и принимать цвет в одном из форматов:

  1. Шестнадцатеричная форма. Например, #0d6efd , #d63384 . Для подбора цвета и его значения используйте онлайн-сервисы, например HTML COLOR CODES
  2. Текстовое название: red , green , blue . Полный список находится на сайте W3C
  3. Формат RGB: rbg(255, 87, 51) . Первым значением указывается количество красного цвета, вторым значением количество синего и третьим значением количество зелёного
 class="text-white">Я белый текст 
.text-white  color: white; > 

Свойство наследуется, то есть если его указать на целый блок, то весь текст в нём будет указанного цвета

 class="text-orange"> Я оранжевый текст И я оранжевый текст  
.text-orange  color: rgb(255, 87, 51); > 

Как изменить цвет текста в HTML? Примеры С#

В этой статье мы будем использовать примеры C#, чтобы показать различные способы изменения цвета текста в HTML с помощью библиотеки классов Aspose.HTML.

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

Если вы хотите узнать больше о цветовых кодах RGB, RGBA, HSL, HSLA и HEX, посетите статью Цветовые коды HTML. Примеры кода HTML о том, как изменить цвет текста, вы можете найти в статье Работа с цветом HTML.

Изменить цвет текста с помощью встроенного CSS

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

Например, в следующем фрагменте кода показано, как указать свойство CSS color для элемента HTML

в существующем файле file.html. Сделайте несколько шагов:

  1. Загрузите существующий файл HTML.
  2. Найдите, например, первый элемент абзаца, чтобы установить атрибут стиля. Используйте метод GetElementsByTagName( name ) элемента Element, который возвращает первый элемент с заданным именем тега в порядке документа.
  3. Используйте свойство Style элемента HTMLElement для установки атрибута style со свойством color .
  4. Сохраните измененный HTML-документ.

C# code

 1using Aspose.Html;  2using System.IO;  3.  4  5 // Prepare output path for HTML document saving  6 string savePath = Path.Combine(OutputDir, "change-paragraph-color-inline-css.html");  7  8 // Prepare path to source HTML file  9 string documentPath = Path.Combine(DataDir, "file.html"); 10 11 // Create an instance of an HTML document 12 var document = new HTMLDocument(documentPath); 13 14 // Find the first paragraph element to set a style attribute 15 var paragraph = (HTMLElement)document.GetElementsByTagName("p").First(); 16 17 // Set the style attribute with color property 18 paragraph.Style.Color = "#8B0000"; 19 20 // Save the HTML document to a file 21 document.Save(Path.Combine(savePath));

JavaScript code

1script> 2 // Find the first paragraph element to set a style attribute 3 var paragraph = document.getElementsByTagName("p")[0]; 4 5 // Set the style attribute with color property 6 paragraph.style.color = "#8B0000"; 7script>

В результате текст первого абзаца в файле HTML будет перекрашен в цвет #8B0000 DarkRed (см. рисунок а, проскрольте ниже).

Вы можете скачать полные примеры и файлы данных с GitHub.

Изменить цвет текста с помощью внутреннего CSS

Внутренний CSS популярен для применения свойств стиля к отдельным страницам. Вы можете применить внутренние таблицы стилей CSS, поместив элемент в раздел страницы. Например, вы хотите изменить цвет всех абзацев на веб-странице. Для этого нужно добавить p в раздел заголовка HTML-файла. Сделайте несколько шагов:

  1. Загрузите существующий файл HTML.
  2. Создайте элемент и назначьте значение цвета текста для всех элементов абзаца. Используйте метод CreateElement( localName ) элемента Element, который создает элемент указанного типа.
  3. Найдите элемент документа и добавьте элемент к заголовку.
  4. Сохраните измененный HTML-документ.

C# code

 1using Aspose.Html;  2using System.IO;  3.  4  5 // Prepare output path for HTML document saving  6 string savePath = Path.Combine(OutputDir, "change-paragraph-color-internal-css.html");  7  8 // Prepare path to source HTML file  9 string documentPath = Path.Combine(DataDir, "file.html"); 10 11 // Create an instance of an HTML document 12 var document = new HTMLDocument(documentPath); 13 14 // Create a style element and assign the text color value for all paragraph elements 15 var style = document.CreateElement("style"); 16 style.TextContent = "p < color:#8B0000 >"; 17 18 // Find the document head element and append style element to the head 19 var head = document.GetElementsByTagName("head").First(); 20 head.AppendChild(style); 21 22 // Save the HTML document to a file 23 document.Save(Path.Combine(savePath));

JavaScript code

1script> 2 // Create a style element and assign the text color value for all paragraph elements 3 var style = document.createElement("style"); 4 style.textContent = "p < color:#8B0000 >"; 5 6 // Find the document head element and append style element to the head 7 var head = document.getElementsByTagName("head")[0]; 8 head.appendChild(style); 9script>

Чтобы изменить цвет текста, вы можете использовать рассмотренные в этой статье примеры C# с элементами HTML

, или и т. д. Имейте в виду, что использование атрибута стиля (встроенный CSS ) переопределяет любой стиль, указанный в теге HTML или во внешней таблице стилей.

На рисунке показаны результаты изменения цвета текста в соответствии с использованием встроенного примера CSS (a) и внутреннего примера CSS (b):

Текст “Два фрагмента HTML-документа с цветным текстом абзаца”

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

Как задать цвет текста в HTML

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

Рассмотрим несколько способов, позволяющих изменить цвет текста в HTML.

Цвет текста непосредственно в html-коде страницы. Данный способ предполагает использовать HTML-теги, как раз предназначенные для решения данной задачи. Пример задания цвета текста:

Это шрифт красного цвета

Цвет текста в HTML

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

#ffffff

#000000.

В случае, если все 6 букв или цифр в коде одинаковы, то, чтобы задать цвет шрифта в html можно использовать сокращенную форму кода: #fff.

Использование css-свойств для изменения цвета текста в HTML.

Изменять цвет текста в html можно также через css-свойство «color». Например:

1 2 3

Весь текст данного абзаца будет зеленого цвета, поскольку мы изменили его цвет через атрибут style, присвоив css-свойству color значение green

.

зеленый цвет текста

Задать цвет текста всей страницы можно, присвоив элементу body свойство color с нужным значением.

1 2 3 4 5 6 7 8 9
   Весь цвет текста страницы будет зеленого цвета 

Вместо атрибута style мы можем присвоить нужному элементу определенный класс, для которого в css-файле можно прописать необходимые свойства.

1 2 3 4 5 6 7 8 9 10

В файле style.css укажем свойство color для текста абзаца:

1 2 3

p .my_style
Другие посты

  • Курсив в html. Как сделать текст на странице курсивом?
  • Как изменить размер кнопки submit.
  • HTML ссылка. Создание ссылок в HTML.
  • Тег H1: что, как и зачем.
  • Как вставить картинку в HTML.

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

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