Прочие стилистические приемы
Помимо основных текстовых единиц SAVANT.PRO предлагает разнообразные классы для расширения арсенала семантических конструкций, которые можно использовать в курсах.
Клавиатурный ввод
Если речь идет о нажатии клавиш на клавиатуре, можно использовать HTML-тэг <kbd>
для отображения клавиатурного ввода.
Нажмите <kbd>Ctrl</kbd>+<kbd>C</kbd> для завершения приложения.
Нажмите Ctrl+C для завершения приложения.
Заметки на полях
Класс sidenote
, присвоенный блоку, задает его отображение справа от основного текста (размер шрифта также будет немного уменьшен).
{.sidenote} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris elit sapien, sodales in porttitor id, volutpat in felis. Cras aliquam metus eget turpis aliquet semper malesuada urna condimentum. Nunc elementum, orci nec molestie.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris elit sapien, sodales in porttitor id, volutpat in felis.
Cras aliquam metus eget turpis aliquet semper malesuada urna condimentum. Nunc elementum, orci nec molestie.
Сноски
Сноски (класс footnote
) обычно располагаются в конце страницы. По умолчанию они отображаются уменьшенным шрифтом и отделяются от основного контента горизонтальной чертой.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. {.footnote} Mauris elit sapien, sodales in porttitor id, volutpat in felis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris elit sapien, sodales in porttitor id, volutpat in felis.
Повышение акцента
Для привлечения повышенного внимания к тексту могут быть использованы следующие классы:
kicker
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
note
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
warning
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Понижение акцента
Текст, к которому Вы не хотите привлекать существенного внимания, может быть оформлен заметкой на полях, сноской или одним из следующих классов:
description
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
subtle
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Цитаты
Цитаты оформляются блоком с классом blockquote
. Цитаты, как правило, содержат само изречение, а также ссылку на автора (класс author
).
~~~ {.blockquote} On ne voit bien qu'avec le cœur. L'essentiel est invisible pour les yeux. {.author} Antoine de Saint-Exupéry ~~~
On ne voit bien qu'avec le cœur. L'essentiel est invisible pour les yeux.
Antoine de Saint-Exupéry
Подсказки
Подсказки позволяют скрыть блок из общего текста, оставив вместо них ссылку, которая покажет содержимое блока во всплывающем окне.
~~~ {.hint} ## Подсказка Это простой блок с подсказкой. ~~~
Подсказка
Это простой блок с подсказкой.
Стандартный локализуемый текст «Показать подсказку» можно заменить, добавив абзац с классом prompt
внутрь блока с подсказкой.
~~~ {.hint} Показать правильный ответ {.prompt} ## Правильный ответ 2 + 2 = 4 ~~~
Показать правильный ответ
Правильный ответ
2 + 2 = 4
Несемантические конструкции
К несемантическим конструкциям относятся стили, отвечающие за выравнивание текста, размер и начертание шрифта, а также за расположение блоков на странице.
Выравнивание
.left-align
задает выравнивание блока по левому краю..right-align
задает выравнивание блока по правому краю..centered
задает выравнивание блока по центру. Если применяется к таблице, по центру выравнивается только сама таблица.Изменение размера шрифта и начертания
.small
задает уменьшенный размер шрифта..large
задает увеличенный размер шрифта..light
изменяет цвет текста на более светлый..emphasize
задает курсивное начертание..strong
задает жирное начертание.
Обтекание
Обтекание следует применять только к блокам фиксированной ширины, например, к изображениям на отдельном параграфе.
.left-float
задает расположение блока по левому краю, при этом остальные элементы обтекают его справа..right-float
задает расположение блока по правому краю, при этом остальные элементы обтекают его слева.Изменение размеров
.thumb
ограничивают ширину блока в сочетании со следующими классами:.large
— 240 px;.medium
— 180 px;.small
— 120 px;.tiny
— 60 px.
Это особенно полезно для вставки изображений или других медиаресурсов.