Получить профессию в Skypro
Изменение цвета конкретных слов в HTML и inline CSS
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Хотите поменять цвет отдельных слов в тексте? Используйте тег <span> и присвойте ему необходимый цвет посредством CSS-стиля, расположенного прямо в этом теге. Ниже приведён пример того, как это можно сделать:
<p>
Обычный текст <span style="color: #F00;">красное слово</span> обычный текст.
</p>В данном примере #F00 обозначает красный цвет. Он может быть заменён на любой другой цвет с использованием его шестнадцатеричного кода или стандартного обозначения.
Отдаём предпочтение CSS-классам перед внутренними стилями
Встроенные стили обеспечивают быстрый способ изменить стиль, однако приводят к дублированию кода. Лучше определить классы внутри тега <head> или в отдельном CSS-файле. Это упростит поддержку кода и обеспечит его повторное использование.
<head>
<style>
.red-text { color: #FF0000; }
.blue-text { color: #0000A0; }
</style>
</head>
<body>
<p>
Обычный текст <span class="red-text">красное слово</span> обычный текст <span class="blue-text">синее слово</span>.
</p>
</body>Управляем конфликтами специфичности
При использовании внешних CSS-файлов или блоков <style> обязательно соблюдайте принцип каскадности CSS и примите во внимание иерархию специфичности. Внутренние стили имеют более высокий уровень специфичности и приоритет перед внешними.
Семантически правильное выделение
Если вам необходимо выделить текст, обратите внимание на тег <mark>. Такой тег уже несёт семантический смысл и имеет предустановленный цвет, который может быть изменён.
<p>
Обычный текст <mark style="background-color: #FF0;">выделенный текст</mark> обычный текст.
</p>Экранируем специальные символы HTML, чтобы избежать путаницы
Чтобы браузер не воспринимал ваш текст как код, экранируйте специальные HTML-символы.
<!-- Плохо: текст будет отображён жирным -->
Мой абзац с <b>жирным текстом</b>.
<!-- Хорошо: текст отображается в виде кода -->
Мой абзац с <b>жирным текстом</b>.Соблюдаем стилевую целостность и читаемость кода
Избегайте частого использования встроенных стилей, так как это усложняет код. Вместо этого используйте CSS-классы для обеспечения читаемости и удобства поддержки кода.
Визуализация
Сделайте ваш текст ярче, обозначив важные слова цветом, как, например, в этом саду:
🌸🌱🌼🌱(**подсолнечник**🌻)🌱🌼🌱🌸Здесь обычный текст зелёный (<span>), подсолнечник🌻 — ярко-жёлтый (<span style="color:yellow">подсолнечник</span>).
<p>
<span>🌸🌱🌼🌱</span>
<span style="color:yellow">подсолнечник</span>
<span>🌱🌼🌱🌸</span>
</p>Такой подход делает текст привлекательным и помогает привлечь внимание читателя.
Не допускаем искажений цветов: эффект браузера-фантома
Важно проверить, корректно ли отображаются выбранные вами цвета в различных браузерах и на разных устройствах, поскольку разные технологии может искажать цветовые оттенки.
Пользуемся преимуществами CSS, забывая о устаревших тегах
Старайтесь избегать использования устаревшего тега <font>: CSS представляет собой более мощный инструмент для стилизации и совместимости кода.
Стремимся к высокой производительности
Не забывайте, что браузеры кэшируют внешние CSS-файлы. Это ускоряет загрузку страниц и повышает их производительность в сравнении с использованием встроенных стилей.
Обеспечиваем одинаковое восприятие на разных устройствах и доступность
Тестируйте контрастность цветов на разных устройствах для обеспечения комфортного опыта пользователя и доступности контента для всех посетителей вашего сайта.
Полезные материалы
- CSS :nth-of-type() Selector — Подробное руководство по выбору элементов через CSS.
- Псевдоклассы – CSS: Каскадные таблицы стилей | MDN — Объяснение псевдоклассов CSS для глубокого понимания механизма работы.
- HTML тег span — Дополнительная информация о работе тега
<span>и стилизации элементов. - highlight.js — Библиотека для подсветки синтаксиса, позволяющая выделить определённые текстовые шаблоны.
- JavaScript DOM CSS — Руководство по динамическому изменению стилей с помощью JavaScript.