W3docs
de
Anmelden

CSS Text

Grundlagen der Textgestaltung mit CSS: Textfarbe, Ausrichtung, Dekoration, Transformation und mehr. Mit Beispielen erklärt.

CSS bietet Ihnen eine fein abgestimmte Kontrolle darüber, wie Text aussieht. Diese Seite führt durch die wichtigsten Texteigenschaften, auf die Sie am häufigsten zurückgreifen werden — was jede bewirkt, welche Werte sie akzeptiert, und ein minimales lauffähiges Beispiel für jede. Jede Eigenschaft verweist auf ihr eigenes dediziertes Kapitel, in dem Sie tiefer einsteigen können.

Textfarbe

Die Eigenschaft color legt die Farbe des Textes eines Elements fest (und standardmäßig auch seiner Textdekorationen wie Unterstreichungen). Sie können den Wert als Farbschlüsselwort (red), als HEX-Wert (#ff0000), als rgb() / rgba()-Wert (rgb(255 0 0)) oder als hsl()-Wert angeben. Da color vererbt wird, überträgt sich die Einstellung auf einem Container auf den gesamten untergeordneten Text, sofern ihn ein Kind nicht überschreibt.

Beispiel zur Verwendung der CSS-Eigenschaft color:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="color:#ff0000">This is some paragraph in red.</p>
  </body>
</html>
Probier es selbst »

Ergebnis

Textfarbe

Textausrichtung

Die Ausrichtungseigenschaft wird verwendet, um Text innerhalb eines Elements links, rechts, zentriert usw. auszurichten.

Die Textausrichtung hat vier Werte:

  • Left (text-align: left) - richtet den Text linksbündig aus
  • Right (text-align: right) - richtet den Text rechtsbündig aus
  • Center (text-align: center) - zentriert den Text auf der Seite
  • Justify (text-align: justify) - dehnt die Textzeile so aus, dass sie sowohl links als auch rechts bündig ist (wie in Zeitschriften und Zeitungen)

Standardmäßig richten Browser Text am Anfang der Zeile aus — links in Sprachen von links nach rechts wie Englisch. Verwenden Sie den passenden Wert, wenn Sie eine andere Ausrichtung benötigen. Für sprachbewusste Ausrichtung sind die logischen Schlüsselwörter start und end den Werten left und right vorzuziehen.

Beispiel zur Verwendung der CSS-Eigenschaft text-align:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>This is some paragraph</p>
    <p style="text-align:center">Some paragraph with value center.</p>
    <p style="text-align:right">Some paragraph with value right.</p>
    <p style="text-align:justify">Some paragraph with value justify.</p>
  </body>
</html>
Probier es selbst »

Textdekoration

Die Eigenschaft text-decoration fügt Text Linien hinzu. Im modernen CSS ist sie eine Kurzschreibweise für CSS text-decoration-line, CSS text-decoration-color und CSS text-decoration-style. Die häufigsten Werte für den Teil text-decoration-line sind:

  • Overline (text-decoration: overline) - zeichnet eine Linie über den Text
  • Underline (text-decoration: underline) - zeichnet eine Linie unter den Text
  • Line-through (text-decoration: line-through) - zeichnet eine Linie durch die Mitte des Textes
  • None (text-decoration: none) - entfernt jede Dekoration; dies wird verwendet, um die standardmäßige Unterstreichung von Links zu entfernen

Beispiel zur Verwendung der CSS-Eigenschaft text-decoration:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a style="text-decoration:none">This is link without underline</a>
    <h1 style="text-decoration:overline">Heading with value overline.</h1>
    <p style="text-decoration:line-through">Some paragraph with value line-through.</p>
    <a style="text-decoration:underline">Some hyperlink with value underline.</a>
  </body>
</html>
Probier es selbst »

Ergebnis

Textdekoration

Texttransformation

Die Transform-Eigenschaft wird zur Steuerung der Textgroß- und Kleinschreibung verwendet. Das bedeutet, dass Sie Ihren Text in Großbuchstaben, Kleinbuchstaben oder mit großem Anfangsbuchstaben (Titelschreibung) anzeigen lassen können.

Die Transform-Eigenschaft hat folgende Werte:

  • Uppercase (text-transform: uppercase) - konvertiert alle Zeichen in Großbuchstaben
  • Lowercase (text-transform: lowercase) - konvertiert alle Zeichen in Kleinbuchstaben
  • Capitalize (text-transform: capitalize) - konvertiert das erste Zeichen jedes Wortes in einen Großbuchstaben
  • None (text-transform: none) - lässt den Text so, wie er geschrieben wurde; dies ist der Standardwert

Bedenken Sie, dass text-transform nur die Darstellung des Textes ändert — der zugrunde liegende HTML-Inhalt bleibt genau so, wie Sie ihn geschrieben haben, was für Kopieren-Einfügen und Barrierefreiheit wichtig ist.

Beispiel zur Verwendung der CSS-Eigenschaft text-transform:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="text-transform:uppercase">Paragraph with uppercase.</p>
    <p style="text-transform:lowercase">Paragraph with lowercase.</p>
    <p style="text-transform:capitalize">Paragraph with capitalize.</p>
  </body>
</html>
Probier es selbst »

Ergebnis

Texttransformation

Textschatten

Die Eigenschaft text-shadow fügt einem Text einen oder mehrere Schatten hinzu. Jeder Schatten wird durch bis zu vier Werte in dieser Reihenfolge beschrieben:

text-shadow: h-shadow v-shadow blur-radius color;
  • h-shadow (erforderlich) - horizontaler Versatz; positive Werte verschieben den Schatten nach rechts, negative nach links.
  • v-shadow (erforderlich) - vertikaler Versatz; positive Werte verschieben den Schatten nach unten, negative nach oben.
  • blur-radius (optional) - wie weich der Schatten ist; größere Werte weichen ihn stärker auf (Standard ist 0).
  • color (optional) - die Schattenfarbe; wenn weggelassen, verwendet der Browser die color des Elements.

Sie können mehrere Schatten durch Kommas getrennt stapeln, so werden Leucht- und Umrisseffekte erzeugt.

Beispiel zur Verwendung der CSS-Eigenschaft text-shadow:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        text-shadow: 2px 2px 4px #888888;
      }
      h2 {
        /* Two shadows stacked to create a glow */
        text-shadow: 0 0 6px #ff0000, 0 0 12px #ff0000;
      }
    </style>
  </head>
  <body>
    <h1>Heading with a soft drop shadow</h1>
    <h2>Heading with a red glow</h2>
  </body>
</html>

Weitere Beispiele finden Sie im Kapitel CSS text-shadow.

Texteinrückung

Die Texteinrückungs-Eigenschaft wird verwendet, um die Länge des leeren Raums der ersten Zeile in einem Textblock anzugeben. Folgende Werte sind für diese Eigenschaft gültig:

  • Length, gibt die Einrückung in px, pt, cm, em usw. an. Der Standardwert ist 0. Negative Werte sind erlaubt.
  • Percentage, gibt die Einrückung als Prozentsatz der Breite des enthaltenden Blocks an.
  • Each-line, wenn die Einrückung die erste Zeile sowie jede Zeile nach einem erzwungenen Zeilenumbruch betrifft, jedoch nicht Zeilen nach einem weichen Umbruch.
  • Hanging, das invertiert, welche Zeilen eingerückt werden. Die erste Zeile wird nicht eingerückt.
  • Initial, lässt die Eigenschaft ihren Standardwert verwenden.
  • Inherit, erbt die Eigenschaft vom übergeordneten Element.

Beispiel zur Verwendung der CSS-Eigenschaft text-indent:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-indent: 100px;
        line-height: 24px;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <h2>Text Indentation Example</h2>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Probier es selbst »

Zeichenabstand

Die CSS-Eigenschaft letter-spacing ermöglicht es, den Abstand zwischen Buchstaben/Zeichen in einem Text festzulegen. Folgende Werte werden von dieser Eigenschaft unterstützt:

  • Normal, bedeutet, dass es keine zusätzlichen Abstände zwischen Zeichen geben wird. Dies ist der Standardwert dieser Eigenschaft.
  • Length, definiert einen zusätzlichen Abstand zwischen Zeichen. Negative Werte sind erlaubt.
  • Initial, lässt die Eigenschaft ihren Standardwert verwenden.
  • Inherit, erbt die Eigenschaft vom übergeordneten Element.

Beispiel zur Verwendung der CSS-Eigenschaft letter-spacing:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-indent: 100px;
        line-height: 24px;
        font-size: 16px;
        letter-spacing: 5px;
      }
      h3 {
        letter-spacing: -1px;
      }
    </style>
  </head>
  <body>
    <h2>Example of letter-spacing property</h2>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <h3>
      Here is some text with letter-spacing property.
    </h3>
  </body>
</html>
Probier es selbst »

Zeilenhöhe

Die Eigenschaft line-height definiert die Zeilenhöhe. Sie wird verwendet, um den Zeilenabstand eines Textes festzulegen. Wenn der Wert von line-height größer als der Wert von font-size eines Elements ist, ergibt die Differenz den Zeilenabstand des Textes. Folgende Werte werden von dieser Eigenschaft unterstützt:

  • Normal, definiert eine normale Zeilenhöhe. Dies ist der Standardwert dieser Eigenschaft.
  • Length, definiert eine feste Zeilenhöhe in px, cm usw.
  • Number, definiert eine Zahl, die mit der aktuellen Schriftgröße multipliziert wird, um die Zeilenhöhe festzulegen.
  • %, definiert eine Zeilenhöhe in Prozent der aktuellen Schriftgröße.
  • Initial, lässt die Eigenschaft ihren Standardwert verwenden.
  • Inherit, erbt die Eigenschaft vom übergeordneten Element.

Ein einheitenloser number-Wert (zum Beispiel line-height: 1.5) ist in der Regel die sicherste Wahl, da er mit der eigenen Schriftgröße jedes Elements skaliert und Vererbungsüberraschungen vermeidet.

Beispiel zur Verwendung der CSS-Eigenschaft line-height:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        line-height: 30px;
      }
      h3 {
        line-height: 1;
      }
    </style>
  </head>
  <body>
    <h2>Example of line-height property</h2>
    <p> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. </p>
    <h3>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </h3> 
  </body>
</html>
Probier es selbst »

Wortabstand

Mit der CSS-Eigenschaft word-spacing können wir den Abstand zwischen den Wörtern in einem Text ändern, nicht die einzelnen Zeichen. Sie unterstützt folgende Werte:

  • Normal, gibt einen normalen Wortabstand an. Dies ist der Standardwert dieser Eigenschaft.
  • Length, gibt einen zusätzlichen Wortabstand an. Kann in px, pt, cm, em usw. angegeben werden. Negative Werte sind gültig.
  • Initial, lässt die Eigenschaft ihren Standardwert verwenden.
  • Inherit, erbt die Eigenschaft vom übergeordneten Element.

Beispiel zur Verwendung der CSS-Eigenschaft word-spacing:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        word-spacing: 1em;
      }
      h3 {
        word-spacing: -3px;
      }
      span {
        display: block;
        word-spacing: 3rem;
      }
    </style>
  </head>
  <body>
    <h2>Example of word-spacing property</h2>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <h3>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </h3>
    <span>
    Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.
    </span>
  </body>
</html>
Probier es selbst »

Übungen

Übung
Welche der folgenden Eigenschaften können Sie verwenden, um das Erscheinungsbild von Text in CSS zu steuern?
Welche der folgenden Eigenschaften können Sie verwenden, um das Erscheinungsbild von Text in CSS zu steuern?
Was this page helpful?