Jak na stronie dodać indeks Górny i/lub Dolny w HTML i/lub CSS?

kursy tutoriale

W języku skryptowym HTML jak i w CSS bardzo łatwo uzyskać efekt mniejszego tekstu u góry (indeks górny ) lub dołu normalnego (indeks dolny ).

Chodzi np. o mały numerek (np. symbol do kwadratu) lub gwiazdkę na końcu akapitu lub w jego ciągu. Wykorzystać to można do dodawania np. potęgi, dodawania symbolu „stopnia” przy temperaturze.

Indeksy z pomocą HTML – jak je zrobić?!

Na początek jak zwykle zaczniemy podstaw czyli HTML. Poznamy więc 2 znaczniki, które domyślnie dadzą nam możliwość zmiany wyglądu elementów wewnątrz nich. Jeden z nich sprawi, że tekst znajdzie się u góry a drugi u dołu.

Indeks górny HTML

Indeks górny (mniejszy tekst z boku normalnego umiejscowiony u góry) uzyskać można poprzez zastosowanie elementu  ( z języka angielskiego „superscript” czyli indeks górny).

przykład:

Przykładowy tekst ^{indeks górny}

Przykładowy tekst <sup>indeks górny</sup>

Skoro już wiemy co robi przejdziemy do kolejnego typu indexu.

Indeks dolny HTML

Indeks dolny uzyskujemy poprzez zastosowanie elementu  (z języka angielskiego „subscript” czyli indeks dolny).

przykład:

Przykładowy tekst _{indeks dolny}

Przykładowy tekst <sub>indeks dolny</sub>

Indeks górny i dolny w CSS – vertical-align

Jak większość znaczników HTML także i indeksy posiadają swoje wersje CSS.

Przykładowe klasa CSS:

.indexgorny {vertical-align: super;} // indeks górny
.indexdolny {vertical-align: sub;} // indeks dolny

Przykładowy tekst indeks górny

Przykładowy tekst indeks dolny

W HTML zapisujemy to następująco

Przykładowy tekst <span class="indexgorny">indeks górny</span>
Przykładowy tekst <span class="indexdolny">indeks dolny</span>

Efekt użycia w obu przypadkach jest praktycznie identyczny, a to który zostanie zastosowany zależy od naszych preferencji lub edytora tekstu z którego korzystamy.