Durch mehrere von CSS bereitgestellte Eigenschaften können sehr einfach und effektiv verschiedene Textstile definiert werden, wie z. B. Farbe, Ausrichtung, Abstand, Dekoration, Transformation usw.
Zu den häufig verwendeten Textattributen gehören: Textausrichtung, Textdekoration, Texttransformation, Texteinzug, Zeilenhöhe, Buchstabenabstand, Wortabstand usw. Mit diesen Eigenschaften können Sie das visuelle Erscheinungsbild von Zeichen, Wörtern, Leerzeichen usw. präzise steuern.
Schauen wir uns genauer an, wie diese Texteigenschaften für Elemente festgelegt werden.
1.Textausrichtung
Das text-align-Attribut wird verwendet, um die horizontale Ausrichtung von Text in einem Element festzulegen. Die optionalen Werte des Attributs sind wie folgt:
Beispiel:
<!DOCTYPEhtml><html><head><style>p{border:1pxsolidblack;/*Um die Ausrichtung des Textes intuitiver wiederzugeben, ist hier ein Rahmensatz für das p-Tag*/}.text1{text- align: left;}.text2{text-align:right;}.text3{text-align:center;}</style></head><body><pclass=text1>Linksbündig</p><pclass= text2>Rechts ausrichten</p><pclass=text3>Mitte ausrichten</p></body></html>Die angezeigten Ergebnisse lauten wie folgt:
2. Textdekoration
Das text-decoration-Attribut wird zum Festlegen oder Löschen von Textdekorationen verwendet. Die häufigste Methode besteht darin, die standardmäßige Unterstreichung des <a>-Tags mit dem text-decoration-Attribut zu entfernen. Natürlich können Sie auch das Attribut text-decoration verwenden, um dem Text im Element an den erforderlichen Stellen etwas Dekoration hinzuzufügen, um einen Hervorhebungseffekt zu erzielen.
Optionale Werte für das text-decoration-Attribut sind wie folgt:
Beispiel:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>text-decoration</title><style>h1.under{text-decoration:underline;}h1.over{text-decoration:overline ;}p.line{text-decoration:line-through;}p.blink{text-decoration:blink;}a.none{text-decoration:none;}p.underover{text-decoration:underlineoverline;}</ style></head><body><h1class=under>Unterstrichen</h1><pclass=line>Durchgestrichen</p><pclass=blink>Blinkeffekt, aber der Browser zeigt ihn nicht an</p><h1class =over>Unterstreichen</h1><p>Dies ist ein <aclass=nonehref=#>Link</a>. Standardmäßig ist der Link unterstrichen. </p><pclass=underover>Überstreichen und unterstreichen</p></body></html>Die angezeigten Ergebnisse lauten wie folgt:
3.Texttransformation
Das Texttransformationsattribut wird verwendet, um die Groß- und Kleinschreibung englischer Buchstaben im Text zu steuern. Mit diesem Attribut können Sie die englischen Buchstaben im Text einheitlich in Kleinbuchstaben, Großbuchstaben oder Großbuchstaben ändern, ohne den Originaltext zu ändern.
4.Texteinzug
Das text-indent-Attribut wird verwendet, um dem Text im Element den Einzugseffekt für die erste Zeile hinzuzufügen. Die optionalen Werte des Attributs sind wie folgt:
5. Zeilenhöhe Zeilenhöhe
Diese Eigenschaft beeinflusst das Layout des Linienfelds. Wenn es auf ein Element auf Blockebene angewendet wird, definiert es den minimalen Abstand zwischen den Grundlinien in diesem Element und nicht den maximalen Abstand.
Der berechnete Unterschied zwischen Zeilenhöhe und Schriftgröße (Zeilenabstand) wird in zwei Hälften geteilt und am oberen und unteren Rand einer Textzeile hinzugefügt. Die kleinste Box, die diesen Inhalt enthalten kann, ist eine Zeilenbox.
Beispiel:
<!DOCTYPEhtml><html><head><style>p.small{line-height:0.8;}p.big{line-height:200%;}</style></head><body><p> Dies ist die standardmäßige Standardzeilenhöhe<br>Dies ist die standardmäßige Standardzeilenhöhe<br>Dies ist die standardmäßige Standardzeilenhöhe<br></p><pclass=small>Verwenden Sie Zahlen, um eine kleinere Zeilenhöhe zu definieren<br> >Verwenden Sie Zahlen, um eine kleinere Zeilenhöhe zu definieren.<br>Verwenden Sie Zahlen, um eine kleinere Zeilenhöhe zu definieren.<br></p><pclass=big>Verwenden Sie Prozentsätze, um eine größere Zeilenhöhe zu definieren.<br>Verwenden Sie Prozentsätze. Verwenden Sie das Formular zum Definieren eine größere Zeilenhöhe<br>Verwenden Sie die Prozentform, um eine größere Zeilenhöhe zu definieren<br></p></body></html>Die angezeigten Ergebnisse lauten wie folgt:
6.Buchstabenabstand
Der Abstand zwischen Text kann negativ sein. Der Standardwert ist normal. Alle Browser unterstützen das Attribut „Buchstabenabstand“.
Beispiel:
<!DOCTYPEhtml><html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gbk2312/><title>letter-spacing-Attribut von CSS</title><style>*{margin:0; padding:0;}body{width:1000px;margin:200pxauto;}p{font-size:18px;}.p01{letter-spacing:2px;}.p02{letter-spacing:10px}</style></ head><body><pclass=p01>CSS-Textabstand-Testtext! </p><pclass=p02>CSS-Textabstand-Testtext! </p></body></html>Die angezeigten Ergebnisse lauten wie folgt:
7.Wortabstand
Das Wortabstandsattribut wird verwendet, um den Abstand zwischen Wörtern festzulegen, ist jedoch für Chinesisch ungültig. Die optionalen Werte des Attributs sind wie folgt:
8. Textschatten Textschatten
Textschatten fügt dem Text einen Schatten hinzu. Sie können Text und Dekoration mehrere Schatten hinzufügen. Die Schattenwerte werden durch Kommas getrennt. Jeder Schattenwert besteht aus dem Versatz des Elements in X- und Y-Richtung, dem Unschärferadius und dem Farbwert.
9.vertikal ausrichten
Das Vertical-Align-Attribut legt die vertikale Ausrichtung eines Elements fest.
Das Vertical-Align-Attribut in CSS kann nur für Inline-Elemente und verschobene Elemente (z. B. Bilder und Formulareingabefelder) verwendet werden. Dieses Attribut wird nicht vererbt.
Schauen wir uns zunächst ein Bild an: Die obere Zeile, die mittlere Zeile und die Grundlinie des Textes.
Konzepte wie Grundlinie, Endergebnis, Oberlinie und Mittellinie werden erwähnt.
(1) Obere Zeile: der obere Rand chinesischer Schriftzeichen;
(2) Mittellinie: die Linie, die durch die Mitte des englischen Kleinbuchstabens x verläuft;
(3) Grundlinie: der untere Rand des Kleinbuchstabens x;
(4) Fazit: der untere Rand chinesischer Schriftzeichen;
(5) Inhaltsbereich: Bezieht sich auf den Bereich, der von der unteren und der oberen Zeile umschlossen ist.
(6) Zeilenhöhe: Sie umfasst den Inhaltsbereich und den leeren Bereich, der basierend auf dem Inhaltsbereich symmetrisch erweitert wird. Wir nennen ihn Zeilenhöhe, die auch als Abstand zwischen den Grundlinien benachbarter Textzeilen betrachtet werden kann.
(7) Zeilenabstand: Bezieht sich auf den Abstand zwischen benachbarten Textzeilen zwischen der unteren Zeile der vorherigen Textzeile und der oberen Zeile der nächsten Textzeile.
(8) Inline-Box: Es handelt sich um ein Konzept im Browser-Rendering-Modell und kann nicht angezeigt werden, aber es existiert und seine Höhe entspricht der Zeilenhöhe;
(9) Linienfeld: Ein ähnliches Konzept wie das innere Feld derselben Linie. Das Linienfeld bezieht sich auf ein virtuelles rechteckiges Feld dieser Linie und ist auch ein Konzept im Browser-Rendering-Modus. Die Höhe der Zeilenbox entspricht dem größten Wert der Inline-Box unter allen Elementen in dieser Zeile (die Inline-Box mit dem größten Zeilenhöhenwert wird als Benchmark verwendet, und andere Inline-Boxen werden anhand ihrer eigenen an der Benchmark ausgerichtet Ausrichtungsmethoden und schließlich wird die Höhe des Linienkastens berechnet).
10.white-space behandelt Leerzeichen
Die folgende Tabelle fasst das Verhalten des Leerraumattributs zusammen:
11.Richtung Textrichtung