Hier betrachten wir die Eigenschaften, die Ihnen bei der Gestaltung Ihres Textes helfen können.
- Textfarbe
- Textausrichtung
- Textdekoration
- Texttransformation
- Textschatten
Textfarbe
Die Eigenschaft Farbe (color) wird verwendet, um die Farbe des Textes festzulegen. Um die Farbe anzugeben, können Sie einen Farbnamen (rot), einen HEX-Wert (#ff0000) oder einen RGB-Wert (rgb (255,0,0)) angeben.
Betrachten wir ein Beispiel.
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<p style="color:#ff0000">Das ist ein Absatz in rot.</p>
</body>
</html>Textausrichtung
Die Ausrichtungseigenschaft wird verwendet, um Text innerhalb eines Elements links, rechts, zentriert, usw. auszurichten.
Die Eigenschaft Textausrichtung hat vier Werte:
- Links (text-align: left) - richtet den Text nach links aus
- Recht (text-align: right) - richtet den Text nach rechts aus
- Zentrum (text-align: center) - zentriert den Text
- Justify (text-align: justify) - dehnt die Textzeile aus, um sowohl das linke als auch das rechte Ende auszurichten (wie in Zeitschriften und Zeitungen)
Die Browser richten standardmäßig den Text nach links aus, und wenn es notwendig ist, Text nach rechts auszurichten oder zu zentrieren, sollen Sie den entsprechenden Wert verwenden.
Betrachten wir ein Beispiel.
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<p>Das ist ein Absatz</p>
<p style="text-align:center">Ein Absatz mit dem Wert center.</p>
<p style="text-align:right">Ein Absatz mit dem Wert right.</p>
<p style="text-align:justify">Ein Absatz mit dem Wert justify.</p>
</body>
</html>Textdekoration
Die Eigenschaft Decoration wird verwendet, um Liniendekorationen, die dem Text hinzugefügt werden, anzugeben. Die folgenden Werte gelten für die Eigenschaft Textdekoration.
- Overline (text-decoration:overline) - jede Zeile des Textes hat eine Zeile darüber
- Underline (text-decoration:underline) - jede Zeile des Textes ist unterstrichen
- Line-through (text-decoration:line-through) - jede Zeile des Textes ist überstriechen
- None (text-decoration:none) - es wird keine Text-Dekoration angewendet
Betrachten wir ein Beispiel.
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<a style="text-decoration:none">Das ist ein Link ohne Unterstreichung</a>
<h1 style="text-decoration:overline">Das ist eine Überschrift mit dem Wert overline.</h1>
<p style="text-decoration:line-through">Ein Absatz mit Wert line-through.</p>
<a style="text-decoration:underline">Ein Hyperlink mit dem Wert underline.</a>
</body>
</html>Texttransformation
Die Eigenschaft transform wird zur Steuerung der Textkapitalisierung verwendet. Das bedeutet, dass Sie Ihren Text in Groß- und Kleinschreibung oder in Großbuchstaben (Titel) schreiben können.
Die Eigenschaft transform hat die folgenden Werte:
- Uppercase (text-transform: uppercase) - wandelt alle Zeichen in Großbuchstaben um
- Lowercase (text-transform: lowercase) - konvertiert alle Zeichen in Kleinschreibung
- Capitalize (text-transform: capitalize) - wandelt das erste Zeichen jedes Wortes in Großbuchstaben um
Betrachten wir ein Beispiel.
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<p style="text-transform:uppercase">Ein Absatz mit Großbuchstaben.</p>
<p style="text-transform:lowercase">Ein Absatz mit Kleinbuchstaben.</p>
<p style="text-transform:capitalize">Ein Absatz mit Großbuchstaben.</p>
</body>
</html>Textschatten
Wir verwenden die Eigenschaft text-shadow, wenn wir unserem Text Schatten geben wollen.
Die Eigenschaft shadow wird verwendet, um verschiedene Schatteneffekte auf den Text anzuwenden. Es akzeptiert eine Liste von Werten. Jedes Element in der Liste kann zwei und mehr kommagetrennte Werte haben.
Die Syntax der Eigenschaft text shadow kann so aussehen:
text-shadow: h-shadow v-shadow blur colorHier finden Sie Beispiele für Textschatten.
Übe dein Wissen
