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

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

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

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

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

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

См. также

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

Цвет текста (color) в HTML

Одним из основных и наиболее часто используемых CSS свойств является цвет текста «color». Это свойство может принимать значения цвета, выраженные в разных единицах измерения. К примеру, в значении CSS свойства «color» напишем красный цвет (red) текстом:

Тише, мыши, кот на крыше.

— в таком случае текст окрасится в красный цвет (red):

Тише, мыши, кот на крыше.

Но очевидно, что если писать название цвета текстом, то нельзя выбрать оттенки. Поэтому существует ещё два других варианта выбора цветов. Рассмотрим их далее.

Цвет в формате RGB

В палитре RGB основными цветами являются красный, зелёный и синий. При смешении этих цветов получаются все остальные. Максимальное и минимальное значение каждого цвета может быть от 0 до 255. При смешивании трёх цветов со значениями из этого диапазона можно получить более 16 миллионов цветов (256 * 256 * 256 = 16 777 216). Этого вполне достаточно, чтобы человеческий глаз не замечал резкого перехода между цветами.

Приведём пример, как задать цвет через RGB в CSS. Сначала попробуем сделать текст красного цвета:

Тише, мыши, кот на крыше.

Как можно понять из записи, в скобках у rgb(. ) ставится уровень красного, зелёного и синего цвета, которым будет написан текст. Цвета ставятся в этой последовательности через запятую. Получается такой результат:

Тише, мыши, кот на крыше.

В палитре RGB чёрный цвет — это значение rgb(0, 0, 0), а белый цвет — это rgb(255, 255, 255). Теперь подмешаем к красному цвету зелёный в немного меньшем количестве. К примеру 150 единиц.

Тише, мыши, кот на крыше.

При смешении красного и зелёного получается жёлтый. Но так как пропорция неравная, поэтому жёлтый получился с оттенком оранжевого:

Тише, мыши, кот на крыше.

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

Об инструментах разработчика сайтов читайте подробнее в статье «Средства разработки CSS». Там вы узнаете, как изменять CSS свойства на странице без её перезагрузки, как работать с консолью, как изменять значения cookie.

Цвет в формате HEX

Запись цвета в виде rgb(255, 150, 0) является довольно громоздкой. Но существует возможность записи цвета через шестнадцатеричное значение. Если в rgb указываются цвета в десятеричной системе счисления от 0 до 255, то в шестнадцатеричной системе эти числа будут соответствовать 0 и FF. А если записывать все три числа в скобках (255, 150, 0) в одну строку без запятых через эту систему, то получится FF9600 (FF = 250, 96 = 150, 0 = 00).

Hex (hexadecimal) — обозначение шестнадцатеричной системы счисления
Чтобы записать такой цвет в значении свойства «color», необходимо сначала поставить решётку # :

Тише, мыши, кот на крыше.

Получится точно такой же результат, что и при использовании записи цвета через rgb(255, 150, 0):

Тише, мыши, кот на крыше.

Запись цвета в формате HEX компактнее. Но её можно упростить ещё сильнее. Если первые три символа в этом формате идентичны второй тройке символов, то вторую стройку можно не писать. К примеру, если есть цвет «#F96F96», то можно записать цвет как «#F96».

Другие способы записи цвета?

Существуют и другие способы записи цвета, которые имеют свои преимущества и недостатки. К примеру, RGBA у которого в отличии от RGB есть ещё и четвёртое число, которое означает прозрачность. Но чаще всего используются записи значений цвета через HEX и RGB( . ).

CSS: Цвет и тень текста

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

     body < color:blue; >h1 
Заголовок имеет свой собственный цвет текста
 
Абзац будет наследовать цвет текста от родительского элемента, в качестве которого для него выступает элемент body.
  

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

Добавление тени

Для добавления тени к тексту используется CSS свойство text-shadow, которое может принимать до четырех параметров:

1. смещение тени вправо (при положительных значениях) или влево (при отрицательных значениях) от текста
2. смещение тени вниз (при положительных значениях) или вверх (при отрицательных значениях) от текста
3. размытие тени, чем больше число, тем смазаннее будет тень, нулевое значение означает полное отсутствие размытости (определяет четкую и резкую тень)
4. цвет для тени

     h1 
Текст с тенью
  

С помощью свойства text-shadow можно задавать несколько эффектов тени к тексту, каждая тень в таком случае должна отделяться от предыдущей запятой:

     .test1 < background: #CCCCCC; color: #CCCCCC; font-size: 60px; text-align: center; text-shadow: 1px 1px 3px #666666, -1px -1px 3px #FFFFFF; >.test2 
Текст с тенью
 
Текст с тенью
  

Примечание: свойство text-shadow не поддерживается в IE9 и более ранних версиях.

С этой темой смотрят:

• Отступ текста в CSS
• Выравнивание текста в CSS
• Как изменить шрифт в CSS
• CSS стиль и размер шрифта
• Стандартные (безопасные) шрифты

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru

Нужно изменить цвет текста label в тот момент когда input в фокусе

Изначально Your Name и Your Email серого цвета Когда я нажмаю на input чтобы ввести свое имя Your Name должно поменять цвет на черный и должно быть черным пока я ввожу текст В ответе использовать можно использовать scss

Отслеживать
задан 23 сен 2021 в 20:32
Roman Vinichenko Roman Vinichenko
91 7 7 бронзовых знаков
Вешайте обработчик на input и с помощью js вешайте нужный класс.
23 сен 2021 в 21:56

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

.flex < display: flex; gap: 1rem; >.flex input < order: 2; >.flex input:focus+label

 
 
 Your name 
 
 Your Email 
 

Отслеживать
ответ дан 23 сен 2021 в 21:59
2,418 3 3 золотых знака 12 12 серебряных знаков 20 20 бронзовых знаков
Спасибо, все работает! Выручил
26 сен 2021 в 11:11
@RomanVinichenko если работает, то отметьте ответ верным.
26 сен 2021 в 14:10
готово, отметил ответ верным
26 сен 2021 в 14:25

• html
• form
• input
• scss
• label

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.