Атрибут class тега <em>
Описание
Атрибут class позволяет назначать один или несколько классов элементу <em> для стилизации или взаимодействия через CSS и JavaScript. Тег <em> семантически обозначает акцентированный текст.
<p>
Это <em class="highlight">важный</em> момент в тексте,
который нужно <em class="underline">подчеркнуть</em>.
</p>
Основные возможности:
| Применение | Пример | Описание |
|---|---|---|
| Стилизация акцентов | .highlight { background-color: yellow; } |
Визуальное выделение важных фрагментов |
| Группировка элементов | .term-definition |
Объединение семантически похожих акцентов |
| JavaScript взаимодействие | document.querySelectorAll('.highlight') |
Выбор акцентированных элементов для операций |
Правила именования классов:
- Используйте семантические имена, отражающие назначение
- Разделяйте слова дефисом:
main-accent - Избегайте презентационных имен:
red-text - Соблюдайте единый стиль в проекте
Пример стилизации акцентов:
<style>
.vocabulary {
color: #d63384;
font-style: normal;
font-weight: bold;
}
.technical-term {
background-color: #f8f9fa;
padding: 0 4px;
border-radius: 3px;
font-family: monospace;
}
</style>
<p>
В <em class="vocabulary">лингвистике</em> акцент - это
<em class="technical-term">фонетическое</em> выделение элемента речи.
</p>
Рекомендации по использованию:
- Используйте семантически осмысленные имена классов
- Избегайте избыточного количества классов (1-2 обычно достаточно)
- Сохраняйте семантическое значение тега
<em> - Для сложных проектов используйте методологии именования (БЭМ)
Пример с анимацией акцентов:
<style>
.pulse {
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.6; }
100% { opacity: 1; }
}
</style>
<p>
Обратите внимание на <em class="pulse">этот</em> важный элемент.
</p>
Примечание: Хотя классы позволяют стилизовать элементы <em>, важно сохранять их семантическое значение для доступности и SEO. Избегайте использования классов только для визуальных изменений без смыслового выделения.