Css sup: Верхние и нижние индексы на CSS — Оформление текста. Знакомство — HTML Academy

Leave a Comment / Css / By /

| HTML | WebReference

  • Содержание
    • Синтаксис
    • Закрывающий тег
    • Атрибуты
    • Пример
    • Спецификация
    • Браузеры

Элемент <sup> (от англ. superscript — верхний индекс) отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.

Синтаксис

<sup>Текст</sup>

Закрывающий тег

Обязателен.

Атрибуты

Для этого элемента доступны универсальные атрибуты и события.

Пример

<!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>SUP</title> </head> <body> <p><b>Великая теорема Ферма</b></p> <p><i>X <sup><small>n</small></sup> + Y <sup><small>n</small></sup> = Z <sup><small>n</small></sup></i></p> <p>где n — целое число > 2</p> </body> </html>

Результат данного примера показан ниже.

Рис. 1. Вид текста, оформленного с помощью <sup>

Спецификация

СпецификацияСтатус
WHATWG HTML Living StandardЖивой стандарт
HTML5Рекомендация
HTML4.01Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

21213.511
1161

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

  • <sub>
  • Верхний и нижний индекс
  • Продвинутая семантика и доступность
  • Работа с текстом

Практика

  • Площадь круга

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 10.10.2018

Редакторы: Влад Мержевич

Верхний и нижний индекс | WebReference

Индексом по отношению к тексту называется смещение символов относительно базовой линии вверх или вниз. В зависимости от положительного или отрицательного значения смещения, индекс называется, соответственно, верхним или нижним. Они активно применяются в математике, физике, химии и для обозначения единиц измерения. HTML предлагает два элемента для создания индекса: <sup> (от англ. superscript) — верхний индекс и <sub> (от англ.

subscript) — нижний индекс. Текст, помещённый в один из этих контейнеров, обозначается меньшим размером, чем базовый текст, и смещается относительно него вверх или вниз. В примере 1 приведено совместное использование указанных элементов и стилей для изменения вида текста.

Пример 1. Создание верхнего и нижнего индекса

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Верхний и нижний индекс</title> <style> .formula { font-size: 1.4em; /* Размер текста формулы */ } sup, sub { font-style: italic; /* Курсивное начертание */ color: red; /* Красный цвет символов */ } sub { color: blue; /* Синий цвет символов */ } </style> </head> <body> <p>Характеристическое уравнение поверхности второй степени</p> <p>λ<sup>3</sup> — I<sub>1</sub>λ<sup>2</sup> + I<sub>2</sub>λ — I<sub>3</sub> = 0</p> </body> </html>

В примере одновременно встречается как нижний, так и верхний индекс. Для изменения начертания шрифта индекса применяются стили, которые задают единое оформление (рис. 1).

Рис. 1. Вид индексов после применения стилей

Можно вообще отказаться от использования <sup> и <sub> в пользу стилей. Аналогом этих элементов служит свойство vertical-align, заставляющее текст смещаться по вертикали на заданное расстояние. В частности, в примере 2 в качестве значения применяется 0.8em для верхнего индекса и -0.5em для нижнего. Em — это относительная единица, равная размеру текущего шрифта. Например, 0.5em говорит о том, что текст надо сдвинуть на половину размера шрифта.

Пример 2. Использование стилей для управления индексами

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Верхний и нижний индекс</title> <style> .formula { font-size: 1.6em; /* Размер текста */ font-style: italic; /* Курсивное начертание */ } .sup, .sub { font-style: normal; /* Нормальное начертание */ font-size: 0.
6em; /* Размер индекса */ color: red; /* Цвет верхнего индекса */ vertical-align: 0.8em; /* Сдвигаем текст вверх */ } .sub { color: blue; /* Цвет нижнего индекса */ vertical-align: -0.5em; /* Сдвигаем текст вниз */ } </style> </head> <body> <p>Многочлен степени <em>n</em></p> <p>f(x) = a<span>0</span> + a<span>1</span> x + … + a<span>n-1</span> x<span>n-1</span> + a<span>n</span> x<span>n</span></p> </body> </html>

В примере сама формула выводится увеличенным размером, символы верхнего индекса устанавливаются красным цветом, а нижние — синим (рис. 2).

Рис. 2. Управление положением и видом нижнего и верхнего индекса

Использование элемента <span> делает код громоздким, поэтому лучше переопределить стили <sub> и <sup>, в частности, задать положение индекса, цвет и курсивное начертание.

См. также

  • <sub>
  • <sup>
  • vertical-align
  • Блочные элементы
  • Выравнивание картинок
  • Продвинутая семантика и доступность
  • Работа с текстом
  • Строчные элементы

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11.03.2020

Редакторы: Влад Мержевич

Насыщенность
Ctrl+←

Буквица
Ctrl+→

CSS все имущество | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

CSS все свойства

— РЕК

  • Глобальное использование
    97,34% + 0% знак равно 97,34%

Сокращенное свойство для сброса всех свойств CSS, кроме направления , и 9. 0018 юникод-биди .

Chrome
  1. 4 — 36: не поддерживается
  2. 37 — 106: Поддерживается
  3. 107: Поддерживается
  4. 108 — 110: поддержано
Edge
  1. 12 — 18: не поддерживает
    2. —
    1. . Supported
    2. 106: Supported
    Safari
    1. 3.1 — 9: Not supported
    2. 9.1 — 16.0: Supported
    3. 16.1: Supported
    4. 16.2 — TP: Supported
    Firefox
    1. 2 — 26: не поддерживается
    2. 96% — Supported»> 27 — 105: Поддержано
    3. 106: Поддерживается
    4. 107 — 108: Поддержано
    Opera
    1. 9 — 23: не поддерживает
    2. 4444444 24 —
      1. 9 — 23: не поддерживает
      2. 44444444444444444444444 24.
        1. 9 — 23: не поддерживает
        2. 4444444444444444444444 24.
          1. 9 — 23: не поддерживается
            1. . 91: Поддержано
            IE
            1. 5,5 — 10: не поддерживается
            2. 11: Не поддерживается
            Chrome для Android
            1. 23% — Supported»> 106: поддержан
            SAFARI на IOS
          2. 106: поддержан
          .0015
        3. 9.3 — 16.0: Supported
        4. 16.1: Supported
        Samsung Internet
        1. 4 — 17.0: Supported
        2. 18.0: Supported
        Opera Mini
        1. all: Not supported
        Opera Mobile
        1. 10 — 12.1: Не поддерживается
        2. 64: Поддерживается
        Браузер UC для Android
        1. 13.4: Поддерживается
        Браузер Android
        1. 4.4: Не поддерживается0015
        2. 31% — Supported»> 4.4.3: Supported
        3. 106: Supported
        Firefox for Android
        1. 105: Supported
        QQ Browser
        1. 13.1: Supported
        Baidu Browser
        1. 13.18: Supported
        KaiOS Браузер
        1. 2.5: Поддерживается
        Ресурсы:
        Ошибка WebKit 116966: [css3-cascade] Добавлена ​​поддержка сокращенного свойства all
        MDN Web Docs — CSS all
        Сброс стилей с помощью `all: unset`

        CSS.supports() API | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

        Могу ли я использовать

        Поиск

        ?

        CSS.supports() API

        — CR

        • global»>
          Глобальное использование
          96,95% + 1,69% знак равно 98,64%

        Статические методы CSS.supports() возвращают логическое значение, указывающее, поддерживает ли браузер данную функцию CSS или нет.

        Chrome
        1. 4 — 27: не поддерживается
        2. 28 — 60: Частичная поддержка
        3. 61 — 106: поддержано
        4. 107: поддержано
        5. 108 — 110: поддержано
        . Partial support
      3. 79 — 105: Supported
      4. 106: Supported
      Safari
      1. 3.1 — 8: Not supported
      2. 9 — 16.0: Supported
      3. 01% — Supported»> 16.1: Supported
      4. 16.2 — TP: Supported
      Firefox
      1. 2 — 19: Not supported
      2. 20 — 21: Disabled by default
      3. 22 — 54: Partial support
      4. 55 — 105: Supported
      5. 106: Supported
      6. 107 — 108: Supported
      Opera
      1. 9 — 12: не поддерживается
      2. 12.1: Частичная поддержка
      3. 15 — 90: Поддерживается
      4. 91: Поддерживается
      IE
      1. 16% — Not supported»> 5.5 — 10: не поддерживает
        1. 5.5 — 10: не поддержал
          1. 5.5 -10: не поддерживает
            2. 9001: 9001:5 9001: 9001: 9001: 9001: 9001: 9001: 9001: 9001: 9001: 9001: 9001: 9001: 9001: 9001: 9001: 9001: 9001: 9001: 9001: 9001: 9001: 9001:5
            1. 5.5 -10: не поддерживают0013 Chrome для Android
              1. 106: Поддерживается
              Safari на iOS
              1. 3,2 — 8,4: не поддерживается
              2. 9 — 16,0: поддержан
              3. 16.1: поддержка
              4
              13131313101010101010101010101010101010101010101010101010101010101010101010.
            2. 18.0: Поддерживается
            Opera Mini
            1. 07% — Partial support»> Все: Частичная поддержка
            Opera Mobile
            1. 10 — 12: не поддерживается
            2. 12.1: Partial.0015
            UC Browser для Android
            1. 13,4: поддержан
            Android Browser
            1. 2,1 — 4,3: не поддерживается
            2. 4.4 -4.4.4: поддержка
            3. 106:
            4. 4.4 -4.4.4: поддерживает
            5. 106: 70015
            6. 4.4 -4.4.4: 40015 9006:
            7. 4.4 -4,4: 4.4: 4,4: 4,4: 4,4: 4,4: 4,4: 4,4: 4,4: 4,4: 4,4: 4,4: 4,4: 4,4: 4,4: 4,4: 4,4: 4,4: 4,4: 4,4: 4,4: 4. 105: Поддержано
            QQ Browser

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *