Здравствуйте. Иногда при создании веб-страничек необходимо некоторым словам задать с помощью css верхний регистр или надстрочное положение. Давайте посмотрим, как это делается.
Верхний и нижний регистр с помощью css
Вообще и сегодня можно нужный текст заключить в теги <sub> <sup> и получить нужное отображение, но давайте также посмотрим, как это можно сделать с помощью css, потому что техника немного отличается.
Например, надо написать формулу H2O в html-документе. Это делается так:
- Пишется сама формула
- Те слова и цифры, которые нужно вывести в верхнем или нижнем индексе заключают в тег span, которому нужно прописать какой-нибудь класс. Например:
<span class = “top-index”>символы, которые нужно вывести</span> - В css нужно задать этому элементу:
.top-index{
Vertical-align: super;
}
Это свойство отвечает за вертикальное выравнивание текста. Его значение super определяет, что текст выведется в верхнем индексе. Но размер шрифта остался таким же, как и у обычного текста. Чтобы все выглядело более красиво, нужно также задать размер шрифта чуть меньше с помощью свойства font-size.
Вот так вот просто работает свойство. Соответственно, для вывода в нижнем индексе нужно написать так:
.top-index{
Vertical-align: sub;
}
Отличие от аналогичных html-тегов в том, что эти правила не меняют размер шрифта, поэтому если вам нужно это сделать, то придется прописать новый размер в таблице стилей.
Это все, что вам нужно знать о верхнем и нижнем индексе в css. Никаких дополнительных возможностей свойство не дает, да и они не нужны. При желании вы можете как-то по особенному оформить этот текст, но это редко бывает необходимо.
Где может пригодиться
Надстрочный и подстрочный текст может применяться при написании формул, добавления примечаний и пометок к статьям. Например, на Википедии к каждой статье приводятся источники и примечания. По ходу статьи они расставляются в виде небольших надстрочных пометок. Это не раздражает читателей и в то же время позволяет придать статьям нужный вид.
Свойство полностью кроссбраузерно и поддерживается во всех версиях CSS.