Text mit CSS-Text-Eigenschaften gestalten

Einführung

In diesem Lab werden die Schüler essentielle CSS-Textformatierungstechniken erkunden, um die Web-Typografie und -Lesbarkeit zu verbessern. Das Lab behandelt fünf Schlüsseltexteigenschaften: Zeilenhöhe, Einzug, Ausrichtung, Buchstabenabstand und Textdekoration. Die Teilnehmer lernen, wie sie den vertikalen Abstand zwischen den Zeilen steuern, Text-Einzüge erzeugen, Text ausrichten, den Zeichensatz verändern und dekorative Textstile anwenden können.

Durch praxisnahe Beispiele und praktische HTML/CSS-Demonstrationen werden die Lernenden praktische Fertigkeiten im Umgang mit der Textauffassung und der Verbesserung der visuellen Präsentation von Web-Inhalten erwerben. Jeder Schritt bietet klare Anweisungen und Codesamples, die die jeweilige Textformatierungseigenschaft veranschaulichen, sodass die Schüler diese grundlegenden CSS-Textformatierungstechniken effektiv verstehen und implementieren können.

Setze die Zeilenhöhe mit der `line-height`-Eigenschaft

In diesem Schritt lernst du, wie du die Zeilenhöhe von Text mit der CSS-line-height-Eigenschaft steuern kannst. Die Zeilenhöhe ist der vertikale Abstand zwischen den Textzeilen, der die Lesbarkeit und das Aussehen des Textes erheblich verbessern kann.

Zunächst erstellen wir eine HTML-Datei, um die Zeilenhöhenformatierung zu demonstrieren. Öffne die WebIDE und erstelle in das Verzeichnis ~/project eine neue Datei namens text-style.html.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Line Height Example</title>
    <style>
      .default-text {
        /* Standard Zeilenhöhe */
        line-height: normal;
      }

      .increased-line-height {
        /* Erhöhte Zeilenhöhe */
        line-height: 1.5;
      }

      .pixel-line-height {
        /* Fixe Zeilenhöhe in Pixeln */
        line-height: 30px;
      }
    </style>
  </head>
  <body>
    <h1>Line Height Demonstration</h1>

    <h2>Standard Zeilenhöhe</h2>
    <p class="default-text">
      Dies ist ein Absatz mit der Standardzeilenhöhe. Beachte, wie die Zeilen
      normal beabstandet sind.
    </p>

    <h2>Erhöhte Zeilenhöhe</h2>
    <p class="increased-line-height">
      Dieser Absatz verwendet eine Zeilenhöhe von 1,5, was mehr Platz zwischen
      den Zeilen bietet und den Text leichter lesbar macht.
    </p>

    <h2>Fixe Zeilenhöhe in Pixeln</h2>
    <p class="pixel-line-height">
      Dieser Absatz hat eine feste Zeilenhöhe von 30 Pixeln. Der Abstand
      zwischen den Zeilen ist konstant und genau kontrolliert.
    </p>
  </body>
</html>

Zergliedern wir die line-height-Eigenschaft:

normal: Standardzeilenhöhe des Browsers
Numerische Werte (wie 1,5): Multipliziert die Schriftgröße
Pixelwerte (wie 30px): Fixe Zeilenhöhe in Pixeln

Steuere die Text-Einrückung mit `text-indent`

In diesem Schritt lernst du, wie du die Text-Einrückung mit der CSS-text-indent-Eigenschaft steuern kannst. Die Text-Einrückung ermöglicht es dir, visuelle Leerzeichen am Anfang von Absätzen zu erzeugen, was die Lesbarkeit und die Gestaltungsästhetik verbessern kann.

Fahren wir mit der vorherigen HTML-Datei fort. Öffne die Datei text-style.html in der WebIDE und modifiziere den bestehenden Inhalt, um die Text-Einrückung zu demonstrieren:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Text Indentation Example</title>
    <style>
      .default-indent {
        /* Standardtext ohne Einrückung */
        text-indent: 0;
      }

      .pixel-indent {
        /* Fixe Pixel-Einrückung */
        text-indent: 20px;
      }

      .percentage-indent {
        /* Prozentuale Einrückung */
        text-indent: 5%;
      }
    </style>
  </head>
  <body>
    <h1>Text Indentation Demonstration</h1>

    <h2>Standardtext (keine Einrückung)</h2>
    <p class="default-indent">
      Dieser Absatz beginnt am linken Rand ohne jede Einrückung. Beachte, wie er
      genau am Rand seines Containers beginnt.
    </p>

    <h2>Pixel-basierte Einrückung</h2>
    <p class="pixel-indent">
      Dieser Absatz hat eine feste 20-Pixel-Einrückung. Die erste Zeile wird 20
      Pixel vom linken Rand weggedrängt.
    </p>

    <h2>Prozentuale Einrückung</h2>
    <p class="percentage-indent">
      Dieser Absatz verwendet eine 5%-ige Einrückung, was bedeutet, dass die
      erste Zeile relativ zur Breite seines Containers eingerückt ist.
    </p>
  </body>
</html>

Die text-indent-Eigenschaft ermöglicht drei Haupttypen von Einrückungen:

0: Keine Einrückung (Standard)
Pixelwerte (wie 20px): Fixe Einrückung
Prozentwerte (wie 5%): Relativ zur Containerbreite

Ausrichte Text mit der `text-align`-Eigenschaft

In diesem Schritt lernst du, wie du die Textausrichtung mit der CSS-text-align-Eigenschaft steuern kannst. Die Textausrichtung ist entscheidend für die Erstellung visuell ansprechender und lesbarer Layouts.

Fahren wir mit der Modifikation der Datei text-style.html in der WebIDE fort, um verschiedene Textausrichtungsoptionen zu demonstrieren:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Text Alignment Example</title>
    <style>
      .left-align {
        /* Linksbündiger Text (Standard) */
        text-align: left;
      }

      .center-align {
        /* Zentrierter Text */
        text-align: center;
      }

      .right-align {
        /* Rechtsbündiger Text */
        text-align: right;
      }

      .justify-align {
        /* Ausgerichteter Text */
        text-align: justify;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <h1>Text Alignment Demonstration</h1>

    <h2>Linksbündiger Text</h2>
    <p class="left-align">
      Dieser Absatz ist an den linken Rand ausgerichtet. Dies ist die
      Standardausrichtung für den meisten Text.
    </p>

    <h2>Zentrierter Text</h2>
    <p class="center-align">
      Dieser Absatz ist horizontal im Container zentriert.
    </p>

    <h2>Rechtsbündiger Text</h2>
    <p class="right-align">
      Dieser Absatz ist an den rechten Rand ausgerichtet. Beachte, wie er von
      der rechten Seite beginnt.
    </p>

    <h2>Ausgerichteter Text</h2>
    <p class="justify-align">
      Ausgerichteter Text dehnt sich aus, um die gesamte Breite des Containers
      zu füllen und dabei gleichmäßige Ränder auf der linken und rechten Seite
      zu schaffen.
    </p>
  </body>
</html>

Die text-align-Eigenschaft bietet vier Hauptausrichtungsoptionen:

left: Ausrichtet Text nach links (Standard)
center: Zentriert Text horizontal
right: Ausrichtet Text nach rechts
justify: Dehnt Text aus, um die Containerbreite zu füllen

Verändere den Buchstabenabstand mit `letter-spacing`

In diesem Schritt lernst du, wie du den Buchstabenabstand mit der CSS-letter-spacing-Eigenschaft steuern kannst. Der Buchstabenabstand ermöglicht es dir, den Abstand zwischen einzelnen Zeichen in einem Text zu verändern, was einzigartige typografische Effekte schaffen kann.

Fahren Sie mit der Bearbeitung der Datei text-style.html in der WebIDE fort, um verschiedene Buchstabenabstandsoptionen zu demonstrieren:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Letter Spacing Example</title>
    <style>
      .default-spacing {
        /* Standard Buchstabenabstand */
        letter-spacing: normal;
      }

      .tight-spacing {
        /* Negativer Buchstabenabstand */
        letter-spacing: -1px;
      }

      .wide-spacing {
        /* Positiver Buchstabenabstand */
        letter-spacing: 3px;
      }

      .heading-spacing {
        /* Abstand für Überschriften */
        letter-spacing: 0, 1em;
      }
    </style>
  </head>
  <body>
    <h1>Letter Spacing Demonstration</h1>

    <h2>Standard Buchstabenabstand</h2>
    <p class="default-spacing">
      Dieser Absatz hat einen normalen Buchstabenabstand. Jedes Zeichen ist an
      seinem Standardabstand positioniert.
    </p>

    <h2>Enge Buchstabenabstände</h2>
    <p class="tight-spacing">
      Dieser Absatz verwendet einen negativen Buchstabenabstand, wodurch die
      Zeichen näher beieinander gerückt werden.
    </p>

    <h2>Weite Buchstabenabstände</h2>
    <p class="wide-spacing">
      Dieser Absatz hat einen erhöhten Buchstabenabstand, wodurch die Zeichen
      weiter voneinander entfernt werden.
    </p>

    <h2>Überschrift mit subtilen Abständen</h2>
    <h3 class="heading-spacing">Stylish Heading with Subtle Letter Spacing</h3>
  </body>
</html>

Die letter-spacing-Eigenschaft bietet drei Hauptoptionen:

normal: Standard Buchstabenabstand
Negative Werte (wie -1px): Verringert den Buchstabenabstand
Positive Werte (wie 3px): Erhöht den Buchstabenabstand

Verziere Text mit `text-decoration`

In diesem Schritt lernst du, wie du visuelle Verzierungen zu Text hinzufügen kannst, indem du die CSS-text-decoration-Eigenschaft verwendest. Mit der Textverzierung kannst du Unterstreichungen, Oberstreichungen und andere stilistische Effekte zu deinem Text hinzufügen.

Fahren Sie mit der Bearbeitung der Datei text-style.html in der WebIDE fort, um verschiedene Textverzierungsoptionen zu demonstrieren:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Text Decoration Example</title>
    <style>
      .underline-text {
        /* Unterstreichter Text */
        text-decoration: underline;
      }

      .overline-text {
        /* Oberstreichter Text */
        text-decoration: overline;
      }

      .line-through-text {
        /* Durchgestrichener Text */
        text-decoration: line-through;
      }

      .multiple-decorations {
        /* Mehrere Textverzierungen */
        text-decoration: underline overline;
      }

      .colored-decoration {
        /* Farbige Textverzierung */
        text-decoration: underline;
        text-decoration-color: rot;
      }
    </style>
  </head>
  <body>
    <h1>Text Decoration Demonstration</h1>

    <h2>Unterstreichter Text</h2>
    <p class="underline-text">Dieser Absatz hat eine Unterstreichung.</p>

    <h2>Oberstreichter Text</h2>
    <p class="overline-text">Dieser Absatz hat eine Oberstreichung.</p>

    <h2>Durchgestrichener Text</h2>
    <p class="line-through-text">Dieser Absatz hat eine Durchstreichung.</p>

    <h2>Mehrere Verzierungen</h2>
    <p class="multiple-decorations">
      Dieser Absatz hat sowohl eine Unterstreichung als auch eine
      Oberstreichung.
    </p>

    <h2>Farbige Verzierung</h2>
    <p class="colored-decoration">
      Dieser Absatz hat eine rote Unterstreichung.
    </p>
  </body>
</html>

Die text-decoration-Eigenschaft bietet mehrere Optionen:

underline: Fügt eine Linie unter dem Text hinzu
overline: Fügt eine Linie über dem Text hinzu
line-through: Fügt eine Linie durch den Text hinzu
Mehrere Verzierungen können kombiniert werden
Die Verzierungsfarbe kann angepasst werden

Zusammenfassung

In diesem Lab haben die Teilnehmer gelernt, wie sie die Textgestaltung mit verschiedenen CSS-Text-Eigenschaften verbessern können. Im ersten Schritt wurde der Fokus auf die Steuerung der Zeilenhöhe mit der line-height-Eigenschaft gelegt, wobei verschiedene Techniken wie das Verwenden von normalen, numerischen Multiplikatoren und Pixelwerten demonstriert wurden, um die Textlesbarkeit und das Erscheinungsbild zu verbessern.

Das Lab hat verschiedene Möglichkeiten zur Manipulation der Textpräsentation untersucht, darunter das Einstellen des Zeilenabstands, die Steuerung der Text-Einrückung, die Ausrichtung von Text, die Anpassung des Buchstabenabstands und die Hinzufügung von Textverzierungen. Indem die Teilnehmer diese CSS-Text-Eigenschaften üben, haben sie praktische Fähigkeiten bei der Erstellung von visuell ansprechenderem und lesbarerem Web-Typografie gewonnen.

Text mit CSS-Text-Eigenschaften gestalten

Einführung

Setze die Zeilenhöhe mit der line-height-Eigenschaft

Steuere die Text-Einrückung mit text-indent

Ausrichte Text mit der text-align-Eigenschaft

Verändere den Buchstabenabstand mit letter-spacing

Verziere Text mit text-decoration