Rozmiar czcionki

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 19 z 76.

W CSS właściwość font-size służy do kontrolowania rozmiaru tekstu w elemencie HTML.

Oto kilka popularnych jednostek używanych do określania rozmiarów czcionek:

Piksele (px): Jednostka bezwzględna określająca rozmiar czcionki w pikselach. To najbardziej intuicyjna i najczęściej używana jednostka do ustawiania rozmiaru czcionki.

Ems (em): Jednostka względna oparta na rozmiarze czcionki elementu nadrzędnego. Na przykład, jeśli element nadrzędny ma rozmiar czcionki 16px, to 1em odpowiada 16px, 2em odpowiada 32px i tak dalej.

Remy (rem): Jednostka względna oparta na rozmiarze czcionki elementu głównego (<html>). Zapewnia większą spójność w całym dokumencie, ponieważ nie wpływa na nią rozmiar czcionki elementów nadrzędnych.

Procenty (%): Jednostka względna oparta na rozmiarze czcionki elementu nadrzędnego, podobnie jak em. Na przykład, jeśli element nadrzędny ma rozmiar czcionki 16px, wtedy 100% jest równe 16px, 150% jest równe 24px i tak dalej.

Na przykład:

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

.small-text {
    font-size: 80%;
}

W tym przykładzie rozmiar czcionki wszystkich elementów <p> (akapitu) jest ustawiony na 16px, wszystkie nagłówki <h1> są ustawione na 2.5em (co będzie wartością względną względem rozmiaru czcionki ich elementu nadrzędnego), bazowy rozmiar czcionki dokumentu jest ustawiony na 1.4rem, a wszystkie elementy z klasą small-text mają rozmiar czcionki równy 80% (co będzie wartością względną względem rozmiaru czcionki ich elementu nadrzędnego).

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z nagłówkiem (<h1>), akapitem (<p>) i elementem div (<div>). Twoim zadaniem jest użycie właściwości font-size do ostylowania tych elementów. Wykonaj poniższe kroki:

Napisz regułę CSS, która wybiera element <h1>. Ustaw font-size na 32px.
Napisz regułę CSS, która wybiera element <p>. Ustaw font-size na 1.2em.
Napisz regułę CSS, która wybiera element <div>. Ustaw font-size na 120%.

Spróbuj swoich sił

<html>
<head>
    <title>Font Size</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>