Атрибут style тега <rt>
Описание
Атрибут style позволяет задавать CSS-стили непосредственно для элемента <rt> (Ruby-текста). Это инлайновые стили, которые имеют наивысший приоритет (кроме !important).
<ruby>
漢 <rp>(</rp><rt style="color: red; font-size: 12px;">かん</rt><rp>)</rp>
</ruby>
Особенности работы:
| Характеристика | Описание |
|---|---|
| Приоритет | Стили имеют наивысший приоритет (переопределяют внешние и внутренние стили) |
| Синтаксис | CSS-правила через точку с запятой: свойство: значение; |
| Область действия | Применяется только к текущему элементу |
Часто используемые стили для <rt>:
<ruby>
漢 <rp>(</rp><rt style="
font-size: 0.6em;
color: #666;
position: relative;
top: -5px;
">かん</rt><rp>)</rp>
</ruby>
Динамическое изменение стилей:
<ruby>
漢 <rp>(</rp><rt id="styled-rt" style="color: blue;">かん</rt><rp>)</rp>
</ruby>
<button onclick="changeStyle()">Изменить стиль</button>
<script>
function changeStyle() {
const rt = document.getElementById('styled-rt');
rt.style.fontWeight = 'bold';
rt.style.color = 'red';
}
</script>
Рекомендации по использованию:
- Используйте для разовых стилевых правок
- Для сложной стилизации лучше применять внешние CSS-классы
- Избегайте дублирования стилей в разных элементах
- Для анимаций предпочтительнее CSS-классы
Ограничения:
- Усложняет поддержку кода (стили "размазаны" по HTML)
- Не поддерживает медиа-запросы и псевдоклассы
- Переопределяет стили из внешних таблиц
Примечание: Для элементов <rt> атрибут style может быть полезен для быстрой настройки позиционирования и размера аннотаций, но для сложных проектов лучше выносить стили в CSS-классы. Оптимальный размер шрифта для ruby-текста обычно составляет 50-70% от размера основного текста.