Kategorie
Kurs HTML

Wielkość, kolor, rodzaj fontu

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.

Podstawy CSS

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.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *