Как изменить цвет текста в css
В CSS за цвет текста отвечает свойство color . Оно может применяться к любому элементу и принимать цвет в одном из форматов:
- Шестнадцатеричная форма. Например, #0d6efd , #d63384 . Для подбора цвета и его значения используйте онлайн-сервисы, например HTML COLOR CODES
- Текстовое название: red , green , blue . Полный список находится на сайте W3C
- Формат RGB: rbg(255, 87, 51) . Первым значением указывается количество красного цвета, вторым значением количество синего и третьим значением количество зелёного
class="text-white">Я белый текст .text-white color: white; > Свойство наследуется, то есть если его указать на целый блок, то весь текст в нём будет указанного цвета
class="text-orange"> Я оранжевый текст И я оранжевый текст .text-orange color: rgb(255, 87, 51); > Красивый цветной текст в CSS: как это сделать
Допустим, вы фронтенд и вам дали задание раскрасить текст на сайте в разные цвета. Стандартный способ — обернуть отдельные куски текста в и задать этим тегам классы или стили. Но тогда мы получим ровно то, что предполагалось — покрашенные слова и предложения.
А что, если покраска не должна быть связана со словами? Например, если нужно покрасить текст по диагонали или сделать так, чтобы через буквы просвечивалась картинка? Оказывается, это тоже можно сделать довольно просто. Сейчас за 10 минут разложим вот такую красоту.
Чтобы полностью врубиться в эту технику, читайте комментарии в коде. Всё станет понятно.
Готовим страницу
Так как вся магия будет происходить в CSS-файле, то всё, что нам нужно сделать, — это добавить на страницу блок с заголовком и подключить файл со стилями:
Разноцветный текст на CSS Привет, это журнал «Код»
Настраиваем стили
Чтобы можно было быстро менять и подбирать цвета для раскрашивания, сделаем их переменными в CSS:
/* задаём глобальные переменные для цветов, в которые будем окрашивать текст */ :root
Теперь зададим параметры блока, внутри которого лежит наш текст. В нём всё просто и предсказуемо:
/* настройки блока с текстом */ .colored < /* фон */ background: #000; /* межстрочное расстояние */ line-height: 1; /* подключаем сетку */ display: grid; /* ставим содержимое в центр */ place-items: center; >Добавляем ту самую раскраску, о которой мы говорили в самом начале. Чтобы цвета были лучше видны, сделаем шрифт заголовка побольше и пожирнее, а перенос текста по строкам сделаем по длине самого длинного слова.
Последнее, что осталось сделать, — наложить цвета поверх текста. Сделаем это так:
- Используем линейный градиент и повернём его для красоты по диагонали.
- Градиент — это переход от одного цвета к другому.
- Чтобы были цветные полосы, сделаем не плавный градиент, а полосками.
- Ширина каждой полоски будет 19%, а один процент оставим на зазор между ними.
- Чтобы полоски градиента были видны только на тексте, обрежем этот градиент по контуру букв.
- А чтобы буквы стали цветными, установим им прозрачный цвет — через него станет виден наш градиент.
Добавим это к стилям заголовка h1:
/* делаем цветные полосы по тексту */ background: linear-gradient(219deg, var(--color-1) 19%, transparent 19%,transparent 20%, var(--color-2) 20%, var(--color-2) 39%, transparent 39%,transparent 40%, var(--color-3) 40%,var(--color-3) 59% , transparent 59%,transparent 60%, var(--color-4) 60%, var(--color-4) 79%, transparent 79%, transparent 80%, var(--color-5) 80%); /* обрезаем фон по контуру букв */ background-clip: text; -webkit-background-clip: text; /* делаем заголовок прозрачным, чтобы был виден цветной фон */ color: transparent;
Что дальше
Таким приёмом можно раскрасить любой текст в любые цвета. Но можно пойти дальше и положить фото под текст, чтобы картинка проступала сквозь буквы. Этим займёмся в другой раз.
Готовый файл index.html
Разноцветный текст на CSS Привет, это журнал «Код»
Готовый файл style.css
/* задаём глобальные переменные для цветов, в которые будем окрашивать текст */ :root < --color-1: #186cb8; --color-2: #2a9a9f; --color-3: #f1b211; --color-4: #e83611; --color-5: #f9002f; >/* настройки блока с текстом */ .colored < /* фон */ background: #000; /* межстрочное расстояние */ line-height: 1; /* подключаем сетку */ display: grid; /* ставим содержимое в центр */ place-items: center; >h1 < /* настраиваем внешний вид шрифта */ font-family: sans-serif; font-size: 15vw; font-weight: 900; /* подстраиваем ширину заголовка под самое длинное слово*/ width: -webkit-min-content; width: -moz-min-content; width: min-content; /* делаем автоматические отступы */ margin: auto; /* переводим все буквы в заглавные */ text-transform: uppercase; /* делаем цветные полосы по тексту */ background: linear-gradient(219deg, var(--color-1) 19%, transparent 19%,transparent 20%, var(--color-2) 20%, var(--color-2) 39%, transparent 39%,transparent 40%, var(--color-3) 40%,var(--color-3) 59% , transparent 59%,transparent 60%, var(--color-4) 60%, var(--color-4) 79%, transparent 79%, transparent 80%, var(--color-5) 80%); /* обрезаем фон по контуру букв */ background-clip: text; -webkit-background-clip: text; /* делаем заголовок прозрачным, чтобы был виден цветной фон */ color: transparent; >Тег span
Тег span позволяет выделить кусочек текста. Сам по себе тег ничего не делает, но в сочетании с атрибутами class , id или style позволяет обратиться через CSS к тексту, который находится внутри него (к примеру, для того, чтобы сменить цвет текста, его размер и так далее).
Пример
Давайте выделим кусочек текста с помощью тега span , но оставим его таким же, как и обычный текст (так как данному span не назначены CSS стили):
это текст внутри span
Пример
А сейчас давайте попробуем тегу span назначить красный цвет с помощью атрибута style :
это текст внутри span, а это — снаружи:)
Смотрите также
- тег div ,
который позволяет выделить целую группу тегов
css, javascript: textarea текст разного цвета
Подскажите пожалуйста, можно как-нибудь сделать так, чтобы часть текста в textarea поле было заданного цвета, отличного от основного цвета текста? Знаю, что есть отдельные библиотеки, но для моих целей это избыточно. Вот и думаю, можно ли обойтись малой кровью.
Отслеживать
4,542 3 3 золотых знака 16 16 серебряных знаков 53 53 бронзовых знака
задан 9 апр 2018 в 19:01
37.2k 4 4 золотых знака 27 27 серебряных знаков 70 70 бронзовых знаков
что такое часть текста в вашем понимании
9 апр 2018 в 20:52
@qwabra, текстовой блок, текст от start_pos до end_pos. Другими словами, пользователь вводит текст в поле (textarea) и я хочу цветом показать некоторые части введённого текста, на которые стоит обратить внимание (выделить цветом). В сети есть библиотеки похожие на richedit, которые всё это позволят, но их функционал чрезмерно избыточен для моей задачи, вот и подумал, а нет ли возможности обойтись малыми силами.
9 апр 2018 в 22:41
можно отредактировать свой вопрос, кнопка править
9 апр 2018 в 22:42
парсить вводимый текст сами сможете?
9 апр 2018 в 22:45
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Стандартные элементы textarea и input не предоставляют возможностей форматирования отдельных подстрок их текстового содержимого, и не могут содержать вложенные строчные элементы (которым можно было бы задать CSS-стили).
Поэтому, данная задача обычно решается созданием имитации поля ввода:
- Элементу, предназначенному для вывода (обычно берется div или span ), добавляют атрибут contenteditable — он включает возможность прямого редактирования текста содержимого;
- CSS-стилями достигают внешнего сходства элемента со стандартным полем ввода — фон, бордер, прокрутка при переполнении, и т.д.. В контексте задачи, это самая легкая часть;
- Пишут скрипт, который оборачивает части текстового содержимого в подэлементы (которые, в свою очередь, и оформляются средствами CSS). А также, реализуется поведение элемента, подобное поведению RichText-редактора. И вот это, уже весьма непросто.
Основная сложность — в получении и установке позиции каретки (текстового курсора). актуальные веб-стандарты не предоставляют удобных средств для этого. Необходимо создавать велосипед, и довольно непростой (с нуля, подобный скрипт за 10 минут не написать).
Следовательно, если цель не в том чтобы создать свое — рациональнее будет использовать одну из множества готовых реализаций такого элемента ввода.
Простой пример подсветки (не «на лету»):
const HL_RULES = [ < cl: 'str', re: /("[^"]+")/ >, < cl: 'optr', re: /^(var|let|for|in|of|function|function*|const|do|while|break|continue|if|else|switch|case|default|try|catch|throw|delete|void|yield|yield*|return)$/ >, < cl: 'cnst', re: /(\d+)/ >, < cl: 'brcs', re: /(<|>)/ > ]; let txt = document.querySelector('.custom-textarea'), btn = document.getElementById('hl'); txt.addEventListener('focus', () => txt.innerHTML = txt.textContent); btn.addEventListener('click', () => simpleHighlighter(txt)); btn.click(); function simpleHighlighter(el) < if (el instanceof Event) el = this; // если эту функцию назначать обработчиком input, то тут должен быть код сохранения позиции каретки. let words = textToArray(el), html = '', rule; words.forEach(word =>< if (rule = getHlRuleFor(word)) html += `$ `; else html += word; >); el.innerHTML = html; // . а тут - код установки каретки обратно на сохраненную позицию > function textToArray(el) < const RE = /(^|\(+?|[^\w]+?)((?:"[^"]*")|(?:[<>\w]+))(\)+?[\S]+?)?/gmi; // эта регулярка весьма далека от совершенства :) let result = [], match, i; while (match = RE.exec(el.textContent)) < for (i = 1; i < match.length; i++) < if (match[i]) result.push(match[i]); >> return result; > function getHlRuleFor(word) < let rule, mr; if (rule = HL_RULES.find(r =>mr = word.match(r.re))) rule.m = mr[1]; return rule; >* < font: 14px sans-serif; >html, body < margin: 0; padding: 0; >.custom-textarea < min-width: 40ch; min-height: 7em; height: 50%; padding: 0.1em 0.3ch; margin: 0.5em 0; overflow: auto; resize: both; border: 1px solid #ccc; >.custom-textarea, .custom-textarea span < font-family: monospace; >.str < color: #e94; >.optr < color: #47d; font-weight: 500; >.cnst < color: #4a4; >.brcs
function foo() < let a = "Последовательность чисел:"; for (var i = 0; i < 42; i++) < if (a === 13) alert("Попалось 'счастливое' число :)"); a += " " + i; >return a; >