Расширенные стили

Стили блоков

Платформа EduTerra содержит базовый набор CSS-классов для оформления контента.

Отдельные классы и любые их сочетания могут быть применены к любым блокам с помощью селекторов.

Селектор блока

Селектор записывается в фигурных скобках в конце первой строки блока и задает HTML-атрибуты id и class.

Классы задаются с помощью точки ., а атрибут id — символом решетки #.

Пример: селекторы

Этот абзац имеет атрибут id.    {#paragraph}
Атрибут id не влияет на отображение.

Пример: селекторы

Этот абзац имеет класс `kicker`.   {.kicker}
Отображение блоков `kicker` задается платформой.

Пример: селекторы

{.em}
Селектор можно поставить перед началом блока.

Группа блоков

Классы можно применять к группе блоков. Начало и конец группы отмечается тремя тильдами ~~~.

~~~ {.subtle.right-align}
#### Это заголовок группы

Этот абзац принадлежит группе.

И этот абзац тоже.
~~~

Пример: группа блоков

Врезка

~~~ {.block.incut}
Врезкой можно оформить вступительный текст, тезисы, выводы или лирическое отступление.
~~~

Блок с определением

~~~ {.block.definition}
*Атом* (от др.-греч. ἄτομος — неделимый) — частица вещества микроскопических размеров и массы, наименьшая часть химического элемента, являющаяся носителем его свойств.
~~~

Блок с примером

~~~ {.block.example}
Пример {.tab}

В чащах юга жил бы цитрус? Да, но фальшивый экземпляр!
~~~

Пример с подзаголовком

~~~ {.block.example}
#### Пример панграммы

В чащах юга жил бы цитрус? Да, но фальшивый экземпляр!
~~~

Блок с предупреждением №1

~~~ {.block.warning}
*Внимание!* Локальные переменные должны быть инициализированы.
~~~

Блок с предупреждением №2

~~~ {.block.danger}
*Внимание!* Локальные переменные должны быть инициализированы.
~~~

Понижение акцента

~~~ {.block.subtle}
Необязательный для прочтения текст или лирическое отступление можно оформить с пониженным акцентом.
~~~

Блок «info»

~~~ {.block.info}
Произвольный информационный блок с подзаголовками вида: «К Вашему сведению», «А знаете ли Вы, что...»
~~~

Блок «recap»

~~~ {.block.recap}
#### Давайте повторим

Блок подходит для оформления вопросов по пройденному материалу.
~~~

Блок «thesis»

~~~ {.block.thesis}
Подходит для оформления тезисов перед изложением материала.
~~~

Блок «summary»

~~~ {.block.summary}
Блок предназначен для оформления выводов по итогам изложения материала на страницах.
~~~

Блок «tip»

~~~ {.block.tip}
Кто откажется от полезного совета?
~~~

Блок «attention»

~~~ {.block.attention}
Такое предупреждение трудно пропустить.
~~~

Блок «critical»

~~~ {.block.critical}
Такое предупреждение чрезвычайно трудно пропустить.
~~~

Блок «error»

~~~ {.block.error}
#### Так нельзя!

Можно использовать для иллюстрации плохих практик или ошибок.
~~~

Блок «success»

~~~ {.block.success}
#### Рекомендуемый способ

Можно использовать для иллюстрации хороших практик (в противопоставлении плохим).
~~~

Ограничьте разновидности блоков

• Выберите 3-4 стиля блоков, которые Вы будете использовать.
• Создайте документ «Редакционная политика» и опишите правила использования визуальных стилей.
• Оставляйте «простой» текст. Чрезмерное визуальное оформление только усложняет восприятие.

Цитата

~~~ {.blockquote}
Je n'ai fait celle-ci plus longue que parce que je n'ai pas eu le loisir de la faire plus courte.

{.author}
Blaise Pascal
~~~

Выравнивание текста

• класс right-align выравнивает текст блока по правому краю
• класс centered выравнивает текст блока по центру

Пример: выравнивание

{.centered}
Текст этого абзаца выравнивается по центру.

Текст этого абзаца выравнивается по центру.

Иллюстрация с подписью

Блок с классом figure может содержать изображение и подпись — абзац с классом caption.

С помощью классов right-align и centered можно также задать выравнивание по правому краю или центру.

Пример: иллюстрация и подпись

~~~ {.figure.centered}
![][kittens.jpg]'

{.caption}
Рис. 1. Котята
~~~

Блок с обтеканием

Классы pull-left и pull-right задают «висячее» положение блока, соответственно, слева или справа.

Их можно использовать для задания обтекания изображения или видео текстом.

Пример: блок с обтеканием

Ко́шка, или дома́шняя ко́шка (лат. Félis silvéstris cátus) — домашнее животное, одно из наиболее популярных (наряду с собакой) «животных-компаньонов».

С зоологической точки зрения, домашняя кошка — млекопитающее семейства кошачьих отряда хищных. Ранее домашнюю кошку нередко рассматривали как отдельный биологический вид.

Пример: блок с обтеканием

~~~ {.figure.pull-right.centered}
![][kittens.png]

{.caption}
Рис. 1. Котята
~~~

*Ко́шка*, или *дома́шняя ко́шка* (лат. Félis silvéstris cátus) — домашнее животное, одно из наиболее популярных (наряду с собакой) «животных-компаньонов».

Оформление кода

Блоки кода отображаются моноширинным шрифтом с сохранением пробелов; блочные и строчные элементы не обрабатываются.

Начало и конец блока с кодом отмечается тремя обратными кавычками ```. Строковые литералы заключаются между одинарными обратными кавычками `.

Пример: код

``` {.hl.js}
console.log('Hello world!');
```

console.log('Hello world!');

Блоки кода с классом hl обрабатываются с помощью HighlightJS.