CSS ermöglicht die flexible Anpassung des Textes, der in der HMTL-Sprache dargestellt wird. Heute werden wir uns den Effekt der Eigenschaft "Texttransformation" ansehen, die es ermöglicht, die Groß- und Kleinschreibung einer Schriftart zu ändern. Diese Option wird von allen modernen Browsern unterstützt und ist in der Spezifikation aller CSS-Versionen enthalten.

Geplanter Termin

Die Eigenschaft "Texttransformation" kann drei Hauptwerte und zwei zusätzliche Werte annehmen. Beispielsweise können Sie dem gesamten ausgewählten Text einen Großbuchstaben zuweisen. Oder Sie können dem Gegenteil der vorherigen Eigenschaft einen Befehl geben, bei dem alle Zeichen in Kleinbuchstaben geschrieben werden. Sie können einen Termin mit einer für Sie geeigneten Methode vereinbaren. Zum Beispiel mit Inline-Stilen. Oder Sie können erstellen

Eine separate Datei mit einer Beschreibung aller Eigenschaften. Welche Art der Zuordnung zu verwenden ist, liegt bei Ihnen. "Texttransformation" kann folgende Werte annehmen:

• Großbuchstaben. Großschreibt alle ausgewählten Zeichen. In CSS werden häufig Großbuchstaben verwendet, da dieser Wert zur Lösung vieler komplexer textbezogener Probleme beitragen kann.
• Kleinbuchstaben. Diese Eigenschaft ist dem Großbuchstaben völlig entgegengesetzt.
• Profitieren. Ändert den Fall des ersten Buchstabens in Großbuchstaben. Der Rest der Zeichen wird nicht geändert.
• Keiner. Ermöglicht das Abbrechen aller zugewiesenen Werte (erforderlich zum Vordefinieren einer Eigenschaft). Normalerweise ist dieser Wert standardmäßig festgelegt.
• Erben. Erbt alle Eigenschaften vom übergeordneten Element. Es ist zu beachten, dass der IE diese Eigenschaft nicht unterstützt.

Anwendung

Bei CSS werden Großbuchstaben (oder ähnliche Effekte) mit einem einfachen Befehl festgelegt. Daher muss der gesamte Text nicht geändert oder neu geschrieben werden. Wenn es sich um eine einseitige Site handelt, ist diese Eigenschaft möglicherweise nicht hilfreich. Wenn Sie jedoch ein riesiges Portal unter Ihrer Kontrolle haben, in dem Sie den Fall von Buchstaben in bestimmten Fragmenten korrigieren müssen, wird die "Texttransformation" zum einzig wirksamen Werkzeug. Beispielsweise müssen Sie die Schriftart in den Überschriften-Tags "h2" korrigieren. Fügen Sie dazu den Eintrag "h2 (Texttransformation: Großbuchstaben;)" hinzu, und dann werden alle Überschriften der zweiten Ebene in Großbuchstaben geschrieben.

Eigenschaften:

Einige denken möglicherweise, dass das manuelle Bearbeiten des Texts und das Ändern der Schriftart mithilfe der Eigenschaft "Texttransformation" keinen Unterschied macht. Aber das ist nicht so. Wenn Sie es manuell in Großbuchstaben ändern, bleiben die Zeichen beim Kopieren dieser Informationen von Ihrer Site unverändert. Wenn Sie CSS verwenden, sind die Dinge anders. Die Eigenschaft "Texttransformation" ändert die Schriftart nur für Benutzer visuell. In Wirklichkeit bleiben die Symbole jedoch unverändert. Dies geschieht mit allen Werten für diese Eigenschaft. Die kopierten Informationen (Text) haben den Originalfall, der im Quellcode der Seite verwendet wird. Dies ist der einzige Unterschied zwischen der manuellen Verarbeitung und der Verwendung von CSS-Befehlen.

Es spielt keine Rolle, welche Sie verwenden möchten - Klein- oder Großbuchstaben, die Hauptsache ist, den Zweck nicht zu vergessen. Wenn Sie beispielsweise Änderungen nur zu Dekorationszwecken benötigen, können Sie die Eigenschaft "Texttransformation" sicher verwenden. Wenn Sie wissen, dass Ihre Benutzer wahrscheinlich die von Ihnen veröffentlichten Informationen kopieren, ist es am besten, die Groß- und Kleinschreibung des gesamten Textes manuell zu ändern. In der Tat bemerken Leser manchmal eine solche Änderung der Schriftart nicht. Dies ist besonders wichtig, wenn es um wichtige Dokumente und ähnliche Informationen geht.

Seit einigen Lektionen arbeiten wir intensiv an der Formatierung von Text mithilfe von CSS. Dieses Mal lernen wir, wie Sie den Fall von Text ändern können. In dieser Hinsicht eröffnen uns kaskadierende Stylesheets sehr große Möglichkeiten, genauer gesagt:

• Zeigen Sie den gesamten Text in Großbuchstaben an.
• Wählen Sie den gesamten Text in Kleinbuchstaben aus.
• Lassen Sie den ersten Buchstaben jedes Wortes mit Großbuchstaben beginnen.

"Das ist natürlich alles gut, aber wann brauchst du es vielleicht?" - du fragst. Stellen Sie sich eine Situation vor, in der Sie alle Menüelemente in Großbuchstaben anzeigen möchten. Dazu müssen Sie sie nicht eingeben, einschließlich der Feststelltaste, oder während Sie die Umschalttaste gedrückt halten. Es reicht aus, alle Listenelemente so einzustellen, dass sie in Großbuchstaben angezeigt werden, indem eine entsprechende Regel in der CSS-Datei erstellt wird. Und dies ist nur eine von vielen möglichen Situationen.

Die Texttransformationseigenschaft

Wir werden den Fall des Textes mithilfe der Eigenschaft text-transform steuern. Es hat 4 Hauptwerte - Großbuchstaben (Großbuchstaben), Kleinbuchstaben (Kleinbuchstaben), Großbuchstaben (Großbuchstaben für jeden ersten Buchstaben des Wortes, der Rest der Werte ändert sich nicht), keine (keine Formatierung wird angewendet). Auf den ersten Blick mag Ihnen das alles sehr kompliziert erscheinen.

In der Praxis ist jedoch alles recht einfach, wie Sie jetzt sehen werden. Der Schlüssel ist die Auswahl des richtigen Selektors, da die Werte der Texttransformationseigenschaft vererbt werden.

Hervorheben in Großbuchstaben

Als erstes schlage ich vor, den gesamten Text groß zu schreiben, für den wir die folgende CSS-Regel erstellen:

Body (Texttransformation: Großbuchstaben;)

Im Prinzip nichts Kompliziertes, wir haben nur den Großbuchstaben verwendet. Wie sie sagen, ist alles intuitiv. So sieht es im wirklichen Leben aus:

Kleinbuchstaben - gelten für alle

Im nächsten Schritt wenden wir überall Kleinbuchstaben an, für die wir Folgendes schreiben:

Body (Texttransformation: Kleinbuchstaben;)

Wie Sie vielleicht erraten haben, sind die beiden Bedeutungen, die wir gerade kennengelernt haben, etwas Antonyme. In der folgenden Abbildung sehen Sie das Ergebnis der neu erstellten Eigenschaft.

Schreiben Sie den ersten Buchstaben jedes Wortes in Großbuchstaben

Dazu müssen wir nur den entsprechenden Wert verwenden:

Körper (Texttransformation: Großschreibung;)

Ich weiß nicht, wie oft Sie eine solche CSS-Regel verwenden werden, aber es schadet Ihnen nicht, über eine solche Möglichkeit Bescheid zu wissen, insbesondere wenn Sie nicht triviale Probleme lösen. Das Ergebnis ist im Bild unten zu sehen.

Lassen Sie uns zum Schluss einen kurzen Blick auf den letzten Wert werfen, keinen. Wie gesagt, es kann verwendet werden, um die Vererbung von einem Elternteil umzukehren. Stellen wir uns zum Beispiel vor, wir haben alle vorherigen Regeln und für Absätze sollten wir sie stornieren. Dazu schreiben wir Folgendes:

P (Texttransformation: keine;)

Ich wage anzunehmen, dass Sie alles verstehen, wenn nicht - stellen Sie Ihre Fragen in den Kommentaren. Und das ist alles für mich. Ich hoffe, dieses CSS-Tutorial hat Ihnen geholfen. Wenn ja:

• Veröffentlichen Sie diesen Artikel erneut in sozialen Netzwerken, damit mehr Menschen davon profitieren können.
• Abonnieren Sie meine Mailingliste, um nützliche und interessante Blog-Beiträge nicht zu verpassen.

Darauf verabschiede ich mich nicht von dir. Vielen Dank für Ihre Aufmerksamkeit und wir sehen uns in den folgenden Publikationen!

Guten Tag. Manchmal müssen Sie beim Erstellen von Webseiten einige Wörter mithilfe von CSS in Großbuchstaben oder hochgestellt setzen. Mal sehen, wie das gemacht wird.

Groß- und Kleinschreibung mit CSS

Im Allgemeinen können Sie heute den gewünschten Text in Tags einschließen _{^{und erhalten Sie die gewünschte Anzeige, aber lassen Sie uns auch sehen, wie dies mit CSS gemacht werden kann, da die Technik etwas anders ist.}}

Beispielsweise müssen Sie die Formel H 2 O in ein HTML-Dokument schreiben. Dies geschieht folgendermaßen:

• Die Formel selbst ist geschrieben
• Die Wörter und Zahlen, die hochgestellt oder tiefgestellt angezeigt werden müssen, sind in einem Span-Tag enthalten, dem eine Klasse zugewiesen werden muss. Beispielsweise: zeichen, die ausgegeben werden sollen
• In CSS müssen Sie dieses Element festlegen:

  Top-Index (
  Vertikal ausrichten: super;
  }

Diese Eigenschaft ist für die vertikale Ausrichtung des Textes verantwortlich. Sein Superwert gibt an, dass der Text hochgestellt angezeigt wird. Die Schriftgröße blieb jedoch dieselbe wie bei normalem Text. Damit die Dinge schöner aussehen, müssen Sie die Schriftgröße mithilfe der Eigenschaft Schriftgröße etwas kleiner einstellen.

So funktioniert die Eigenschaft einfach. Dementsprechend müssen Sie zur Anzeige im Index wie folgt schreiben:

Top-Index (
Vertikal ausrichten: sub;
}

Der Unterschied zu ähnlichen HTML-Tags besteht darin, dass diese Regeln die Schriftgröße nicht ändern. Wenn Sie dies tun müssen, müssen Sie die neue Größe im Stylesheet registrieren.

Das ist alles, was Sie über hochgestellte und tiefgestellte Zeichen in CSS wissen müssen. Die Immobilie bietet keine zusätzlichen Möglichkeiten und sie werden auch nicht benötigt. Wenn Sie möchten, können Sie diesen Text irgendwie anpassen, dies ist jedoch selten erforderlich.

Wo kann es nützlich sein

Hochgestellter und tiefgestellter Text können verwendet werden, wenn Formeln geschrieben und Artikeln Notizen und Markierungen hinzugefügt werden. Beispielsweise bietet Wikipedia Quellen und Notizen für jeden Artikel. Im Verlauf des Artikels werden sie in Form von kleinen hochgestellten Zeichen platziert. Dies stört die Leser nicht und ermöglicht es Ihnen gleichzeitig, den Artikeln das gewünschte Aussehen zu verleihen.

Die Eigenschaft ist vollständig browserübergreifend und wird in allen CSS-Versionen unterstützt.

HTML-Tags _{und ^{- Tiefgestellter und hochgestellter Text}}

Definition und Verwendung

Etikett _{definiert tiefgestellten Text. Der Index ist halb so hoch und wird unterhalb der Grundlinie angezeigt. Der Index kann beim Schreiben chemischer Formeln wie H 2 O verwendet werden.}

Etikett ^{definiert hochgestellten Text. Hochgestellter Text ist halb so hoch und wird über der Grundlinie angezeigt. Hochgestellter Text kann beim Schreiben von Fußnoten wie WWW verwendet werden.}

Browser-Unterstützung

Stichworte _{und ^{wird von allen gängigen Browsern unterstützt.}}

Unterschiede zwischen HTML und XHTML

Standardattribute

Säule DTD Gibt an, in welchem \u200b\u200bDokumenttyp HTML 4.01 / XHTML 1.0 DTD das Attribut zulässig ist. S \u003d streng, T \u003d vorübergehend und F \u003d Frameset.

Stichworte _{und ^{unterstützen die folgenden Standardattribute:}}

Weitere Informationen zu Standardattributen.

Ereignisattribute

Stichworte _{und ^{unterstützen die folgenden Ereignisattribute:}}

Zusätzliche Informationen zu