Атрибут class тега <dt>
Описание
Атрибут class позволяет назначать один или несколько классов элементу <dt> (термин в списке определений) для стилизации или взаимодействия через CSS и JavaScript.
<dl>
<dt class="term-primary highlight">HTML</dt>
<dd>Язык гипертекстовой разметки</dd>
<dt class="term-secondary">CSS</dt>
<dd>Каскадные таблицы стилей</dd>
</dl>
Основные возможности:
| Применение | Пример | Описание |
|---|---|---|
| Стилизация терминов | .term-primary { color: blue; } |
Визуальное выделение важных терминов |
| Группировка элементов | .technical-term |
Объединение терминов по категориям |
| JavaScript взаимодействие | document.querySelectorAll('.highlight') |
Выбор терминов для динамических операций |
Правила именования классов:
- Используйте семантические имена, отражающие назначение
- Разделяйте слова дефисом:
main-term - Избегайте презентационных имен:
blue-text - Соблюдайте единый стиль в проекте
- Для сложных проектов используйте БЭМ или другие методологии
Пример стилизации терминов:
<style>
.term {
font-weight: bold;
margin-top: 15px;
}
.term-key {
color: #2c3e50;
border-left: 3px solid #3498db;
padding-left: 10px;
}
.term-warning {
color: #e74c3c;
}
</style>
<dl>
<dt class="term term-key">API</dt>
<dd>Интерфейс программирования приложений</dd>
<dt class="term term-warning">Deprecated</dt>
<dd>Устаревшая функция</dd>
</dl>
Использование с JavaScript:
<dl>
<dt class="toggle-term">JavaScript</dt>
<dd>Язык программирования для веб-страниц</dd>
<dt class="toggle-term">React</dt>
<dd>Библиотека для создания пользовательских интерфейсов</dd>
</dl>
<script>
document.querySelectorAll('.toggle-term').forEach(term => {
term.addEventListener('click', () => {
term.nextElementSibling.classList.toggle('visible');
});
});
</script>
Рекомендации по использованию:
- Используйте для переиспользуемых стилей терминов
- Комбинируйте общие и специфические классы
- Избегайте избыточного количества классов (2-3 оптимально)
- Для уникальных терминов используйте
idвместо классов - Сохраняйте семантическую структуру HTML
Пример с анимацией:
<style>
.animated-term {
transition: all 0.3s ease;
cursor: pointer;
}
.animated-term:hover {
transform: translateX(5px);
color: #3498db;
}
</style>
<dl>
<dt class="animated-term">AJAX</dt>
<dd>Асинхронный JavaScript и XML</dd>
</dl>
Примечание: Правильное использование классов для элементов <dt> позволяет создавать хорошо структурированные и легко поддерживаемые списки определений. Для сложных проектов рассмотрите использование CSS-препроцессоров или CSS-модулей для лучшей организации стилей.