03586 – 3684921
support@seo-lausitz.de
In diesem Tutorial lernen Sie, wie Sie Text auf Ihren Webseiten mit CSS formatieren können.
CSS bietet mehrere Eigenschaften, mit denen Sie verschiedene Textstile wie Farbe, Ausrichtung, Abstände, Dekoration, Transformation usw. sehr einfach und effektiv definieren können.
Die am häufigsten verwendeten Texteigenschaften sind: text-align, text-decoration, text-transform, text-indent, line-height, letter-spacing, word-spacing und vieles mehr.
Diese Eigenschaften geben Ihnen eine genaue Kontrolle über das visuelle Erscheinungsbild der Zeichen, Wörter, Leerzeichen usw.
Sehen wir uns also einmal genauer an, wie Sie diese Texteigenschaften für ein Element festlegen.
ie Farbe des Textes wird durch die CSS-Eigenschaft color definiert. Die Stilregel im folgenden Beispiel definiert die Standardtextfarbe für die Seite:
body {
color: #434343;
}
Obwohl die Eigenschaft color so aussieht, als wäre sie ein Teil des CSS-Texts, handelt es sich tatsächlich um eine eigenständige Eigenschaft in CSS.
Sehen Sie sich das Tutorial zu CSS-Farbe an, um mehr über die Eigenschaft color zu erfahren.
Die text-align-Eigenschaft wird verwendet, um die horizontale Ausrichtung des Textes festzulegen.
Text kann auf vier Arten ausgerichtet werden: links, rechts, mittig oder im Blocksatz (gerade linker und rechter Rand).
Folgendes Beispiel zeigt den Syntax:
p {
text-align: justify;
}
Hinweis: Wenn auf text-align: justify; gesetzt ist, wird jede Zeile gestreckt, sodass bis auf die letzte Zeile jede Zeile die gleiche Breite hat.
Der linke und der rechte Rand werden gerade dargestell. Diese Ausrichtung wird im Allgemeinen in Publikationen wie Zeitschriften und Zeitungen verwendet.
Dieser Abschnitt verdeutlich die Ausrichtung der Texte in einem Element.
text-align:left;text-align:center;text-align:right;text-align:justify;Die text-decoration-Eigenschaft wird verwendet, um Dekorationen von Text festzulegen bzw diese zu entfernen.
Diese Eigenschaft akzeptiert folgende Werte: underline, overline, line-through, und none.
Vermeiden Sie es aber, Text zu unterstreichen, der kein Link ist, da dies den Besucher verwirren könnte.
Die Syntax sieht folgendermaßen aus:
h1 {
text-decoration: overline;
}
Die text-decoration-Eigenschaft wird häufig verwendet, um die Standardunterstreichung aus den HTML-Hyperlinks zu entfernen.
Sie können auch einige andere visuelle Hinweise bereitstellen, um ihn vom normalen Text abzuheben, z. B. durch die Verwendung einer anderen Farbe anstelle einer durchgehenden Unterstreichung. Beispiel:
a {
text-decoration: none;
color: red;
}
Hinweis: Wenn Sie einen HTML-Link erstellen, unterstreichen die Browser diesen automatisch und wenden eine blaue Farbe an. Dies soll auch ohne Definition durch Stylesheets verdeutlichen, welcher Text anklickbar ist.
Mit der text-transform-Eigenschaft können Sie den Textinhalt eines Elements in Groß- oder Kleinbuchstaben ändern oder den ersten Buchstaben jedes Wortes groß schreiben, ohne den Originaltext zu ändern.
p {text-transform: uppercase;}
Hallo Welt für folgendes Schriftbild: Hallo Welt
Die text-indent-Eigenschaft wird verwendet, um den Einzug der ersten Textzeile innerhalb eines Textblocks festzulegen. Dies geschieht normalerweise durch Einfügen des Leerraums vor der ersten Textzeile. Die Größe des Einzugs kann in Prozent (%), Längenwerten in Pixeln, Ems usw. angegeben werden.
Die Syntax für die Regel lautet:
p {
text-indent: 100px;
}
Hinweis: Ob der Text von links oder von rechts eingerückt wird, hängt von der Textrichtung innerhalb des Elements ab, die durch die CSS-Eigenschaft direction definiert wird.
Die letter-spacing-Eigenschaft wird verwendet, um einen zusätzlichen Abstand zwischen den Textzeichen festzulegen.
Diese Eigenschaft kann einen Längenwert in Pixeln, Ems usw. annehmen. Sie kann auch negative Werte annehmen.
Beim Festlegen des Buchstabenabstands gibt ein Längenwert den Abstand in Addition zum Standardabstand zwischen den Zeichen an.
Beispiel:
h1 {
letter-spacing: -3px;
}
Die word-spacing-Eigenschaft wird verwendet, um zusätzliche Abstände zwischen den Wörtern anzugeben. Diese Eigenschaft kann einen Längenwert in Pixeln, Ems usw. annehmen. Auch hier sind negative Werte zulässig.
p {
word-spacing: 20px;
}
Hinweis: Der Wortabstand kann durch die Textausrichtung beeinflusst werden. So wird bei text-align:justify; die word-spacing-Eigenschaft vernachlässigt und es größere Räume geschaffen.
Die line-height-Eigenschaft wird verwendet, um die Höhe einer Textzeile festzulegen. Auch hier kann der Wert dieser Eigenschaft eine Zahl, ein Prozentsatz (%) oder eine Länge in px, ems usw. sein. Beispiel:
p {
line-height: 1.2;
}
Wenn der Wert eine Zahl ist, wird die Zeilenhöhe berechnet, indem die Schriftgröße des Elements mit der Zahl multipliziert wird. Prozentwerte beziehen sich hingegen auf die Schriftgröße des Elements.
Hinweis: Negative Werte für die line-heightEigenschaft sind nicht zulässig. Dies macht bei logischer Betrachtung auch keinen Sinn.
Wenn der Wert der line-height-Eigenschaft größer als der Wert der font-size ist,
wird diese Differenz gleichmäßig auf die Ober- und Unterseite des umschließenden Elementes verteilt. Schauen wir uns das an einem Beispiel an:
font-size: 14px;
line-height: 60px;
Hier kann man deutlich die Verteilung der Differenz zwischen font-size und line-height auf die Ober- und Unterseite des Elements erkennen.