Wysokość linii JavaScript

| | | | | | | | | | | | | | | | | | | | | | | | | |

Właściwość CSS line-height określa wysokość linii różnych elementów HTML. Jest powszechnie używany do określenia odległości między wierszami tekstu. Wysokość linii można ustawić za pomocą słów - kluczy, wartości procentowych lub wartości liczbowych.

Właściwość CSS line-height umożliwia programistom ustawienie odstępu między dwoma wbudowanymi elementami na stronie internetowej. Deweloperzy często używają właściwości CSS line-height, aby zwiększyć lub zmniejszyć odległość między wierszami tekstu na stronie internetowej.

Ten samouczek wyjaśnia, jak używać właściwości CSS line-height. Odniesiemy się do przykładu, aby zacząć. Zanim skończysz czytać ten samouczek, będziesz dobrze rozumieć używanie właściwości line-height w swoim kodzie.

Line-height CSS

Właściwość line-height CSS definiuje wysokość pola wiersza. Obszary linii to linie, które tworzą obszar w CSS . Ta metoda jest często używana do określania odległości między wierszami tekstu.

Regulacja wysokości wierszy pozwala pośrednio dostosować odstępy między wierszami tekstu (lub innymi elementami) na stronie internetowej. Jest to bardzo podobne do formatowania tekstu w Microsoft Word z podwójnym odstępem lub odstępem 1,15.

Składnia właściwości CSS line-height jest następująca:

"lineHeight" odnosi się do wartości długości, która definiuje wysokość elementu.

Trzy typy wartości „Ęã‚Ęã, których można używać z właściwością line-height to długość, liczba i wartość procentowa:

Wartość Opis Przykładowe wartości ‚ Ęã‚Ęã Wynik Przykładowe wartości ‚Ęã‚Ęã
Długość Określa wysokość linii za pomocą określonej jednostki miary (np. em, px i cm). 10 px, 15 px, 20 px Jeśli określisz 10px, wysokość linii wyniesie 10px.
Liczba Ustawia wysokość linii jako wielokrotność rozmiaru czcionki. 1, 1,8, 2 Jeśli rozmiar czcionki to 10px, wysokość wiersza będzie wynosić odpowiednio 10px, 18px i 20px.
procent Określa wysokość wiersza jako procent rozmiaru czcionki elementu. 30%, 50%, 110% Jeśli rozmiar czcionki to 10 pikseli, wysokość wiersza będzie wynosić odpowiednio 3, 5 i 11 pikseli.

Alternatywnie możesz określić słowo kluczowe „normalny”. To słowo kluczowe określa użycie domyślnej przeglądarki. Wartość ta wynosi zwykle około 1,2, w zależności od przeglądarki używanej przez użytkownika.

Jeśli zastosujesz właściwość line-height do pola, cały tekst w tym polu będzie używał wysokości określonego pola .line.

Uwaga na temat dostępności

Zmiana linii odstępy są powszechnym zastosowaniem właściwości line-height. Dzieje się tak, ponieważ zawsze chcesz mieć pewność, że jest wystarczająco dużo miejsca między wierszami. Jeśli nie ma wystarczającej przestrzeni między wierszami, tekst może być trudny do odczytania.

Tekst trudny do odczytania, szczególnie poważny wpływ na osoby niedowidzące. Przy tworzeniu strony internetowej należy zawsze brać pod uwagę dostępność.

W przypadku używania liczby do ustawienia wysokości wiersza element w CSS, powinieneś d nie używaj wartości mniejszych niż 1,5. Dzieje się tak, ponieważ wartości wysokości wiersza mniejsze niż 1,5 mogą utrudnić korzystanie z witryny dla czytelników niedowidzących.

Przykład CSS dla wysokości wiersza

Załóżmy, że projektujesz „ O nas – strona dla witryny lokalnego klubu kulinarnego. Strona zawiera nagłówek, po którym następuje akapit tekstu opisujący opis klubu.

Chcemy, aby nasz tekst był odpowiednio rozłożony. ustaw wysokość wiersza akapitu tekstu na stronie internetowej na 1,6 rem. Możemy to zrobić za pomocą tego kodu:

Nasz kod zwraca: Kliknij „Obraz w edytorze kodu powyżej, aby zobaczyć wynik naszego kodu HTML / CSS.

W naszym pliku HTML zdefiniowaliśmy nagłówek „O nas” za pomocą tagu

. Dlatego napisaliśmy opis Fantastic Chefs i umieściliśmy go w HTML

tag .

W naszym pliku CSS zdefiniowaliśmy regułę.Nasza reguła używa dwóch właściwości CSS.Ustawiamy wysokość wiersza na 1,6rem i rozmiar czcionki do 16px dla wszystkich

tagów HTML.

Jednostka miary „rem”, której użyliśmy we właściwości line-height, określa wysokość wiersza w stosunku do rozmiaru czcionki elementu głównego. „rem” oznacza „element główny”. Tak więc, ponieważ nasz rozmiar czcionki wynosił 16 pikseli, wysokość wiersza tego akapitu tekstu wynosiła 25,6 pikseli (16 pikseli * 1,6).

Tekst w powyższym akapicie jest dobrze rozłożony i nie zachodzą na siebie.

Możemy również zastosować wysokość wiersza do naszego elementu na wartości „Ęã‚Ęãwe określone. Oznaczałoby to, że miałoby to wpływ na nasze tytuły i nasz

tag.

Wniosek

Właściwość CSS line-hei Właściwość ght definiuje wysokość ramki liniowej. Zazwyczaj ta właściwość służy do ustawiania odstępów między wierszami tekstu w akapicie lub nagłówku. Wysokość wiersza można ustawić za pomocą normalnego słowa kluczowego, wartości procentowej, długości lub wartości liczbowej.

W tym samouczku omówiono podstawy właściwości wysokości wiersza CSS i sposoby jej użycia w kodzie. Masz teraz wiedzę, aby zacząć używać właściwości CSS line-height jak ekspert!

Czy chcesz zostać programistą internetowym? Zapoznaj się z naszym Przewodnikiem po CSS , aby uzyskać porady ekspertów i wskazówki dotyczące najlepszych zasobów edukacyjnych i kursów.