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

1. Использование встроенного атрибута style . Добавление цвета на веб-страницу является частью встроенного стиля CSS. Чтобы установить цвет текста или фона в HTML, вам нужно использовать атрибут style . Вы можете применить атрибут style к HTML-тегам ,

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

2. Использование внутреннего CSS. Вариант внутреннего стиля CSS популярен для применения свойств к отдельным страницам путем помещения всех стилей в элемент , размещенный в HTML-документов.

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

Дополнительные сведения об использовании цветовых кодов HTML см. в статье Цветовые коды HTML.

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

Цвет текста

Вы можете использовать встроенный атрибут style или элемент , чтобы изменить цвет текста, а затем установить значение с помощью свойства color . Свойство color устанавливает значение цвета переднего плана для текста элемента и оформления текста. Свойство color принимает имена цветов, значения RGB, RGBA, HEX, HSL или HSLA.

Цвет текста с помощью имен цветов HTML

Имя цвета отображает конкретное имя цвета HTML. Современные браузеры поддерживают 140+ названий цветов HTML, и вы можете использовать любое из них для своих элементов. Например, вы можете раскрасить текст, используя встроенный атрибут style , как показано в следующем примере:

1html> 2 body> 3 h2 style="color:DarkCyan;">How to set text color using HTML color names?h2> 4 h3 style="color:DarkRed;">Add a style attribute to the text element you want to colorize and use the color name to specify the color.h3> 5 h4 style="color:DarkBlue;">There are over 140 named colors to choose from that you can use.h4> 6 body> 7html>

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

 1html>  2head>  3style>  4h2   5 color:DarkCyan;  6>  7h3   8 color:DarkRed;  9> 10h4  11 color:DarkBlue; 12> 13style> 14head> 15 body> 16 h2>How to set text color using HTML color names?h2> 17 h3>Add a style attribute to the text element you want to colorize and use the color name to specify the color.h3> 18 h4>There are over 140 named colors to choose from that you can use.h4> 19 body> 20html>

Отрендеренный HTML-код выглядит следующим образом:

Вы можете узнать больше о применении встроенного, внутреннего и внешнего CSS и их редактировании с помощью Aspose.HTML API из Edit CSS. Примеры C# изменения цвета текста с помощью Aspose.HTML API вы можете найти в статье Как изменить цвет текста в HTML.

Цвет текста с использованием цветовых кодов RGB, RGBA или HEX.

Для раскрашивания текста HTML вы можете использовать RGB или HEX, которые являются наиболее часто используемыми цветовыми кодами. Значение RGB определяет цвет HTML путем смешивания красных, зеленых и синих значений. Значение цвета HEX работает почти так же, как RGB, но выглядит иначе. Если вы хотите узнать больше о кодах RGB, RGBA и HEX, посетите статью Цветовые коды HTML.

Использование цветовых кодов RGB или HEX является наиболее распространенным способом добавления цвета на веб-страницы. Необходимо добавить атрибут style к текстовому элементу, который вы хотите раскрасить. В приведенном ниже примере мы используем элементы и , чтобы применить встроенный атрибут style и свойство color с кодами RGB, RGBA и HEX:

1html> 2 body> 3 h2 style="color:rgb(50,150,200);">How to use Text Color?h2> 4 h3 style="color:rgba(220,30,100,1);"> 1. To colorize HTML text, add a style attribute to the text element you want to color.h3> 5 h3 style="color:#1A8D7E"> 2. Apply the color property to specify the color using RGB, RGBA or HEX code.h3> 6 body> 7html>

Визуализированный HTML-код выглядит следующим образом:

Цвет текста с использованием цветовых кодов HSL или HSLA

HSL (Hue, Saturation, Lightness) — это представление цветовой модели RGB в цилиндрических координатах. Оттенок (Hue) определяет основной цвет и измеряет его в градусах от 0 до 360 на цветовом круге RGB. Насыщенность (Saturation) — это интенсивность или чистота цвета, которая определяется в процентах от 0 (черный и белый) до 100 (яркий цвет). Легкость (Lightness) – это количество яркости или света в цвете. Он определяется в процентах от 0 (черный) до 100 (белый).

Цветовые значения HSLA являются расширением цветовых значений HSL с альфа-каналом, определяющим непрозрачность цвета. Значение цвета HSLA указывается с оттенком, насыщенностью, яркостью и альфа-каналом, где параметр альфа определяет непрозрачность. Альфа-параметр представляет собой число от 0,0, что означает «полностью прозрачный», до 1,0, что означает «полностью непрозрачный».

Используя тот же атрибут style , что и раньше, замените код RGB/RGBA/HEX или имя цвета значением HSL или HSLA в свойстве color :

1html> 2 body> 3 h2 style="color:hsl(200,100%,40%);">HSL and HSLA color codesh2> 4 p style="color:hsla(200,100%,40%,0.9); font-size:18px;">HSL(hue, saturation, lightness) is a representation of the RGB color model in cylindrical coordinates.p> 5 p style="color:hsla(200,100%,40%,0.6); font-size:18px;">HSLA color values are an extension of HSL color values with an alpha channel that determines the opacity of the color.p> 6 body> 7html>

Отрендеренный HTML-код выглядит следующим образом:

Фоновый цвет — Background Color

Цвет фона для определенного элемента HTML

Вы можете использовать атрибут style , чтобы указать цвет фона для HTML-элемента, а затем установить значение, используя свойство background-color . Свойство background-color принимает имена цветов, значения RGB, RGBA, HEX, HSL или HSLA.

Определите, для какого элемента вы хотите изменить цвет фона. Если это абзац, найдите открывающий тег

. Это также может быть тег … , или . В этом примере мы добавляем цвет фона к элементам :

 1html>  2 body>  3 p>The color name is "YellowGreen":p>  4 h2 style="background-color:rgb(154, 205, 50);">rgb(154, 205, 50)h2>  5 h2 style="background-color:#9ACD32;">#9ACD32h1>  6 h2 style="background-color:hsl(80, 61%, 50%);">hsl(80, 61%, 50%)h2>  7  8 p>RGBA values of name "YellowGreen" color, with different transparent:p>  9 h2 style="background-color:rgba(154, 205, 50, 0.2);">rgba(154, 205, 50, 0.2)h2> 10 h2 style="background-color:rgba(154, 205, 50, 0.5);">rgba(154, 205, 50, 0.5)h2> 11 h2 style="background-color:rgba(154, 205, 50, 0.8);">rgba(154, 205, 50, 0.8)h2> 12 13 p>HSLA values of name "YellowGreen" color, with different transparent:p> 14 h2 style="background-color:hsla(80, 61%, 50%, 0.2);">hsla(80, 61%, 50%, 0.2)h2> 15 h2 style="background-color:hsla(80, 61%, 50%, 0.5);">hsla(80, 61%, 50%, 0.5)h2> 16 h2 style="background-color:hsla(80, 61%, 50%, 0.8);">hsla(80, 61%, 50%, 0.8)h2> 17 body> 18html>

Отрендеренный HTML-код выглядит следующим образом:

Цвет фона для всей веб-страницы

Важно отметить, что в приведенном выше примере свойство background-color обеспечивает цвет фона текста, но не всего документа. Если вы хотите изменить цвет HTML для всей страницы, вы должны использовать свойство background-color атрибута style в открывающем теге раздела :

 1html>  2 body style="background-color:#e0e0e0">  3 h2 style="background-color:YellowGreen;">YellowGreenh2>  4 h2 style="background-color:rgb(154, 205, 50);">rgb(154, 205, 50)h2>  5 h2 style="background-color:rgba(154, 205, 50, 1.0);">rgba(154, 205, 50, 1.0)h2>  6 h2 style="background-color:#9ACD32;">#9ACD32h2>  7 h2 style="background-color:hsl(80, 61%, 50%);">hsl(80, 61%, 50%)h2>  8 h2 style="background-color:hsla(80, 61%, 50%, 1.0);">hsla(80, 61%, 50%, 1.0)h2>  9 body> 10html>

Изображение отображает HTML-код для установки цвета фона для текста (название цвета YellowGreen указано в разных цветовых кодах) и всей веб-страницы.

Еще один пример достижения эффекта окрашивания фона всей веб-страницы с помощью атрибута style со свойством background-color в открывающем теге секции :

1html> 2 body style="background-color:#ffe0e0;"> 3 h2>How to set Background Color for the whole web page?h2> 4 p>Add the style attribute to the body section and apply the background-color property to specify a color using color name, RGB, HEX or HSL code.p> 5 body> 6html>

Цвет границы — Border Color

Вы можете использовать атрибут style со свойствами border-style и border-color , чтобы указать цвет границы для текстовых элементов. Свойство CSS border-color определяет цвет четырех границ элемента. Свойство border-color будет работать, только если сначала определено свойство border-style , которое используется для установки границ. Это свойство не будет работать в одиночку. Если это свойство не установлено, оно наследует цвет элемента. Свойство border-color принимает имена цветов, значения RGB, RGBA, HEX, HSL или HSLA.

1html> 2 body> 3 p> The border-color property only works when the border-style property is defined first, which is used to set the borders.p> 4 h2 style="color:rgb(50,150,200); border-style:solid; border-color:rgb(220,30,100);">How to define border color?h2> 5 p> If the border-style property is defined and the border-color property is not set, the border inherits the element's color.p> 6 h2 style="color:rgb(50,150,200); border-style:solid;">How to define border color?h2> 7 body> 8html>

Aspose.HTML предлагает бесплатное онлайн-приложение Color Wheel Picker, которое позволяет создавать наборы цветов в цветовом коде HEX. Вы можете использовать это бесплатное онлайн-приложение, чтобы найти цветовые гармонии, используя правила сочетания цветов, но также важно экспериментировать с цветом. Color Wheel Picker предлагает отличный способ поэкспериментировать с цветом и самостоятельно создавать захватывающие цветовые комбинации. Приложение работает для компьютеров, планшетов и мобильных устройств. Так что создавайте свою уникальную палитру для любого проекта!

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

Для изменения цвета текста в списке используйте стилевое свойство color, добавляя его к селектору ul , ol или li , как показано в примере 1.

Пример 1. Цвет фона в списке

Результат данного примера показан на рис. 1.

Рис. 1. Выделение цветом текста списка

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

См. также

• color
• currentColor
• text-fill-color
• Атрибут link
• Единицы цвета в CSS
• Наследование в CSS
• Работа с типографикой

Как изменить цвет текста в 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):

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

Цветовые коды HTML — HEX, RGB, RGBA, HSL и HSLA

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

Цвета HTML

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

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

HTML-имена цветов

W3C спецификация имен цветов различает базовые и расширенные цвета. 16 основных цветов: цвет морской волны, черный, синий, фуксия, серый, зеленый, салатовый, темно-бордовый, темно-синий, оливковый, фиолетовый, красный, серебристый, бирюзовый, белый и желтый. Современные браузеры поддерживают 147 имен цветов HTML.

На рисунке показаны 16 основных цветов с кодами HEX и RGB:

Цветовые коды HTML

Цветовые коды HTML — это средство представления цветового формата, который компьютер может читать и отображать. Цветовые коды используются в HTML и CSS для создания цветовых схем веб-дизайна. Они в основном используются веб-дизайнерами, фронтенд-разработчиками, программистами и цифровыми иллюстраторами.

Цвета RGB

RGB (Red, Green, Blue) — это аддитивная цветовая модель, которая описывает, как любой цвет кодируется с помощью трех основных. Это основа цвета, отображаемого светом на экранах телевизоров, компьютерах, сканерах изображений, видеопроекторах, цифровых камерах и мобильных устройствах.

Значения R, G и B представляют собой интенсивность (в диапазоне от 0 до 255) соответственно красного, зеленого и синего компонентов определяемого цвета. То есть ярко-синий цвет можно определить как (0,0,255), красный — как (255,0,0), ярко-зеленый — (0,255,0), черный — (0,0,0), а белый — ( 255 255 255). RGB — популярная модель цветового кода в фотографии, телевидении и компьютерной графике. Поскольку существует 256 различных вариантов количества для каждого цвета. Таким образом, всего может быть 256^3 = 16 777 216 различных цветов RGB. Смешивание этих трех цветов даст вам цветовой код RGB, представленный, например, как этот RGB(125,50,210).

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

Шестнадцатеричные цвета

HEX-коды являются наиболее часто используемыми цветовыми кодами. HEX-коды представляют собой трехбайтовые шестнадцатеричные числа (шесть переменных). Шестизначный номер цвета состоит из трех групп по две цифры, которые определяют количество красного, зеленого и синего в аддитивном цвете. Каждая шестнадцатеричная пара из двух цифр может иметь значение от 00 до FF. Это дает более 16 миллионов возможных цветов.

Код выражается следующим образом: #RRGGBB, где каждое из двузначных значений представляет собой диапазон каждого из трех цветов (Red, Green, Blue), с помощью которого вы выбираете окончательное значение, представляющее каждый цвет. Например, #00FF00 отображается зеленым, потому что для зеленого компонента установлено максимальное значение (FF), а для остальных установлено значение 00.

Цвета RGBA

Цветовые значения RGBA(Red, Green, Blue, Alpha) являются расширением цветовых значений RGB с альфа-каналом, определяющим непрозрачность цвета. Альфа-параметр представляет собой число от 0,0, что означает «полностью прозрачный», до 1,0, что означает «полностью непрозрачный». Например, rgba(255, 0, 0) отображается как чистый красный цвет, rgba(255, 0, 0, 0,5) отображается как красный цвет с непрозрачностью 50%.

На рисунке показаны значения RGBA названия цвета «YellowGreen» с разной прозрачностью:

Для значения RGBA, в отличие от значений RGB, нет шестнадцатеричной записи.

Цвета HSL

Многие люди считают цветовой код RGB неинтуитивным и аппаратно-ориентированным. Цветовая модель HSL (Hue, Saturation, Lightness) была разработана в 1970-х годах исследователями компьютерной графики, чтобы более точно соответствовать тому, как человеческое зрение воспринимает атрибуты, производящие цвет. В модели HSL цвета каждого оттенка располагаются в радиальном срезе вокруг центральной оси нейтральных цветов, начиная от черного внизу и заканчивая белым вверху. Представление HSL изменяет цвета, чтобы сделать их более интуитивными, чем представление RGB. Он часто используется для приложений компьютерной графики, таких как средства выбора цвета и анализ изображений.

На рисунке показана трехмерная графическая интерпретация модели HSL (а), изображение взято с сайта commons.wikimedia.org/wiki/. На рисунке (b) показана двухмерная графическая интерпретация модели HSL для значения яркости 50%.

HSL — это представление цветовой модели RGB в цилиндрических координатах. Оттенок (Hue) определяет основной цвет. Оттенок — это практически любой цвет на цветовом круге; это градус на цветовом круге от 0 до 360. Итак, 0 — красный, 120 — зеленый, 240 — синий. Насыщенность (Saturation) — это интенсивность или чистота цвета. Она определяет, насколько ярким будет цвет. Ноль процентов — серый, а 100 процентов — полностью насыщенный цвет. Яркость (Lightness) – это количество яркости или света в цвете. Яркость определяет, насколько черный или белый оттенок имеет цвет. Например, 50 процентов не имеют оттенка, ноль процентов — полностью черный, а 100 процентов — полностью белый.

Примеры цветов HSL

В таблице ниже представлен один оттенок. Красный цвет был выбран из цветового круга. Оттенок (Hue)=0. Ось X таблицы представляет насыщенность (Saturation) (100%, 75%, 50%, 25%, 0%). Ось Y представляет Lightness. 50% — это «нормально».

Цвета HSLA

Цветовые значения HSLA(Hue, Saturation, Lightness, Alpha) являются расширением цветовых значений HSL с альфа-каналом, определяющим непрозрачность цвета. Значение цвета HSLA указывается с оттенком, насыщенностью, яркостью и альфа-каналом, где параметр альфа определяет непрозрачность. Альфа-параметр представляет собой число от 0,0, что означает «полностью прозрачный», до 1,0, что означает «полностью непрозрачный». Например, hsla(0, 100%, 50%, 1) отображается чисто красным, hsla(0, 100%, 50%, 0,5) отображается красным с непрозрачностью 50%:

Заключение

Цвета HTML можно определить по имени, значениям RGB, RGBA, HEX, HSL или HSLA и применить к фону или тексту в документах HTML.

На рисунке ниже показано, как указать бирюзовый цвет по имени, значениям RGB, RGBA, HEX, HSL и HSLA:

Aspose.HTML предлагает бесплатную онлайн-программу Color Wheel Picker, которая позволяет создавать наборы цветов в цветовом коде HEX. Вы можете использовать это бесплатное онлайн-приложение, чтобы найти цветовые гармонии, используя правила сочетания цветов, но также важно экспериментировать с цветом. Color Wheel Picker предлагает отличный способ поэкспериментировать с цветом и самостоятельно создавать захватывающие цветовые комбинации. Приложение работает для компьютеров, планшетов и мобильных устройств. Так что создавайте свою уникальную палитру для любого проекта!