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

Изменить цвет шрифта

Чтобы изменить цвет шрифта в HTML нужно использовать CSS-свойство color. Например, чтобы сделать красный шрифт, нужно прописать color: red. Где это писать? Есть 2 варианта.

Первый вариант — прямо в HTML. Для требуемого текста нужно прописать style=»color: red;». Вот пример:

Этот текст станет красным.

Если у Вас любой другой цвет, например, в HEX-формате, то вставляете его вместо red.

Выделим 1 слово или словосочетание.

В предыдущем примере выделяется красным весь абзац, то есть всё, что находится внутри тега . Но что, если Вам нужно выделить цветом одно слово, словосочетание, предложение? Тогда нужно требуемый текст обрамить вокруг тегом , и задать цвет для него. Пример:

Здесь выделится только одно слово цвет.

В этом примере изменится цвет только у одного слова «цвет».

Второй вариант — прописать цвет в CSS. У Вас должен быть файл типа файл.css (например, style.css). Нужно сперва в HTML-файле обрамить требуемый текст тегом и задать ему класс, например:

Это просто текст. А это нужный текст

В качестве класса подходит любое английское слово.

Теперь в CSS-файле нужно прописать:

.highlight

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

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

Этот сайт, как и все сайты, использует cookie. Продолжая использовать этот сайт, Вы даете свое согласие на обработку cookie.OK

Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.

Always Enabled

Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Analytics».
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category «Functional».
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category «Necessary».
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Performance».
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Functional

Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.

Performance

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.

Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.

Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.

Установка цвета для текста в CSS. Способы представления цветов

В первой части книги, в некоторых примерах мы уже демонстрировали, как установить цвет текста в CSS. Здесь нет ничего сложного: вам понадобится свойство color и значение того цвета, которым вы желаете окрасить текст.

В нашем примере значение #211C18 означает шестнадцатеричный код цвета. Если вы уже знакомы с шестнадцатеричной системой счисления, то можете пропустить чтение следующего абзаца. Также далее мы расскажем о других способах представления цветов в веб – с помощью цветовых моделей (RGB, HSL) и ключевых слов. Эта информация будет полезна новичкам и рекомендуется к прочтению.

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

Шестнадцатеричная система счисления (hexadecimal, hex) основывается на числе 16. Для записи шестнадцатеричного значения используется 16 символов: арабские цифры от 0 до 9 и первые буквы латинского алфавита (A, B, C, D, E, F). Цвет в шестнадцатеричном формате записывается в виде трех двузначных чисел от 00 до FF (перед ними обязательно ставится символ решетки #), что соответствует трем компонентам: Red, Green, Blue (цветовая модель RGB). Иными словами, запись цвета можно представить как #RRGGBB , где первая пара символов определяет уровень красного, вторая – уровень зеленого, третья – уровень синего цвета. Результирующий цвет является сочетанием этих трех цветов.

Сокращенная запись hex-цветов

Некоторые шестнадцатеричные значения цветов можно записать сокращенно. Для этого следует превратить запись вида #RRGGBB в #RGB . Это можно сделать в том случае, когда в hex-числе имеется три пары одинаковых символов.

Сокращенная форма записи встречается довольно часто, и для вашего ознакомления мы приведем несколько примеров сокращений. К слову, hex-значения цветов не чувствительны к регистру – вы можете использовать как прописные, так и строчные буквы, всё зависит от вашего желания и вкуса.

Примеры сокращенной записи hex-цветов:

HEX-код	Сокращенная запись
#FFDD66	#FD6
#8833FF	#83F
#333333	#333
#cccccc	#ccc

Цветовая модель RGB

Второй способ указания цвета в CSS – использовать десятичные значения RGB (Red, Blue, Green). Для этого необходимо записать после свойства color ключевое слово rgb , а затем в скобках и через запятую – три числа в диапазоне от 0 до 255, каждое из которых означает интенсивность красного, зеленого и синего цветов (r, g, b). Чем больше число, тем более интенсивен цвет. К примеру, чтобы получить ярко-зеленый цвет, нужно записать:

А вот желтовато-горчичный оттенок имеет такое значение:

color: rgb(94, 81, 3); /* ниже – тот же цвет, записанный в шестнадцатеричном виде: */ color: #5E5103;

Значение черного цвета записывается как (0, 0, 0) , а белого – (255, 255, 255) . Также допускается указывать эти значения в процентах. Так, число 255 соответствует 100%, следовательно, белый цвет можно задать следующим образом:

color: rgb(100%, 100%, 100%);

Где искать значения цветов

Возможно, у вас возник вопрос: откуда же брать все эти значения цветов? Существует множество графических редакторов и онлайн-сервисов, с помощью которых можно подбирать цвета и строить цветовые схемы. Одна из наиболее популярных программ, в которой можно выбрать подходящий цвет и получить его значение RGB, hex и не только – Adobe Photoshop. В качестве альтернативы есть специальные сайты, на которых можно легко подобрать не только цвет, но и целую цветовую схему. Отличный пример – сервис Adobe Color CC.

Цветовая модель RGBA

Задать цвет в формате RGBA можно почти так же, как и в RGB. Отличие RGBA от RGB заключается в наличии альфа-канала, который отвечает за прозрачность цвета. Задается прозрачность с помощью числа в диапазоне от 0 до 1, где 0 соответствует полной прозрачности, а 1 , наоборот, означает полную непрозрачность. Промежуточные значения вроде 0.5 позволяют задать полупрозрачный вид (допускается сокращенная запись, без нуля, но с точкой – .5 ). Например, чтобы сделать текст цветным и слегка прозрачным, нужно записать после свойства color ключевое слово rgba и значение цвета:

Минусом RGBA является то, что его не поддерживает браузер Internet Explorer версии 8 и ранее. Специально для IE8 можно применить следующее решение:

Первое свойство в примере предназначено для браузера IE8, который отобразит текст нужным цветом, но без прозрачности. А те браузеры, которые понимают RGBA, применят к элементу второе свойство, с прозрачностью.

Цветовые модели HSL (HSLA)

Задавать цвет в CSS можно также с помощью координат цветовой модели HSL (Hue, Saturation, Lightness – тон, насыщенность, светлота). Записывается это так:

Первое число в скобках означает тон (hue) и задается в градусах (диапазон чисел от 0 до 359). Вам будет легко понять, почему используются именно градусы, если вы вспомните, как выглядит цветовой круг:

Читать:

Как отразить доп расходы в 1с

Второе и третье числа в скобках означают насыщенность (saturation) и светлоту (lightness) соответственно. Их значения устанавливаются в процентах от 0 до 100. Чем ниже значение насыщенности, тем более приглушенным становится цвет. Значение saturation, равное нулю, приведет к серому цвету, при этом неважно, какое значение имеет hue. С помощью значения lightness (светлота) можно указать яркость цвета. Низкие значения приводят к темным оттенкам цвета, высокие – к светлым. Значение 100% для lightness означает белый цвет, 0% – черный.

Цветовая модель HSLA работает почти так же, как и HSL, но в ней, аналогично с RGBA, есть альфа-канал, с помощью которого можно задавать прозрачность цвета, указывая необходимое значение в диапазоне от 0 до 1:

HSL и HSLA поддерживаются всеми браузерами, кроме Internet Explorer версии 8 и ранее.

Стандартные цвета HTML

Еще один способ представления цветов в веб – это ключевые слова, при помощи которых можно указать цвет для элемента. Пример:

Существует 16 стандартных цветов, которые можно записать в значении свойства color :

Ключевое слово цвета	HEX-код	RGB
red	#FF0000	255, 0, 0
maroon	#800000	128, 0, 0
yellow	#FFFF00	255, 255, 0
olive	#808000	128, 128, 0
lime	#00FF00	0, 255, 0
green	#008000	0, 128, 0
aqua	#00FFFF	0, 255, 255
teal	#008080	0, 128, 128
blue	#0000FF	0, 0, 255
navy	#000080	0, 0, 128
fuchsia	#FF00FF	255, 0, 255
purple	#800080	128, 0, 128
white	#FFFFFF	255, 255, 255
silver	#C0C0C0	192, 192, 192
gray	#808080	128, 128, 128
black	#000000	0, 0, 0

Эти цвета поддерживают все браузеры. Кроме них есть еще порядка 130 дополнительных ключевых слов для различных оттенков цветов. Полную таблицу этих цветов можно увидеть в справочнике W3C.

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

Итоги

В CSS цвет текста задается с помощью свойства color , а его значение можно записать несколькими способами – в шестнадцатеричном (hex) виде, в формате RGB или HSL либо указав ключевое слово. Во избежание неправильного отображения цвета, заданного при помощи ключевого слова, лучше указывать его hex-значение.

Также есть возможность задать элементу прозрачность с помощью альфа-канала (форматы RGBA и HSLA). При этом стоит учитывать, что браузер IE8 и его ранние версии не поддерживают форматы RGBA, HSL и HSLA.

Далее в книге вы узнаете, как задать размер шрифта CSS.

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

Редактор кода с HTML и выделенными разделами слева и предварительным просмотром HTML и выделенными результатами справа

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

3 способа установить цвет текста

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

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

3 способа указать цвета

В HTML цвета можно указать несколькими способами:

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

Программы, необходимые для изменения цветов HTML

Минимальный набор инструментов для настройки цвета текста в HTML — это программа для редактирования самого HTML и браузер для его тестирования. Вы можете редактировать HTML в текстовом редакторе, простой программе, такой как Блокнот, который пишет чистый текст, или в редакторе кода, оптимизированном для обработки синтаксиса программирования. Вы не можете использовать текстовый процессор, такой как Microsoft Word, LibreOffice или Google Docs, потому что эти программы вставляют невидимое форматирование, называемое управляющими символами, которые несовместимы с HTML.

Любой веб-браузер может отображать HTML-файл, который вы хотите изучить. Перейдите в папку, содержащую HTML-файл, и щелкните по нему, и ваш браузер должен отобразить его. Если нет, щелкните файл правой кнопкой мыши и откройте его в браузере.

Способ 1: обернуть текст в теги с помощью цветовых стилей

Самый простой метод для окрашивания текста является добавление стиля атрибута и требуемого значения, состоящий из совместно цвета ключевого слова и спецификации цвета (в шестнадцатеричном коде, RGB код или название), в HTML — тег оберточного целевой текст.

Если вы хотите настроить текст, уже заключенный в тег, например тег

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

Если текст, который вы изменяете, не заключен между тегами — может быть, вы хотите настроить только часть текста, содержащего элемент

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

Способ 2: добавление раздела стиля в заголовок документа HTML

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

Имена тегов HTML здесь те же, что указаны в разделе , но без угловых скобок. Например,

, указанный в , это просто p (не в кавычках). После каждого тега быть стилизован и пространство подраздел заключен в фигурных скобках держащего цвета ключевого слово и спецификацию цвета.

Однако вы также можете стилизовать HTML по классам, который подобен метке, применяемой для выбора экземпляров тега в разделе . Например, если вы хотите, чтобы только один конкретный тег

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

с классом в качестве атрибута и именем этого класса, без точки, но в кавычках, в качестве значения.

Способ 3: создать и связать отдельный документ CSS

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

Поместите ваши стили, отформатированные так же, как в разделе в разделе вашего HTML, в отдельный документ с именем, оканчивающимся на .css . Затем добавьте автономный тег (без закрытия ) внутри документа HTML с атрибутом href , значение которого заключено в кавычки в качестве имени документа CSS, и атрибут rel со значением «stylesheet» (в кавычках).

Как изменить цвет текста в html файле если span уже использован?

Добрый день, у меня есть кусок кода а точнее список который предаствляет собой ссылки с картинками, белым текстом на фоне картинок и как мне хотелось-бы разноцветным текстом под картинками, вопрос, как изменить цвет текста под картинками?


White text
greenWhite text
redWhite text
yellowWhite text
blackWhite text
greenWhite text
greenWhite text
greenWhite text
green

.colors < padding-bottom: 50vh; >.colors> ul < padding: 5vh 1vh; text-align: center; >.colors> ul > a < margin: 2.5vh 2.5vh; display: inline-block; width: 40vh; height: 20vh; position: relative; >.colors> ul > a > p < text-align: center; height: 4.5vh; font-size: 3.5vh; color: var(--color-white); display: inline-block; position: absolute; top: 0; bottom: 1vh; left: 0; right: 0; text-shadow: 0 0 5px var(--color-dark); margin: auto; >.colors> ul > a > span < text-align: center; height: 4.5vh; font-size: 2.0vh; color: var(--color-red); display: inline-block; position: absolute; bottom: -5vh; right: 0; left: 0; text-shadow: 0 0 3px var(--color-white);*/ margin: auto; >.colors> ul > a > img

Вопрос задан 05 мар.
81 просмотр

2 комментария

Простой 2 комментария