Атрибут class тега <dfn>
Описание
Атрибут class позволяет назначать один или несколько CSS-классов элементу <dfn>, который используется для выделения терминов и их определений в тексте. Это помогает стилизовать термины и управлять их отображением.
<p>
В веб-разработке <dfn class="term">HTML</dfn> (HyperText Markup Language)
является стандартным языком разметки.
</p>
<style>
.term {
font-style: italic;
font-weight: bold;
color: #2c3e50;
border-bottom: 1px dotted #3498db;
cursor: help;
}
</style>
Типичные применения классов:
| Тип класса | Пример | Назначение |
|---|---|---|
| Семантические | term, definition |
Обозначение типа содержимого |
| Стилевые | highlighted-term |
Визуальное выделение |
| Функциональные | js-tooltip |
Для JavaScript-взаимодействия |
Пример с несколькими классами:
<p>
<dfn class="term glossary-item" id="css-def">CSS</dfn> - это язык стилей,
определяющий представление HTML-документов.
</p>
<style>
.term {
font-weight: bold;
color: #2980b9;
}
.glossary-item {
border-bottom: 1px dashed #3498db;
cursor: pointer;
}
</style>
<script>
// Добавляем обработчик для элементов глоссария
document.querySelectorAll('.glossary-item').forEach(item => {
item.addEventListener('click', () => {
alert('Определение: ' + item.textContent);
});
});
</script>
Рекомендации по именованию классов:
- Используйте осмысленные имена (
technical-term) - Придерживайтесь единого стиля (BEM, kebab-case)
- Разделяйте стилевые и функциональные классы
- Избегайте избыточных имен (
dfn-style)
Пример с динамическим добавлением классов:
<p>
<dfn id="js-term">JavaScript</dfn> - язык программирования для веб-страниц.
</p>
<button onclick="highlightTerm()">Выделить термин</button>
<script>
function highlightTerm() {
const term = document.getElementById('js-term');
term.classList.add('highlighted');
term.classList.toggle('animated');
}
</script>
<style>
.highlighted {
background-color: #fffde7;
padding: 2px 5px;
border-radius: 3px;
}
.animated {
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { background-color: #fffde7; }
50% { background-color: #fff9c4; }
100% { background-color: #fffde7; }
}
</style>
Советы по стилизации:
- Сохраняйте семантическое значение тега (выделение терминов)
- Используйте курсив или полужирное начертание для выделения
- Добавляйте интерактивность (подсказки, всплывающие определения)
- Обеспечьте хороший контраст для читаемости
- Тестируйте на различных устройствах
Примечание: Хотя классы предоставляют гибкость в стилизации элементов <dfn>, не переусердствуйте с оформлением - сохраняйте читаемость и семантическую ценность терминов. Для сложных глоссариев рассмотрите использование специализированных решений.