Co to jest "line-height"? - Kurs HTML i CSS
Co to jest "line-height"?
line-height to właściwość CSS, która określa odstęp między liniami tekstu wewnątrz danego elementu. Może być wyrażona jako wartość liczbową, jednostkę (np. piksele) lub jako współczynnik wielkości czcionki. Kontroluje ona wysokość wirtualnego prostokąta obejmującego pojedynczą linię tekstu, a nie tylko samą wysokość czcionki.
Tekst / Wysokość linii tekstu {line-height}selektor { line-height: wysokość } Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "wysokość" należy podać konkretną wielkość odstępu między liniami bazowymi wierszy używając jednostek długości. Wpisanie "normal" przywróci wartość domyślną. Polecenie to pozwala ustalić odstęp pomiędzy liniami bazowymi wszystkich wierszy w bloku - tzw. interlinia. Dzięki temu linijki mogą być...
- Komendy CSS 2 / line-height
WARTOŚĆ normal | <liczba> | <długość> | <procent> | inherit OPIS Wysokość linii INICJALIZACJA normal ZASTOSOWANIE wszystkie elementy DZIEDZICZENIE tak PROCENTY odnosi się do rozmiaru czcionki elementu MEDIA visual
Tekst / Indeks górny i dolny <sup, sub>...w prawo. Aby ustawić indeks górny i dolny równo ponad sobą w jednej pionowej linii, można się posłużyć następującym kodem: A<span style="display: inline-block; line-height: 0.5"><sup style="display: block">1</sup><sub>2</sub></span>.
- Komendy HTML 4.01 / Elementy zdeprecjonowane
...APPLET OBJECT codebase APPLET OBJECT color BASEFONT, FONT CSS: color compact DIR, DL, MENU, OL, UL CSS: margin-top, margin-bottom, line-height face BASEFONT, FONT CSS: font-family height APPLET OBJECT height TD, TH CSS: height hspace APPLET, IMG, OBJECT CSS: margin-left, margin-right language SCRIPT type="..." link BODY CSS: :link name APPLET OBJECT noshade HR CSS: border-style nowrap TD, TH CSS: white-space object APPLET...
- Czcionki / Atrybuty mieszane czcionki {font}
...i small-caps font-weight font-stretch - w tym poleceniu obsługiwane jest dopiero w CSS 3 Obowiązkowo wartość font-size Opcjonalnie wartość line-height poprzedzona znakiem ukośnika ("/") Obowiązkowo wartość font-family Zmiana kolejności może (ale nie musi) spowodować, że atrybut taki nie zostanie uznany. Ponadto przed wartością atrybutu line-height (wysokość linii) należy obowiązkowo postawić ukośnik. Obowiązkowo należy podać wartości przynajmniej dla font-size i font-family - w...
- Rozmiary / Wysokość i marginesy automatyczne
Spis treści Wstęp Elementy inline, nie-zastępowane Elementy zastępowane: inline, blokowe, inline-block oraz z oblewaniem (float) Elementy nie-zastępowane: blokowe oraz z oblewaniem (float) Elementy pozycjonowane absolutnie, nie-zastępowane Elementy pozycjonowane absolutnie, zastępowane Wstęp Podrozdział ten opisuje analogiczne zagadnienie, jak Szerokość i marginesy automatyczne, tzn. specjalne zasady dopasowywania wysokości (height) oraz pionowych marginesów elementów (margin-top...
- Pozycjonowanie / Ustawienie {float, vertical-align}
...none... Ustawienie w pionie {vertical-align} selektor { vertical-align: sposób } Polecenie można zastosować do elementów wyświetlanych w linii (inline) lub komórek tabeli (<td>...</td> i <th>...</th>). Jako "sposób" należy podać: baseline - wyrównuje linię bazową elementu do linii bazowej elementu nadrzędnego (domyślnie) middle - ustawia element na środku wysokości elementów sąsiadujących text-top - wyrównuje szczyt elementu do szczytu tekstu elementu nadrzędnego text-bottom...
- Tryb Quirks / Co zmienia przejście z trybu Quirks do trybu zgodności ze standardami?
...zgodności jeżeli deklaracja zawiera nierozpoznawaną wartość, zostaje pominięta w całości. Na przykład po podaniu: span { text-decoration: underline cross-out overline } tekst nie zostanie nawet podkreślony ani nadkreślony, ponieważ wartość cross-out jest nieprawidłowa. Natomiast starsze wersje Internet Explorera interpretowały deklarację do pierwszego nierozpoznanego składnika, tzn. w tym przypadku tekst zostałby pokreślony, ale nie nadkreślony. Miało to wpływ na następujące własności...
- Czcionki / Wariant pozycji czcionki {font-variant-position}
...co prawda się powiększy, ale przynajmniej wygląd indeksów nie będzie popsuty: @supports (font-variant-position: sub) { sub { vertical-align: baseline; font-size: 100%; line-height: inherit; font-variant-position: sub; } } @supports (font-variant-position: super) { sup { vertical-align: baseline; font-size: 100%; line-height: inherit; font-variant-position: super; } } Przykład {font-variant-position} Dzięki zastosowaniu font-variant-position wysokość linii się nie zmienia...
- Jednostki CSS / Długość
...procentowe obszaru wyświetlania. Dzięki nim, nieważne jakie będą fizyczne wymiary ekranu, ustalając wielkość tekstu jako np. "font-size: 5vh; line-height: 100%" zapewnimy, że na ekranie powinno zmieścić się dokładnie 20 linijek tekstu (bez konieczności przewijania). Jednostki bezwzględne Jednostki bezwzględne są użyteczne tylko wtedy, gdy fizyczne własności medium wyjściowego (np. monitor) są znane. Należy ich używać zawsze wtedy, gdy zależy nam, aby wybrany element zajmował zawsze...