Атрибут class тега <mark>
Описание
Атрибут class для тега <mark> позволяет назначать один или несколько CSS-классов для стилизации выделенного текста. Это дает возможность создавать различные варианты подсветки контента.
<p>
В этом предложении <mark class="highlight-yellow">важная часть</mark>
выделена желтым цветом, а <mark class="highlight-blue">ключевой термин</mark>
имеет синюю подсветку.
</p>
<style>
.highlight-yellow {
background-color: #ffeb3b;
padding: 0.2em 0.4em;
}
.highlight-blue {
background-color: #bbdefb;
padding: 0.2em 0.4em;
border-radius: 3px;
}
</style>
Особенности работы:
| Применение | Результат |
|---|---|
| Один класс | <mark class="important"> |
| Несколько классов | <mark class="highlight rounded"> |
| Без класса | Стандартная желтая подсветка браузера |
Рекомендации по использованию:
- Используйте семантичные имена классов (например,
search-matchвместоyellow-bg) - Сочетайте с другими HTML-атрибутами для доступности
- Не злоупотребляйте множественными подсветками в одном абзаце
- Проверяйте контрастность цветов для читаемости
Пример сложной стилизации:
<style>
.definition {
background: linear-gradient(to bottom, #e1f5fe 0%, #b3e5fc 100%);
padding: 0.3em 0.5em;
border-left: 3px solid #0288d1;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.search-result {
background-color: #fff9c4;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.8; }
100% { opacity: 1; }
}
</style>
<p>
<mark class="definition">Семантика</mark> в HTML означает использование элементов
согласно их назначению. Ваш <mark class="search-result">поисковый запрос</mark>
выделен анимированно.
</p>
Ограничения и совместимость:
- Поддерживается всеми современными браузерами
- Старые браузеры могут игнорировать некоторые CSS-свойства
- Избегайте сложной анимации для важного контента
- Проверяйте отображение в режимах высокой контрастности
Примечание: Хотя тег <mark> по умолчанию имеет стили браузера, использование классов позволяет создавать согласованную с дизайном систему подсветки. Для сложных случаев можно комбинировать с <span> и ARIA-атрибутами.