Wyrównanie tekstu — CSS

text-align ustawia wyrównanie wierszy, a line-height wpływa na czytelność.

Cel lekcji

Poznać zagadnienie „Wyrównanie tekstu”, zrozumieć przykład i umieć zastosować podobny zapis we własnym programie.

Wyjaśnienie krok po kroku

Długich akapitów zazwyczaj nie warto centrować.

Najpierw przeanalizuj kod bez uruchamiania. Zwróć uwagę, jakie dane wykorzystuje program, co z nimi robi i skąd bierze się wynik pokazany pod przykładem.

Praktyczny przykład

Gdzie zobaczysz efekt: Wygląd strony w przeglądarce

p {
  text-align: left;
  line-height: 1.6;
  max-width: 55ch;
}

Przeczytaj kod linijka po linijce

p {Wybieramy elementy, które mają otrzymać podane style.
text-align: left;Przypisujemy wartość wybranej właściwości CSS.
line-height: 1.6;Określamy rozmiar lub czytelność tekstu.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Akapit jest wyrównany do lewej i ma zwiększone odstępy między liniami.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Jak utrwalić tę umiejętność?

Przepisz kod samodzielnie. Następnie zmień jedną wartość lub jedną instrukcję i spróbuj przewidzieć efekt. Dopiero potem uruchom zmienioną wersję. Jeśli wynik jest inny niż oczekiwany, porównaj kolejne linie.

Spróbuj samodzielnie

Porównaj line-height: 1 i 1.6.