Schriftgröße

Teil des Abschnitts Styling mit CSS der HTML-Journey von Coddy. Lektion 19 von 76.

In CSS wird die Eigenschaft font-size verwendet, um die Größe des Textes innerhalb eines HTML-Elements zu steuern.

Hier sind einige gängige Einheiten zur Angabe von Schriftgrößen:

Pixels (px): Eine absolute Einheit, die die Schriftgröße in Pixeln angibt. Dies ist die unkomplizierteste und am häufigsten verwendete Einheit zum Festlegen von Schriftgrößen.

Ems (em): Eine relative Einheit, die auf der Schriftgröße des übergeordneten Elements basiert. Wenn das übergeordnete Element beispielsweise eine Schriftgröße von 16px hat, entspricht 1em 16px, 2em entspricht 32px und so weiter.

Rems (rem): Eine relative Einheit, die auf der Schriftgröße des Wurzelelements (<html>) basiert. Diese Einheit sorgt für mehr Konsistenz im gesamten Dokument, da sie nicht von der Schriftgröße übergeordneter Elemente beeinflusst wird.

Prozentangaben (%): Eine relative Einheit, die ähnlich wie em auf der Schriftgröße des übergeordneten Elements basiert. Wenn das übergeordnete Element beispielsweise eine Schriftgröße von 16px hat, entspricht 100% 16px, 150% entspricht 24px und so weiter.

Zum Beispiel:

REQUIRED OUTPUT FORMAT: [Your translated content here]

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

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

In diesem Beispiel wird die Schriftgröße aller <p>-Elemente (Absätze) auf 16px gesetzt, alle <h1>-Überschriften werden auf 2.5em gesetzt (was relativ zur Schriftgröße ihres übergeordneten Elements ist), die Basisschriftgröße des Dokuments wird auf 1.4rem gesetzt, und alle Elemente mit der Klasse small-text haben eine Schriftgröße von 80% (was relativ zur Schriftgröße ihres übergeordneten Elements ist).

Aufgabe

Einfach

Du erhältst ein HTML-Dokument mit einer Überschrift (<h1>), einem Absatz (<p>) und einer division (<div>). Deine Aufgabe besteht darin, die Eigenschaft font-size zu verwenden, um diese Elemente zu formatieren. Befolge die folgenden Schritte:

Schreibe eine CSS-Regel, die auf das Element <h1> abzielt. Setze font-size auf 32px.
Schreibe eine CSS-Regel, die auf das Element <p> abzielt. Setze font-size auf 1.2em.
Schreibe eine CSS-Regel, die auf das Element <div> abzielt. Setze font-size auf 120%.

ERFORDERLICHES AUSGABEFORMAT: <translation> [Dein übersetzter Inhalt hier] </translation>

Probier es selbst

<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>