Czcionki w Css 3

CSS (Cascading Style Sheets) umożliwia webmasterom kontrolowanie wyglądu tekstu na stronach internetowych poprzez zastosowanie różnych właściwości czcionek. Właściwości te obejmują font-family, font-size, font-style, font-weight, i wiele innych, umożliwiając precyzyjne dostosowanie stylu tekstu do potrzeb projektu. W tej lekcji przyjrzymy się tym właściwościom, zaprezentujemy ich zastosowanie na praktycznych przykładach i omówimy różne wartości, które mogą przyjmować.

Przykład użycia właściwości czcionek w CSS

Poniższy przykład ilustruje zastosowanie różnych właściwości czcionek w CSS. Kod HTML zawiera kilka elementów tekstowych, do których zastosowane zostaną różnorodne style czcionek.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykłady czcionek w CSS</title>
    <style>
        /* Zastosowanie różnych rodzin czcionek */
        .font-family-example {
            font-family: Arial, sans-serif;
        }

        /* Zmiana rozmiaru czcionki */
        .font-size-example {
            font-size: 20px; /* Ustawia rozmiar czcionki na 20px */
        }

        /* Stylizacja czcionki na kursywę */
        .font-style-example {
            font-style: italic; /* Ustawia styl czcionki na kursywę */
        }

        /* Zmiana grubości czcionki */
        .font-weight-example {
            font-weight: bold; /* Ustawia grubość czcionki na pogrubioną */
        }

        /* Przykład zastosowania wszystkich właściwości */
        .complex-example {
            font-family: 'Times New Roman', serif;
            font-size: 24px;
            font-style: italic;
            font-weight: 700; /* Również oznacza pogrubienie, ale z precyzyjną wartością */
        }
    </style>
</head>
<body>
    <div class="font-family-example">Przykład rodziny czcionek</div>
    <div class="font-size-example">Przykład rozmiaru czcionki</div>
    <div class="font-style-example">Przykład stylu czcionki</div>
    <div class="font-weight-example">Przykład grubości czcionki</div>
    <div class="complex-example">Przykład złożonego stylowania tekstu</div>
</body>
</html>

W powyższym kodzie zilustrowano użycie podstawowych właściwości czcionek w CSS:

  • font-family: Określa rodziny czcionek, które mają być używane do stylizacji tekstu. Można podać kilka nazw czcionek jako zapasowe, jeśli przeglądarka nie może wyświetlić pierwszej z nich.
  • font-size: Definiuje rozmiar czcionki tekstu.
  • font-style: Pozwala na ustawienie stylu czcionki, np. normalny, kursywa (italic) lub pochyły (oblique).
  • font-weight: Określa grubość czcionki, od cienkiej (100) do najgrubszej (900), gdzie bold odpowiada wartości 700.

Podsumowanie

Stylowanie czcionek w CSS oferuje szeroki zakres możliwości do personalizacji wyglądu tekstu na stronach internetowych. Poprzez odpowiednie zastosowanie właściwości takich jak font-family, font-size, font-style, i font-weight, można znacznie poprawić czytelność i estetykę treści. Eksperymentując z różnymi wartościami i kombinacjami tych właściwości, deweloperzy mogą tworzyć unikalne i atrakcyjne projekty witryn.

Poprzedni
Następny
Scroll to Top