Articles
Einführung in CSS
Textbezogene CSS-Eigenschaften

Textbezogene CSS-Eigenschaften

Dieser Artikel erklärt textbezogene CSS-Eigenschaften.

Sie können die Verwendung und die Syntax der Eigenschaften text-align, text-decoration und text-transform lernen.

YouTube Video

Erstellen von HTML für die Vorschau

css-text.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>Text-Related CSS Properties</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-text.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>Text-Related CSS Properties</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Typography (Text-Related)</h2>
20        </header>
21        <article>
22            <h3>text-align</h3>
23            <section>
24                <header><h4>text-align: left</h4></header>
25                <section class="sample-view">
26                    <p class="text-align-left">This is left-aligned text.</p>
27                </section>
28                <header><h4>text-align: center</h4></header>
29                <section class="sample-view">
30                    <p class="text-align-center">This is center-aligned text.</p>
31                </section>
32                <header><h4>text-align: right</h4></header>
33                <section class="sample-view">
34                    <p class="text-align-right">This is right-aligned text.</p>
35                </section>
36                <header><h4>text-align: justify</h4></header>
37                <section class="sample-view">
38                    <p class="text-align-justify">This is justified text, meaning it will be spaced so that the left and right edges are aligned evenly.</p>
39                </section>
40            </section>
41        </article>
42        <article>
43            <h3>text-decoration</h3>
44            <section>
45                <header><h4>text-decoration: underline</h4></header>
46                <section class="sample-view">
47                    <p class="text-decoration-underline">This text has an underline.</p>
48                </section>
49                <header><h4>text-decoration: overline</h4></header>
50                <section class="sample-view">
51                    <p class="text-decoration-overline">This text has an overline.</p>
52                </section>
53                <header><h4>text-decoration: line-through</h4></header>
54                <section class="sample-view">
55                    <p class="text-decoration-line-through">This text has a line-through.</p>
56                </section>
57                <header><h4>text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; text-decoration-thickness: 2px;</h4></header>
58                <section class="sample-view">
59                    <p class="text-decoration-custom-underline">This text has a custom underline (color and style).</p>
60                </section>
61            </section>
62        </article>
63        <article>
64            <h3>text-transform</h3>
65            <section>
66                <header><h4>text-transform: none</h4></header>
67                <section class="sample-view">
68                    <p class="text-transform-none">This is no transformation applied.</p>
69                </section>
70                <header><h4>text-transform: capitalize</h4></header>
71                <section class="sample-view">
72                    <p class="text-transform-capitalize">this is a sentence in lowercase but will be capitalized.</p>
73                </section>
74                <header><h4>text-transform: uppercase</h4></header>
75                <section class="sample-view">
76                    <p class="text-transform-uppercase">This text will be transformed to uppercase.</p>
77                </section>
78                <header><h4>text-transform: lowercase</h4></header>
79                <section class="sample-view">
80                    <p class="text-transform-lowercase">THIS TEXT WILL BE TRANSFORMED TO LOWERCASE.</p>
81                </section>
82            </section>
83        </article>
84    </main>
85</body>
86</html>

Typografie (Textbezogen)

text-align Eigenschaft 

 1/* Text align examples */
 2.text-align-left {
 3    text-align: left; /* Align text to the left */
 4}
 5
 6.text-align-center {
 7    text-align: center; /* Center align text */
 8}
 9
10.text-align-right {
11    text-align: right; /* Align text to the right */
12}
13
14.text-align-justify {
15    text-align: justify; /* Justify text (aligns text to both left and right edges) */
16}

text-align ist eine CSS-Eigenschaft, die verwendet wird, um die horizontale Ausrichtung von Text und Inline-Elementen festzulegen. Es wird typischerweise verwendet, um Absatz- oder Überschriftentext nach links, rechts oder in der Mitte auszurichten. Es spielt eine wichtige Rolle beim Layout von Webseiten und bei der Textformatierung.

Hauptwerte für text-align

left (linksbündig) 
1p {
2    text-align: left;
3}
  • left richtet den Text nach links aus (dies ist die Standardeinstellung für viele Sprachen).
right (rechtsbündig) 
1p {
2    text-align: right;
3}
  • right richtet den Text nach rechts aus. Es ist besonders effektiv für Sprachen, die von rechts nach links geschrieben werden, wie Arabisch und Hebräisch.
center (zentriert) 
1p {
2    text-align: center;
3}
  • center richtet den Text in der Mitte aus. Es wird häufig für Titel und Überschriften verwendet.
justify (Blocksatz) 
1p {
2    text-align: justify;
3}
  • justify richtet die linke und rechte Kante von Zeilen gleichmäßig aus und erzeugt einen sauber ausgerichteten Eindruck. Es wird in Layouts wie Zeitungen und Magazinen verwendet.
start (anfangsbündig) 
1p {
2    text-align: start;
3}
  • start richtet den Text basierend auf der Ausgangsposition aus. Für Sprachen, die von links nach rechts geschrieben werden, verhält es sich wie die linke Ausrichtung.
end (endbündig) 
1p {
2    text-align: end;
3}
  • end richtet den Text basierend auf der Endposition aus. In Sprachen, die von links nach rechts geschrieben werden, verhält es sich wie die rechte Ausrichtung.

text-align Verwendung und Beispiele

Titel mit zentrierter Ausrichtung
  • Zentrierte Ausrichtung wird oft für Titel von Webseiten und Dokumenten verwendet. Es sieht gut aus und ergibt ein visuell ausgewogenes Design.
Linke oder rechte Ausrichtung für Absätze
  • Textabsätze sind standardmäßig normalerweise linksbündig, aber rechtsbündige oder zentrierte Ausrichtung kann für spezielle Designs verwendet werden.
Text gleichmäßig ausrichten
  • Wenn justify verwendet wird, wird jede Zeile eines Textes gleichmäßig mit der linken und rechten Seite ausgerichtet. Es ist nützlich für Layouts im Stil von Zeitungen oder Magazinen.

Zusammenfassung

  • text-align ist eine CSS-Eigenschaft, die verwendet wird, um Text oder Inline-Elemente horizontal auszurichten.
  • Es kann verschiedene Layouts wie linke, rechte, zentrierte Ausrichtung oder Blocksatz verarbeiten.
  • Die Wahl der passenden Ausrichtung basierend auf dem Layout und den Designzielen ist entscheidend, um ein lesbares und schönes Design zu erreichen.

Lassen Sie uns die Textausrichtung mit text-align effektiv als Teil Ihres Designs nutzen.

Die Eigenschaft text-decoration 

 1/* Text decoration examples */
 2.text-decoration-underline {
 3    text-decoration: underline;
 4}
 5
 6.text-decoration-overline {
 7    text-decoration: overline;
 8}
 9
10.text-decoration-line-through {
11    text-decoration: line-through;
12}
13
14.text-decoration-custom-underline {
15    text-decoration: underline;
16    text-decoration-color: red;
17    text-decoration-style: wavy;
18    text-decoration-thickness: 2px;
19}

text-decoration ist eine CSS-Eigenschaft, die verwendet wird, um Unterstriche, Überstriche, Durchstreichungen oder benutzerdefinierte stilisierte Linien auf den Text anzuwenden. Mit dieser Eigenschaft können Sie die Textgestaltung dekorativer oder visuell hervorgehobener gestalten.

Erklärung:

  • Die Klasse text-decoration-underline zeigt einen Unterstrich unter dem Text an.
  • Die Klasse text-decoration-overline zieht eine Linie über den Text.
  • Die Klasse text-decoration-line-through wendet eine Durchstreichung auf den Text an.
  • Die Klasse text-decoration-custom-underline ist ein Beispiel für die Anpassung von Unterstrichfarbe, -stil und -dicke.

Wichtige Werte von text-decoration

none 
1p {
2    text-decoration: none;
3}
  • Die Angabe von none entfernt alle Dekorationen aus dem Text. Wird verwendet, wenn Sie beispielsweise den Unterstrich von Links entfernen möchten.
underline 
1p {
2    text-decoration: underline;
3}
  • Die Angabe von underline zieht einen Unterstrich unter dem Text. Es kann für Links oder Abschnitte verwendet werden, die Sie hervorheben möchten.
overline 
1p {
2    text-decoration: overline;
3}
  • Die Angabe von overline zieht eine Linie über den Text. Wird verwendet, um das Aussehen zu ändern oder für besondere Dekorationen.
line-through 
1p {
2    text-decoration: line-through;
3}
  • Die Angabe von line-through zieht eine Durchstreichung über den Text. Es wird verwendet, um Korrekturen anzuzeigen.
blink（点滅）
  • blink ist ein Wert, der den Text blinken lässt, aber er wird nicht tatsächlich verwendet, da die meisten Browser ihn nicht mehr unterstützen.

Erweiterte Einstellungen von text-decoration

text-decoration ermöglicht detaillierte Einstellungen wie folgt:

text-decoration-color 
1p {
2    text-decoration: underline;
3    text-decoration-color: red;
4}
  • Die Eigenschaft text-decoration-color ermöglicht es, die Farbe von Unterstrichen oder Durchstreichungen anzugeben. Standardmäßig entspricht sie der Textfarbe, aber Sie können ein visuelles Highlight hinzufügen, indem Sie eine andere Farbe wählen.
text-decoration-style 
 1p.dshed {
 2    text-decoration: underline;
 3    text-decoration-style: solid;
 4}
 5p.double {
 6    text-decoration: underline;
 7    text-decoration-style: double;
 8}
 9p.dotted {
10    text-decoration: underline;
11    text-decoration-style: dotted;
12}
13p.dashed {
14    text-decoration: underline;
15    text-decoration-style: dashed;
16}
17p.wavy {
18    text-decoration: underline;
19    text-decoration-style: wavy;
20}
  • Die Eigenschaft text-decoration-style ermöglicht es, den Stil dekorativer Linien anzugeben. Die Werte umfassen Folgendes:.
    • solid (Standard, durchgezogene Linie)
    • double (doppelte Linie)
    • gepunktet (gepunktete Linie)
    • gestrichelt (gestrichelte Linie)
    • wellig (wellige Linie)
**text-decoration-thickness 
1p {
2    text-decoration: underline;
3    text-decoration-thickness: 2px;
4}
  • Die Eigenschaft text-decoration-thickness ermöglicht es, die Dicke dekorativer Linien anzugeben. Sie können sie beispielsweise mit Einheiten wie 2px oder 0.1em anpassen.

Zusammenfassung:

  • text-decoration ist eine Eigenschaft zum Hinzufügen dekorativer Linien wie Unterstrichen oder Durchstreichungen zum Text.
  • Mit text-decoration-color, text-decoration-style und text-decoration-thickness ist eine detailliertere Anpassung möglich.
  • Es wird häufig verwendet, um Links oder wichtigen Text hervorzuheben oder als Designelement.

Mit text-decoration können Sie subtile Akzente oder Hervorhebungen im Text hinzufügen.

text-transform Eigenschaft 

 1/* Text transform examples */
 2.text-transform-none {
 3    text-transform: none;
 4}
 5
 6.text-transform-capitalize {
 7    text-transform: capitalize;
 8}
 9
10.text-transform-uppercase {
11    text-transform: uppercase;
12}
13
14.text-transform-lowercase {
15    text-transform: lowercase;
16}

text-transform ist eine CSS-Eigenschaft zum Transformieren der Groß- und Kleinschreibung von Text. Diese Eigenschaft ermöglicht es Ihnen, das Anzeigeformat von im HTML angegebenem Text zu steuern, indem die Groß- und Kleinschreibung von eingegebenem oder vorhandenem Text automatisch verändert wird.

Erklärung:

  • Die Klasse text-transform-none zeigt Text an, ohne ihn gegenüber dem Original zu ändern.
  • Die Klasse text-transform-capitalize konvertiert den ersten Buchstaben jedes Wortes in Großbuchstaben.
  • Die Klasse text-transform-uppercase konvertiert den gesamten Text in Großbuchstaben.
  • Die Klasse text-transform-lowercase konvertiert den gesamten Text in Kleinbuchstaben.

Hauptwerte von text-transform

none 
1p {
2    text-transform: none;
3}
  • Die Angabe von none lässt den Text unverändert.
capitalize 
1/* "this is a sentence" -> "This Is A Sentence" */
2p {
3    text-transform: capitalize;
4}
  • Die Angabe von capitalize konvertiert den ersten Buchstaben jedes Wortes in Großbuchstaben. Wortgrenzen werden durch Leerzeichen oder Satzzeichen erkannt.
uppercase 
1/* "hello world" -> "HELLO WORLD" */
2p {
3    text-transform: uppercase;
4}
  • Die Angabe von uppercase konvertiert den gesamten Text in Großbuchstaben.
lowercase 
1/* "HELLO WORLD" -> "hello world" */
2p {
3    text-transform: lowercase;
4}
  • Die Angabe von lowercase konvertiert den gesamten Text in Kleinbuchstaben.
full-width
  • Die Angabe von full-width konvertiert den Text in Zeichen mit voller Breite. Dies wird typischerweise als spezieller Stil beim Arbeiten mit Kanji oder Kana verwendet, wird jedoch von wenigen Browsern unterstützt.

Zusammenfassung:

  • text-transform ist eine praktische CSS-Eigenschaft, um die Groß- und Kleinschreibung von Text zu ändern.
  • Es wird oft verwendet, um eine visuelle Konsistenz für Überschriften, Navigationsmenüs und Formulartexte zu schaffen.
  • Es ist nützlich, wenn Sie Text in einem bestimmten Stil anzeigen möchten, unabhängig von der Benutzereingabe.

Durch die Verwendung dieser Eigenschaft können Sie Text einfach manipulieren und gleichzeitig eine visuelle Konsistenz beibehalten.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

Schriftbezogene CSS-EigenschaftenCSS-Eigenschaften im Zusammenhang mit Textabstand