Атрибут style тега <mark>
Описание
Атрибут style для тега <mark> позволяет задавать CSS-стили непосредственно для выделенного фрагмента текста. Это удобно для быстрой стилизации без создания отдельных классов.
<p>
В этом тексте
<mark style="background-color: #ffeb3b; color: #333; padding: 2px 5px;">важная часть</mark>
выделена с помощью inline-стилей.
</p>
Часто используемые свойства:
| Свойство | Пример | Эффект |
|---|---|---|
background-color |
#ffeb3b |
Цвет подсветки |
color |
#333 |
Цвет текста |
padding |
2px 5px |
Внутренние отступы |
border-radius |
4px |
Скругление углов |
Динамическое изменение стилей:
<p>
<mark id="dynamic-style">Этот текст можно стилизовать</mark>
</p>
<button onclick="changeStyle()">Изменить стиль</button>
<script>
function changeStyle() {
const mark = document.getElementById('dynamic-style');
mark.style.cssText = 'background: linear-gradient(to right, #ffeb3b, #ff9800); ' +
'color: white; ' +
'font-weight: bold; ' +
'padding: 3px 8px; ' +
'border-radius: 5px;';
}
</script>
Сравнение с CSS-классами:
<style>
.custom-highlight {
background-color: #e3f2fd;
border-bottom: 2px solid #2196f3;
padding: 1px 3px;
}
</style>
<p>
Варианты выделения:
<mark style="background-color: #ffeb3b;">inline-стиль</mark> и
<mark class="custom-highlight">CSS-класс</mark>.
</p>
Рекомендации по использованию:
- Используйте для разовых стилизаций
- Для повторяющихся стилей создавайте CSS-классы
- Избегайте сложных стилей в атрибуте
- Проверяйте адаптивность стилей
Ограничения и совместимость:
- Поддерживается всеми браузерами
- Имеет высший приоритет (переопределяет CSS-классы)
- Усложняет поддержку кода
- Не поддерживает псевдоклассы и медиазапросы
Примечание: Хотя атрибут style удобен для быстрой стилизации, для поддержания чистоты кода рекомендуется использовать его умеренно. В сложных проектах предпочтительнее работать с CSS-классами.