Indeks względem tekstu to przemieszczenie znaków względem linii bazowej w górę lub w dół. W zależności od dodatniej lub ujemnej wartości przesunięcia indeks nazywany jest odpowiednio górnym lub dolnym. Są aktywnie wykorzystywane w matematyce, fizyce, chemii oraz do wyznaczania jednostek miar. HTML oferuje dwa elementy do utworzenia indeksu: ^{(z angielskiego indeksu górnego) - indeks górny i _{(z angielskiego indeksu dolnego) - dolny indeks. Tekst umieszczony w jednym z tych kontenerów jest oznaczony jako mniejszy niż tekst bazowy i jest względem niego przesunięty w górę lub w dół. Przykład 1 pokazuje partycypujący określone elementy i style, aby zmienić wygląd tekstu.}}

Przykład 1: Tworzenie indeksu górnego i dolnego

Równanie charakterystyczne powierzchni drugiego stopnia

λ ³-I ₁λ ²+ja ₂λ - I ₃ = 0

W tym przykładzie indeks dolny i górny pojawiają się jednocześnie. Aby zmienić styl czcionki indeksowej, stosuje się style ustalające jednolity wygląd (ryc. 1).

Ryż. 1. Widok indeksów po zastosowaniu stylów

Możesz całkowicie przestać go używać ^{I _{na rzecz stylów. Analogiem tych elementów jest właściwość Vertical-align, która powoduje przesunięcie tekstu w pionie o określoną odległość. W szczególności w przykładzie 2 wartość wynosi 0,8 em dla indeksu górnego i -0,5 em dla indeksu dolnego. Em to jednostka względna równa rozmiarowi bieżącej czcionki. Na przykład wartość 0,5em oznacza, że ​​tekst powinien zostać przesunięty o połowę rozmiaru czcionki.}}

Przykład 2: Używanie stylów do zarządzania indeksami

Wielomian stopnia N

f(x) = a 0+a 1 x + ... + a n-1 X n-1+a N X N

W przykładzie sama formuła jest wyświetlona w powiększeniu, symbole indeksu górnego są ustawione na czerwono, a dolne na niebiesko (ryc. 2).

Cześć. Czasami podczas tworzenia stron internetowych konieczne jest określenie niektórych słów używając CSS wielkie litery lub indeks górny. Zobaczmy jak to się robi.

Wielkie i małe litery przy użyciu CSS

Ogólnie rzecz biorąc, nawet dzisiaj możesz zawrzeć żądany tekst w tagach _{^{i uzyskaj żądany wyświetlacz, ale zobaczmy także, jak można to zrobić za pomocą css, ponieważ technika jest nieco inna.}}

Na przykład musisz zapisać formułę H 2 O w dokumencie HTML. Odbywa się to w następujący sposób:

• Sama formuła jest napisana
• Te słowa i liczby, które muszą być wyświetlane w górnym lub dolnym indeksie, są ujęte w znaczniku span, któremu należy przypisać jakąś klasę. Na przykład: znaki, które mają zostać wyprowadzone
• W css musisz ustawić ten element:

  Najwyższy indeks (
  Wyrównanie w pionie: super;
  }

Ta właściwość odpowiada za pionowe wyrównanie tekstu. Jego wartość super określa, że ​​tekst będzie wyświetlany w indeksie górnym. Ale rozmiar czcionki pozostał taki sam jak zwykłego tekstu. Aby wszystko wyglądało ładniej, powinieneś także ustawić nieco mniejszy rozmiar czcionki za pomocą właściwości Font-size.

Tak po prostu działa ta nieruchomość. W związku z tym, aby wyświetlić indeks dolny, musisz napisać w ten sposób:

Najwyższy indeks (
Wyrównanie w pionie: sub;
}

Różnica od podobnych tagów HTML polega na tym, że te reguły nie zmieniają rozmiaru czcionki, więc jeśli zajdzie taka potrzeba, będziesz musiał wpisać nowy rozmiar w arkuszu stylów.

To wszystko, co musisz wiedzieć o indeksie górnym i dolnym w CSS. Nic dodatkowe funkcje nieruchomość nie zapewnia i nie są potrzebne. Jeśli chcesz, możesz zaprojektować ten tekst w specjalny sposób, ale rzadko jest to konieczne.

Gdzie może się to przydać

Tekst indeksu górnego i dolnego można używać podczas pisania formuł, dodawania notatek i notatek do artykułów. Na przykład Wikipedia udostępnia źródła i notatki do każdego artykułu. W miarę postępu artykułu są one umieszczane w formie małych indeksów górnych. Nie irytuje to czytelników, a jednocześnie pozwala nadać artykułom pożądany wygląd.

Właściwość jest w pełni obsługiwana w różnych przeglądarkach i obsługiwana we wszystkich wersjach CSS.

Tagi HTML _{I ^{- Tekst indeksu dolnego i górnego}}

Definicja i zastosowanie

Etykietka _{definiuje tekst interlinearny. Tekst sublinearny ma połowę wysokości i pojawia się poniżej linii bazowej. Tekstu międzyliniowego można używać podczas zapisywania wzorów chemicznych, takich jak H 2 O.}

Etykietka ^{definiuje tekst indeksu górnego. Tekst w indeksie górnym ma połowę wysokości i pojawia się powyżej linii bazowej. Tekst indeksu górnego może być używany podczas pisania przypisów, takich jak WWW.}

Obsługa przeglądarki

Tagi _{I ^{obsługiwane przez wszystkie główne przeglądarki.}}

Różnice pomiędzy HTML i XHTML

Standardowe atrybuty

Kolumna DTD określa, w jakim typie dokumentu dozwolony jest atrybut DTD HTML 4.01/XHTML 1.0. S=ścisły, T=przejściowy i F=zestaw ramek.

Tagi _{I ^{obsługują następujące standardowe atrybuty:}}

Więcej informacji na temat atrybutów standardowych.

Atrybuty zdarzeń

Tagi _{I ^{obsługują następujące atrybuty zdarzeń:}}

Więcej informacji nt

Od kilku lekcji jesteśmy coraz bardziej wyrafinowani w formatowaniu tekstu za pomocą CSS i tym razem uczymy się, jak zmieniać wielkość liter w tekście. Pod tym względem kaskadowe arkusze stylów otwierają przed nami bardzo szerokie możliwości, a ściślej mówiąc możemy:

• Wyświetlaj cały tekst wielkimi literami;
• Zaznacz cały tekst pisany małymi literami;
• Upewnij się, że pierwsza litera każdego słowa zaczyna się od dużej litery.

„Oczywiście wszystko dobrze, ale kiedy może być potrzebne?” - pytasz. Wyobraźmy sobie sytuację, w której musisz wyświetlić wszystkie pozycje menu wielkimi literami. Aby to zrobić, nie trzeba ich wpisywać, łącznie z klawiszem CapsLock, ani przytrzymując przycisk Shift. Wystarczy ustawić wyświetlanie wszystkich pozycji listy wielkimi literami, tworząc odpowiednią regułę w pliku CSS. A to tylko jedna z wielu możliwych sytuacji.

właściwość transformacji tekstu

Wielkość liter będziemy kontrolować za pomocą właściwości text-transform. Ma 4 główne wartości - wielkie litery (duże litery), małe litery (małe litery), wielkie litery (wielkie litery dla każdej pierwszej litery słowa, pozostałe wartości nie ulegają zmianie), brak (formatowanie nie jest stosowane) . Na pierwszy rzut oka wszystko to może wydawać Ci się bardzo skomplikowane.

Ale w praktyce wszystko jest dość proste, jak teraz zobaczysz. Najważniejsze jest, aby wybrać odpowiedni selektor, ponieważ wartości właściwości transformacji tekstu są dziedziczone.

Skapitalizować

Na początek sugeruję ustawienie całego tekstu na wielkie litery, dla czego tworzymy następującą regułę CSS:

Treść (przekształcenie tekstu: wielkie litery; )

W zasadzie nic skomplikowanego, po prostu użyliśmy wielkich liter. Jak mówią, wszystko jest intuicyjne. Tak to wygląda w prawdziwym życiu:

Małe litery – dotyczą wszystkich

Następnym krokiem jest zastosowanie wszędzie małych liter, wpisując:

Treść (przekształcenie tekstu: małe litery; )

Jak już zapewne się domyślasz, oba znaczenia, które właśnie poznaliśmy, są w pewnym stopniu antonimami. Na poniższej ilustracji możesz zobaczyć wynik nowo utworzonej właściwości.

Pierwszą literę każdego słowa pisz wielką literą

Aby to zrobić, wystarczy użyć odpowiedniej wartości:

Treść (przekształcenie tekstu: wielkie litery; )

Nie wiem, jak często będziesz korzystał z takiej reguły CSS, ale nie zaszkodzi Ci wiedza o takiej możliwości, zwłaszcza przy rozwiązywaniu nietrywialnych problemów. Wynik można zobaczyć na obrazku poniżej.

Na koniec rzućmy okiem na ostatnią wartość – brak. Jak już mówiłem, można go użyć do anulowania spadku po rodzicu. Wyobraźmy sobie na przykład, że obowiązują wszystkie poprzednie reguły i dla akapitów powinniśmy je anulować, w tym celu piszemy:

P (przekształcenie tekstu: brak; )

Ośmielę się założyć, że wszystko jest dla Ciebie jasne, jeśli nie, zadawaj pytania w komentarzach. I to wszystko dla mnie. Mam nadzieję, że ten samouczek CSS był dla Ciebie pomocny. W takim razie:

• Opublikuj ponownie ten artykuł na sieci społecznościowe aby więcej osób z tego skorzystało;
• Zapisz się do mojego newslettera, aby nie przegapić przydatnych i ciekawych wpisów na blogu.

W tym miejscu się z Tobą nie żegnam. Dziękujemy za uwagę i do zobaczenia w kolejnych publikacjach!