Как изменить цвет текста в HTML? Примеры С#
В этой статье мы будем использовать примеры C#, чтобы показать различные способы изменения цвета текста в HTML с помощью библиотеки классов Aspose.HTML.
Изменить цвет текста на веб-странице легко с помощью свойства цвета CSS. Есть несколько способов установить значение этого свойства. Вы можете использовать встроенный, внутренний или внешний CSS, а значения цвета HTML могут быть указаны как стандартные имена цветов на английском языке или со значениями HEX, RGB, RGBA, HSL и HSLA. В приведенных ниже примерах мы будем использовать цветовые коды HEX и RGB, поскольку они используются чаще всего.
Если вы хотите узнать больше о цветовых кодах RGB, RGBA, HSL, HSLA и HEX, посетите статью Цветовые коды HTML. Примеры кода HTML о том, как изменить цвет текста, вы можете найти в статье Работа с цветом HTML.
Изменить цвет текста с помощью встроенного CSS (Inline CSS)
Вы можете изменить цвет текста внутри тега HTML, используя свойство color атрибута style. Это известно как встроенный CSS. Встроенный CSS позволяет применять пользовательские стили к одному HTML-элементу за раз. Вы устанавливаете CSS для элемента HTML, используя атрибут стиля с любыми свойствами CSS, определенными в нем.
Например, в следующем фрагменте кода показано, как указать свойство CSS color для элемента HTML <p> в существующем файле file.html. Сделайте несколько шагов:
- Загрузите существующий файл HTML.
- Найдите, например, первый элемент абзаца, чтобы установить атрибут стиля. Используйте метод
GetElementsByTagName(
name) класса Element, который возвращает первый элемент с заданным именем тега в порядке документа. - Используйте свойство
Style элемента
HTMLElement для установки атрибута
styleсо свойствомcolor. - Сохраните измененный HTML-документ.
C# code
1// Prepare output path for HTML document saving
2string savePath = Path.Combine(OutputDir, "change-paragraph-color-inline-css.html");
3
4// Prepare path to source HTML file
5string documentPath = Path.Combine(DataDir, "file.html");
6
7// Create an instance of an HTML document
8var document = new HTMLDocument(documentPath);
9
10// Find the first paragraph element to set a style attribute
11var paragraph = (HTMLElement)document.GetElementsByTagName("p").First();
12
13// Set the style attribute with color property
14paragraph.Style.Color = "#8B0000";
15
16// Save the HTML document to a file
17document.Save(Path.Combine(savePath));JavaScript code
1<script>
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";
7</script>В результате текст первого абзаца в файле HTML будет перекрашен в цвет #8B0000 DarkRed (см. рисунок а, проскрольте ниже).
Вы можете скачать полные примеры и файлы данных с GitHub.
Изменить цвет текста с помощью внутреннего CSS (Internal CSS)
Внутренний CSS популярен для применения свойств стиля к отдельным страницам. Вы можете применить внутренние таблицы стилей CSS, поместив элемент <style> в раздел <head> страницы. Например, вы хотите изменить цвет всех абзацев на веб-странице. Для этого нужно добавить p {color: #8B0000; } в раздел заголовка HTML-файла. Сделайте несколько шагов:
- Загрузите существующий файл HTML.
- Создайте элемент
<style>и назначьте значение цвета текста для всех элементов абзаца. Используйте метод CreateElement(localName), который создает элемент указанного типа. - Найдите элемент
<head>документа и добавьте в него элемент<style>. - Сохраните измененный HTML-документ.
C# code
1// Prepare output path for HTML document saving
2string savePath = Path.Combine(OutputDir, "change-paragraph-color-internal-css.html");
3
4// Prepare path to source HTML file
5string documentPath = Path.Combine(DataDir, "file.html");
6
7// Create an instance of an HTML document
8var document = new HTMLDocument(documentPath);
9
10// Create a style element and assign the text color value for all paragraph elements
11var style = document.CreateElement("style");
12style.TextContent = "p { color:#8B0000 }";
13
14// Find the document head element and append style element to the head
15var head = document.GetElementsByTagName("head").First();
16head.AppendChild(style);
17
18// Save the HTML document to a file
19document.Save(Path.Combine(savePath));JavaScript code
1<script>
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's <head> element and add a <style> element to it
7 var head = document.getElementsByTagName("head")[0];
8 head.appendChild(style);
9</script>Чтобы изменить цвет текста, вы можете использовать рассмотренные в этой статье примеры C# с элементами HTML <p>, <h1> или <h2> и т. д. Имейте в виду, что использование атрибута стиля (встроенный CSS ) переопределяет любой стиль, указанный в теге HTML <style> или во внешней таблице стилей.
На рисунке показаны результаты изменения цвета текста в соответствии с использованием встроенного CSS (a) и внутреннего CSS (b):
Aspose.HTML предлагает бесплатные Веб-приложения HTML, которые представляют собой онлайн-коллекцию конвертеров, слияний, загрузчиков, инструментов SEO, генераторов HTML-кода и многое другое. Приложения работают в любой операционной системе с веб-браузером и не требуют установки дополнительного программного обеспечения. Это быстрый и простой способ эффективно и действенно решать ваши задачи, связанные с HTML.
