Оформление текста, часть 1 / Верхние и нижние индексы на CSS [13/16]
×

Верхние и нижние индексы на CSS [13/16]

С помощью CSS можно имитировать теги <sub> и <sup>, которые применяются для создания нижних и верхних индексов. Делается это так:

  1. Используем свойство vertical-align со значением sub или super.
  2. Немного уменьшаем размер шрифта с помощью font-size.

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Верхние и нижние индексы на CSS</title> </head> <body> <h1>Mobile first!</h1> <p>Одновременно появился похожий подход, который называется Mobile First <sup>[дословно:</sup> <span class="sup">сначала для мобильников]</span>. По сути, это тот же адаптивный дизайн, но с обязательным требованием: начинать проектирование интерфейса с мобильной версии <sub>[или можно сказать:</sub> <span class="sub">с самого маленького экрана]</span>.</p> <hr> <p>Отвлечемся от статьи на примеры формул:</p> <ul> <li>H<sub>2</sub>O и</li> <li>H<span class="sub">2</span>O<br></li> <li>sin<sup>2</sup>x и</li> <li>sin<span class="sup">2</span>x</li> </ul> </body> </html>
CSS
body { font-size: 16px; } h1 { font-size: 24px; } .sub { } .sup { }
HTML Academy

Имитируем теги sup и sub с помощью CSS:

  1. Для класса .sub добавьте vertical-align: sub;.
  2. Для класса .sup добавьте vertical-align: super;.
  3. Обоим правилам добавьте font-size: 12px;.

Сравните «родные» теги индексов с вариантом на CSS.

Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.