CSS-Text

Hier betrachten wir Eigenschaften, die Ihnen beim Gestalten Ihres Textes helfen können

Textfarbe

Die Eigenschaft color wird verwendet, um die Textfarbe festzulegen. Um die Farbe anzugeben, können Sie einen Farbnamen (red), einen HEX-Wert (#ff0000) oder einen RGB-Wert (rgb (255,0,0) ) verwenden.

Beispiel für die Eigenschaft color:.

Beispiel für die Verwendung der CSS-Eigenschaft color:

html

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

Try it Yourself »

Ergebnis

Text Color

Textausrichtung

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

Die Textausrichtung hat vier Werte:

Links (text-align: left) - richtet den Text links aus
Rechts (text-align: right) - richtet den Text rechts aus
Zentriert (text-align: center) - setzt den Text in die Mitte der Seite
Blocksatz (text-align: justify) - streckt die Textzeile, um sowohl den linken als auch den rechten Rand auszurichten (wie in Zeitschriften und Zeitungen)

Browser richten Text standardmäßig links aus, und wenn Text rechts ausgerichtet oder in die Mitte gesetzt werden soll, sollten wir den entsprechenden Wert verwenden.

Beispiel für die Eigenschaft text-alignment:

Beispiel für die Verwendung der CSS-Eigenschaft text-alignment:

html

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

Try it Yourself »

Textdekoration

Textdekoration wird verwendet, um die Dekoration des Textes festzulegen. In CSS3 ist es eine Kurzform für die Eigenschaften CSS text-decoration-line, CSS text-decoration-color und CSS text-decoration-style.

Die Eigenschaft Decoration wird verwendet, um Linienverzierungen anzugeben, die dem Text hinzugefügt werden. Für die Eigenschaft text-decoration sind die folgenden Werte gültig.

Überlinie (text-decoration:overline) - jede Textzeile hat eine Linie darüber
Unterstreichung (text-decoration:underline) - jede Textzeile wird unterstrichen
Durchgestrichen (text-decoration:line-through) - jede Textzeile hat eine Linie durch sie hindurch
Keine (text-decoration:none) - es wird keine Textdekoration angewendet

Beispiel für die Eigenschaft text-decoration:

Beispiel für die Verwendung der CSS-Eigenschaft text-decoration:

html

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

Try it Yourself »

Ergebnis

Text Decoration

Textumwandlung

Die Eigenschaft Transform wird verwendet, um die Groß-/Kleinschreibung von Text zu steuern. Das bedeutet, dass Sie Ihren Text in Großbuchstaben, Kleinbuchstaben oder mit großgeschriebenen Anfangsbuchstaben (Titel-Schreibweise) festlegen können.

Die Eigenschaft Transform hat die folgenden Werte:

Großbuchstaben (text-transform: uppercase) - wandelt alle Zeichen in Großbuchstaben um
Kleinbuchstaben (text-transform: lowercase) - wandelt alle Zeichen in Kleinbuchstaben um
Großschreibung (text-transform: capitalize) - wandelt den ersten Buchstaben jedes Wortes in einen Großbuchstaben um

Beispiel für die Eigenschaft text-transform:

Beispiel für die Verwendung der CSS-Eigenschaft text-transform:

html

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

Try it Yourself »

Ergebnis

Text Transform

Textschatten

Wir verwenden die Eigenschaft text-shadow, wenn wir unserem Text einen Schatten geben möchten.

Die Eigenschaft Shadow wird verwendet, um verschiedene Schatteneffekte auf den Text anzuwenden. Sie akzeptiert eine Liste von Werten. Jeder Eintrag in der Liste kann zwei oder mehr durch Kommas getrennte Werte haben.

Die Syntax der Eigenschaft text-shadow kann folgendermaßen aussehen

Beispiel für die CSS-Eigenschaft text-shadow

css

text-shadow: h-shadow v-shadow blur color

Hier können Sie Beispiele für Textschatten sehen.

Texteinzug

Die Eigenschaft Textindentation wird verwendet, um die Länge des Leerraums der ersten Zeile in einem Textblock anzugeben. Für diese Eigenschaft sind die folgenden Werte gültig:

Länge, die den Einzug in px, pt, cm, em usw. angibt. Der Standardwert ist 0. Negative Werte sind erlaubt.
Prozent, die den Einzug in Prozent der Breite des enthaltenen Blocks angibt.
Jede Zeile, wenn der Einzug sowohl die erste Zeile als auch jede Zeile nach einem erzwungenen Zeilenumbruch betrifft, aber nicht Zeilen nach einem weichen Umbruch.
Hängend, wodurch umgekehrt wird, welche Zeilen eingerückt sind. Die erste Zeile wird nicht eingerückt.
Initial, wodurch die Eigenschaft ihren Standardwert verwendet.
Inherit, wodurch die Eigenschaft vom übergeordneten Element übernommen wird.

Beispiel für die Eigenschaft text-indent:

Beispiel für die Eigenschaft text-indent

html

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

Try it Yourself »

Buchstabenabstand

Die CSS-Eigenschaft letter-spacing ermöglicht es, die Abstände zwischen Buchstaben/Zeichen in einem Text festzulegen. Die folgenden Werte werden von dieser Eigenschaft unterstützt:

Normal, was bedeutet, dass es keine zusätzlichen Abstände zwischen Zeichen gibt. Dies ist der Standardwert dieser Eigenschaft.
Länge, die einen zusätzlichen Abstand zwischen Zeichen festlegt. Negative Werte sind erlaubt.
Initial, wodurch die Eigenschaft ihren Standardwert verwendet.
Inherit, wodurch die Eigenschaft vom übergeordneten Element übernommen wird.

Beispiel für die Eigenschaft letter-spacing:

Beispiel für die Eigenschaft letter-spacing

html

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

Try it Yourself »

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 ist als der Wert von font-size eines Elements, ist die Differenz der Zeilenabstand des Textes. Hier sind die von dieser Eigenschaft unterstützten Werte:

Normal, was eine normale Zeilenhöhe definiert. Dies ist der Standardwert dieser Eigenschaft.
Länge, die eine feste Zeilenhöhe in px, cm usw. definiert.
Zahl, die eine Zahl definiert, die mit der aktuellen Schriftgröße multipliziert wird, um die Zeilenhöhe festzulegen.
%, die eine Zeilenhöhe in Prozent der aktuellen Schriftgröße definiert.
Initial, wodurch die Eigenschaft ihren Standardwert verwendet.
Inherit, wodurch die Eigenschaft vom übergeordneten Element übernommen wird.

Beispiel für die Eigenschaft line-height:

Beispiel für die Eigenschaft line-height

html

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

Try it Yourself »

Wortabstand

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

Normal, was einen normalen Wortabstand angibt. Dies ist der Standardwert dieser Eigenschaft.
Länge, die einen zusätzlichen Wortabstand angibt. Kann in px, pt, cm, em usw. angegeben werden. Negative Werte sind gültig.
Initial, wodurch die Eigenschaft ihren Standardwert verwendet.
Inherit, wodurch die Eigenschaft vom übergeordneten Element übernommen wird.

Beispiel für die Eigenschaft word-spacing:

Beispiel für die Eigenschaft word-spacing

html

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

Try it Yourself »

Practice

Welche der folgenden Eigenschaften können Sie verwenden, um das Erscheinungsbild von Text in CSS zu steuern?

CSS-Text ​

Textfarbe ​

Beispiel für die Eigenschaft color:. ​

Ergebnis ​

Textausrichtung ​

Beispiel für die Eigenschaft text-alignment: ​

Textdekoration ​

Beispiel für die Eigenschaft text-decoration: ​

Ergebnis ​

Textumwandlung ​

Beispiel für die Eigenschaft text-transform: ​

Ergebnis ​

Textschatten ​

Texteinzug ​

Beispiel für die Eigenschaft text-indent: ​

Buchstabenabstand ​

Beispiel für die Eigenschaft letter-spacing: ​

Zeilenhöhe ​

Beispiel für die Eigenschaft line-height: ​

Wortabstand ​

Beispiel für die Eigenschaft word-spacing: ​

Practice ​

CSS-Text

Textfarbe

Beispiel für die Eigenschaft color:.

Ergebnis

Textausrichtung

Beispiel für die Eigenschaft text-alignment:

Textdekoration

Beispiel für die Eigenschaft text-decoration:

Ergebnis

Textumwandlung

Beispiel für die Eigenschaft text-transform:

Ergebnis

Textschatten

Texteinzug

Beispiel für die Eigenschaft text-indent:

Buchstabenabstand

Beispiel für die Eigenschaft letter-spacing:

Zeilenhöhe

Beispiel für die Eigenschaft line-height:

Wortabstand

Beispiel für die Eigenschaft word-spacing:

Practice