Ostatnia aktualizacja 24 marca, 2023
Jeśli szukasz informacji o ustawieniach tekstu, prawdopodobnie masz już gotową witrynę i wstępny podział na kategorie. Kolejny etap to wypełnienie jej treścią oraz dostosowanie jej wyglądu do stylu reszty projektu oraz zadbanie o czytelność. Na tym etapie musimy wiedzieć jak zmienić kolor fontu, jego rodzaj oraz jak wyśrodkować tekst – HTML i CSS umożliwią także zadbanie o wszelkie detale wpływające zarówno na estetykę, jak i czytelność strony.
HTML i CSS często są używane razem, aby stworzyć kompleksowe strony internetowe. HTML definiuje strukturę strony, a CSS odpowiada za stylizację i układ elementów w witrynie. Wspólnie pozwalają na tworzenie interaktywnych i responsywnych stron internetowych, które wyglądają estetycznie i są łatwe w odczytaniu i nawigacji.
Sprawdź: Jak zrobić stronę internetową w HTML-u?
Jak wyśrodkować tekst HTML?
Wyśrodkowanie tekstu w HTML-u jest możliwe na dwa sposoby:
- Wykorzystanie elementu <center>
- Użycie stylów CSS
Tag <center> jest obecnie przestarzały i nie rekomenduje się do tworzenia współczesnych stron. Jednak dla uporządkowania wiedzy, warto zapoznać się z tym, jak wyśrodkować tekst HTML:
<center>
<h1>Tekst wyśrodkowany</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</center>Lepszym rozwiązaniem będzie zastosowanie stylów CSS, które pozwalają na bardziej elastyczne decyzje projektowe. W jaki sposób to zrobić w tym przypadku?
Połączenie elementu <div> i CSS
Możemy utworzyć kontener <div> i ustawić mu styl CSS: text-align: center. Następnie umieszcza się elementy, które mają być wyśrodkowane wewnątrz tego kontenera.
<div style="text-align: center;">
<h1>Tekst wyśrodkowany</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>- <div style> odpowiada za wydzielanie bloków, w których zawrzemy informacje o cechach elementów, ale też możemy zamieścić tam tekst. Nadaje się do tworzenia bardziej zaawansowanych struktur
- <h1> to nagłówek pierwszego poziomu, który jest np. tytułem wpisu.
- <p> jest paragrafem, w którym zamieszcza się większą ilość tekstu.
Zobacz: Kolory HTML – na czym polegają i jak je ustawić?
Inne ustawienia tekstu za pomocą HTML-a i CSS-a
Podczas pracy nad wyświetlaniem tekstu w witrynie, będziemy potrzebować również innych elementów w zależności od założeń projektowych.
Zmiana rozmiaru tekstu
Rozmiar tekstu można zmienić za pomocą następującego stylu CSS:
<p style="font-size: 20px;">Tekst w 20px</p>Rodzaj fontu
Ustalanie rodzajów fontów robi się następująco:
<p style="font-family: Arial, sans-serif;">Tekst w Arial</p>Wyrównywanie tekstu
Istnieją cztery podstawowe orientacje dotyczące wyrównywania tekstu na stronie. Za pomocą stylów CSS można je ustawić następująco:
<p style="text-align: left;">Tekst wyrównany do lewej strony</p>
<p style="text-align: right;">Tekst wyrównany do prawej strony</p>
<p style="text-align: center;">Tekst wyśrodkowany</p>
<p style="text-align: justify;">Tekst zjustowany do obu krawędzi</p>
