Z pewnością wielkość, kolor i rodzaj fontu są kluczowymi elementami formatowania tekstu na stronach internetowych. HTML sam w sobie nie oferuje znaczników do bezpośredniego zmieniania tych właściwości, ale dzięki CSS możemy łatwo dostosowywać wygląd tekstu. W tym artykule omówię, jak za pomocą CSS kontrolować wielkość, kolor i rodzaj fontu w HTML, a także przedstawię liczne przykłady, które pomogą początkującym zrozumieć te techniki.
Przede wszystkim CSS to język stylów, który pozwala na kontrolowanie wyglądu i układu strony internetowej. Co więcej CSS może być dodawany do HTML na trzy sposoby:
- Inline CSS – bezpośrednio w znaczniku HTML za pomocą atrybutu
style
. - Internal CSS – w sekcji
<head>
dokumentu HTML za pomocą znacznika<style>
. - External CSS – w zewnętrznym pliku CSS, który jest linkowany do dokumentu HTML za pomocą znacznika
<link>
.
W artykule skupię się głównie na stosowaniu stylów inline i internal CSS dla prostoty i jasności, ale zrozumienie external CSS jest równie ważne w rozbudowanych projektach.
Wielkość fontu
Wielkość fontu HTML można zmieniać za pomocą właściwości CSS font-size
. Poniżej różne sposoby określania wielkości czcionki:
Piksele (px
):
<p style="font-size: 16px;">To jest tekst o wielkości 16 pikseli.</p>
Em (em
): 1em odpowiada bieżącej wielkości czcionki elementu.
<p style="font-size: 1.5em;">W tym zdaniu tekst jest o wielkości 1.5em (150% bieżącej wielkości czcionki).</p>
Procenty (%
):
<p style="font-size: 120%;">To jest tekst o wielkości 120% bieżącej wielkości czcionki.</p>
Punkty (pt
): używane głównie w druku.
<p style="font-size: 12pt;">Z kolei to jest tekst o wielkości 12 punktów.</p>
Przykład:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład zmiany wielkości czcionki</title>
</head>
<body>
<p style="font-size: 16px;">To jest tekst o wielkości 16 pikseli.</p>
<p style="font-size: 1.5em;">W tym zdaniu tekst jest o wielkości 1.5em.</p>
<p style="font-size: 120%;">To jest tekst o wielkości 120% bieżącej wielkości czcionki.</p>
<p style="font-size: 12pt;">Z kolei to jest tekst o wielkości 12 punktów.</p>
</body>
</html>
To jest tekst o wielkości 16 pikseli.
W tym zdaniu tekst jest o wielkości 1.5em.
To jest tekst o wielkości 120% bieżącej wielkości czcionki.
Z kolei to jest tekst o wielkości 12 punktów.
Kolor fontu
Kolor fontu HTML można zmieniać za pomocą właściwości CSS color
. Możemy używać różnych formatów, takich jak nazwy kolorów, wartości szesnastkowe, wartości RGB i RGBA.
Nazwy kolorów:
<p style="color: red;">To jest czerwony tekst.</p>
Wartości szesnastkowe (Hex):
<p style="color: #00FF00;">W tym zdaniu jest zielony tekst.</p>
RGB:
<p style="color: rgb(0, 0, 255);">Tekst w kolorze niebieskim.</p>
RGBA: z przezroczystością.
<p style="color: rgba(255, 0, 0, 0.5);">Tutaj jest półprzezroczysty czerwony tekst.</p>
Przykład:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład zmiany koloru czcionki</title>
</head>
<body>
<p style="color: red;">To jest czerwony tekst.</p>
<p style="color: #00FF00;">W tym zdaniu jest zielony tekst.</p>
<p style="color: rgb(0, 0, 255);">Tekst w kolorze niebieskim.</p>
<p style="color: rgba(255, 0, 0, 0.5);">Tutaj jest półprzezroczysty czerwony tekst.</p>
</body>
</html>
To jest czerwony tekst.
W tym zdaniu jest zielony tekst.
Tekst w kolorze niebieskim.
Tutaj jest półprzezroczysty czerwony tekst.
Wykaz podstawowych nazw kolorów
- black (czarny)
- white (biały)
- red (czerwony)
- blue (niebieski)
- green (zielony)
- silver (srebrny)
- gray (szary)
- yellow (żółty)
- purple (purpurowy)
- maroon (kasztanowy)
- olive (oliwkowy)
- lime (limonkowy)
- aqua (morski)
- teal (teal)
- navy (granatowy)
Rodzaj fontu
Rodzaj fontu (czcionki) HTML można zmieniać za pomocą właściwości CSS font-family
. Możemy określić konkretne fonty lub rodziny fontów, a także ustawić listę zapasowych fontów, które będą używane w przypadku braku dostępności pierwszego fontu.
Nazwanie konkretnych fontów:
<p style="font-family: Arial;">To jest tekst w korzystający z fontu Arial.</p>
Rodziny fontów:
<p style="font-family: 'Times New Roman', Times, serif;">To jest tekst w rodzinie fontów Times.</p>
Lista zapasowych fontów:
<p style="font-family: Verdana, Geneva, sans-serif;">To jest tekst w rodzinie fontów Verdana, a jeśli Verdana jest niedostępna, w rodzinie Geneva.</p>
Przykład:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład zmiany rodzaju fontu</title>
</head>
<body>
<p style="font-family: Arial;">To jest tekst w korzystający z fontu Arial.</p>
<p style="font-family: 'Times New Roman', Times, serif;">To jest tekst w rodzinie fontów Times.</p>
<p style="font-family: Verdana, Geneva, sans-serif;">W tym zdaniu tekst jest w rodzinie fontów Verdana, a jeśli Verdana jest niedostępna, w rodzinie Geneva.</p>
</body>
</html>
To jest tekst w fontu Arial.
To jest tekst w rodzinie fontów Times.
W tym zdaniu tekst jest w rodzinie fontów Verdana, a jeśli Verdana jest niedostępna, w rodzinie Geneva.
Kombinacja stylów
Możemy łączyć różne właściwości CSS, aby uzyskać bardziej zaawansowane formatowanie tekstu.
Przykład:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład zaawansowanego formatowania tekstu</title>
<style>
.styl-tekstu {
font-size: 20px;
color: #FF5733;
font-family: 'Courier New', Courier, monospace;
text-align: center;
}
</style>
</head>
<body>
<p class="styl-tekstu">To jest zaawansowane formatowanie tekstu.</p>
</body>
</html>
To jest zaawansowane formatowanie tekstu.
Wielkość, kolor, rodzaj fontu – podsumowanie
Z pewnością zmiana wielkości, koloru i rodzaju fontu w HTML za pomocą CSS pozwala na tworzenie estetycznych i czytelnych stron internetowych. Co więcej CSS daje nam ogromne możliwości w zakresie stylizacji tekstu, co jest kluczowe dla przyciągania uwagi użytkowników. Dlatego dzięki przykładom i praktyce zrozumienie tych podstawowych technik umożliwi początkującym tworzenie bardziej zaawansowanych i profesjonalnych stron internetowych. Zachęcam do eksperymentowania z różnymi stylami i właściwościami CSS, aby lepiej zrozumieć ich zastosowanie i efekty.