CSS-Text


CSS Tutorial  >  Text

Hier werden die gebräuchlichsten Eigenschaften zu CSS-Text genannt.

  • direction
  • letter-spacing
  • line-height
  • text-align
  • text-decoration
  • text-indent
  • text-transform
  • word-spacing

    direction

    Die direction-Eigenschaft gibt die Richtung des Texts an. Mögliche Werte hierfür sind ‚ltr’ und ‚rtl’

    Mit dem folgenden CSS-Statement zum Beispiel,

    p {
      direction:ltr;
    }

    Wüde der folgende HTML-Code,

    <p>LTR Richtung</p>

    so aussehen:

    LTR Richtung

    Mit folgendem CSS-Statement:

    p {
      direction:rtl;
    }

    würde der folgende HTML-Code,

    <p>LTR Richtung</p>

    so aussehen:

    LTR Richtung

    letter-spacing

    Die letter-spacing-Eigenschaft bestimmt den Platz zwischen Zeichen. Mit dem folgenden CSS-Statement zum Beispiel,

    p {
      letter-spacing:8px;
    }

    würde der folgende HTML-Code,

    <p>8px zwischen Buchstaben</p>

    so aussehen:

    8px zwischen Buchstaben

    line-height

    Die line-height-Eigenschaft bestimmt den Platz zwischen Zeilen. Mit dem folgenden CSS-Statement zum Beispiel,

    p {
      line-height:30px;
    }

    würde der folgende HTML-Code,

    <p>30px zwischen Zeile 1<br>und Zeile 2.</p>

    so aussehen:

    30px zwischen Zeile 1
    und Zeile 2.

    text-align

    Die text-align-Eigenschaft gibt an, wie der Text ausgerichtet wird. Mögliche Werte sind:

  • left: linke Ausrichtung
  • right: rechte Ausrichtung
  • center: zentriert
  • justify: bündig ausgerichtet

    Beispiele:

    CSS-StatementAusgabe

    p {
      text-align:left;
    }

    Dieser Satz verdeutlicht, was eine linke Ausrichtung ist.

    p {
      text-align:right;
    }

    Dieser Satz verdeutlicht, was eine rechte Ausrichtung ist.

    p {
      text-align:center;
    }

    Dieser Satz verdeutlicht, was eine zentrierte Ausrichtung ist.

    p {
      text-align:justify;
    }

    Dieser Satz verdeutlicht, was eine bündige Ausrichtung ist.

    text-decoration

    Die text-decoration-Eigenschaft gibt an, wie der Text dekoriert wird. Mögliche Werte sind:

  • underline: unterstreicht den Text
  • overline: platziert eine Linie über den Text
  • line-through: Text wird durchsctrichen
  • blink: der Text blinkt

    Beispiele:

    CSS-StatementAusgabe

    p {
      text-decoration:underline;
    }

    Ein Beispiel für Unterstreichung

    p {
      text-decoration:overline;
    }

    Ein Beispiel für overline

    p {
      text-decoration:line-through;
    }

    Ein Beispiel für einen durchgestrichenen Text

    text-indent

    Die text-indent-Eigenschaft bestimmt, wie weit die erste Zeile eines Textblocks eingerückt werden wird. Es können sowohl Längeneinheiten als auch Prozente benutzt werden. Mit dem folgenden CSS-Statement zum Beispiel,

    p {
      text-indent:15px;
    }

    würde der folgende HTML-Code,

    <p>Dieser Text ist über 15px am Anfang des Paragraphen eingerückt. Folgende Zeilen sind nicht eingerückt.</p>

    so aussehen:

    Dieser Text ist über 15px am Anfang des Paragraphen eingerückt. Folgende Zeilen sind nicht eingerückt.

    text-transform

    Die text-transform-Eigenschaft kontrolliert, wie Groß- und Kleinbuchstaben angezeigt werden. Mögliche Werte sind:

  • capitalize: der erste Buchstabe eines Worts wird groß geschrieben
  • uppercase: das ganze Wort wird groß geschrieben
  • lowercase: das ganze Wort wird klein geschrieben
  • none: es gibt keine Änderung

    Wenn wir zum Beispiel den folgenden CSS-Style auf den Text „dies ist ein ANWALT“ anwenden, erhalten wird folgendes:

    CSS-StatementAusgabe

    p {
      text-transform:capitalize;
    }

    dies ist ein ANWALT

    p {
      text-transform:uppercase;
    }

    DIES IST EIN ANWALT

    p {
      text-transform:lowercase;
    }

    dies ist ein ANWALT

    word-spacing

    Die word-spacing-Eigenschaft bestimmt den Platz zwischen Zeichen. Mit dem folgenden CSS-Statement zum Beispiel,

    p {
      word-spacing:5px;
    }

    würde der folgende HTML-Code,

    <p>Wörter werden hier von 5px getrennt.</p>

    so aussehen:

    Wörter werden hier von 5px getrennt.

    Folgende Seite: CSS Float



    Copyright © 2024   1keydata.com   Alle Rechte vorbehalten