Атрибут class тега <acronym>
Описание
Атрибут class в теге <acronym> позволяет назначать один или несколько CSS-классов для стилизации акронимов. Несмотря на то что тег устарел в HTML5, атрибут class сохраняет свою функциональность.
Синтаксис:
<acronym title="..." class="имя-класса">Акроним</acronym>
Основные сценарии использования:
1. Базовая стилизация:<acronym class="scientific" title="Deoxyribonucleic Acid">DNA</acronym>
<acronym class="technical highlight" title="Local Area Network">LAN</acronym>
<acronym class="medical" title="Attention Deficit Disorder">ADD</acronym>
<acronym class="tech" title="Central Processing Unit">CPU</acronym>
Рекомендации по именованию классов:
| Тип именования | Пример | Применение |
|---|---|---|
| По смыслу | medical, technical |
Лучшая семантика |
| По внешнему виду | dotted-underline |
Если стиль уникален |
| Комбинированный | tech-abbreviation |
Для сложных систем |
Примеры CSS-стилей:
<style>
/* Базовый стиль для всех акронимов */
acronym {
cursor: help;
}
/* Стиль для медицинских терминов */
acronym.medical {
color: #c00;
border-bottom: 1px dashed #c00;
}
/* Стиль для технических терминов */
acronym.tech {
color: #06c;
font-weight: bold;
}
/* Специальный выделенный стиль */
acronym.highlight {
background-color: #ff0;
padding: 0 2px;
}
</style>
Особенности работы:
- Может содержать несколько классов через пробел
- Наследует стили от родительских элементов
- Работает со всеми CSS-селекторами
- Сохраняет совместимость с устаревшим тегом
Лучшие практики:
- Используйте семантические имена классов
- Избегайте избыточных префиксов (например, "acronym-")
- Для сложных проектов применяйте методологии (БЭМ, OOCSS)
- В новых проектах заменяйте на
<abbr>