Wir machen Großbuchstaben in CSS. HTML ist - wie man Text in HTML in Großbuchstaben, CSS und Hochstellung umwandelt

CSS ermöglicht eine flexible Anpassung von Text, der in der HTML-Sprache dargestellt wird. Heute schauen wir uns die Wirkung der Eigenschaft „text-transform“ an, die es ermöglicht, die Groß-/Kleinschreibung der Schriftart zu ändern. Diese Option wird von allen modernen Browsern unterstützt und ist in der Spezifikation aller CSS-Versionen enthalten.

Zweck

Die Eigenschaft „text-transform“ kann drei Hauptwerte und zwei zusätzliche Werte annehmen. Sie können beispielsweise zuweisen Großbuchstaben auf den gesamten ausgewählten Text. Oder Sie können dem Befehl das Gegenteil der vorherigen Eigenschaft geben, bei der alle Zeichen in Kleinbuchstaben umgewandelt werden. Sie können einen Termin auf jede für Sie geeignete Weise vereinbaren. Verwenden Sie beispielsweise Inline-Stile. Oder Sie können erstellen

Eine separate Datei mit einer Beschreibung aller Eigenschaften. Welche Zuweisungsmethode Sie verwenden, bleibt Ihnen überlassen. „Text-transform“ kann folgende Werte annehmen:

• Großbuchstaben. Schreibt alle ausgewählten Zeichen groß. Großbuchstaben sind in CSS ein häufiger Wert, da sie dabei helfen, viele komplexe textbezogene Probleme zu lösen.
• Kleinbuchstaben. Diese Eigenschaft ist das völlige Gegenteil des Großbuchstabenbefehls.
• Profitieren. Ändert die Groß- und Kleinschreibung des ersten Buchstabens in einen Großbuchstaben. Die übrigen Zeichen ändern sich nicht.
• Keiner. Ermöglicht das Rückgängigmachen aller zugewiesenen Werte (erforderlich zur Vordefinition einer Eigenschaft). Normalerweise ist dieser Wert standardmäßig festgelegt.
• Erben. Erbt alle Eigenschaften von übergeordnetes Element. Es ist zu beachten, dass der IE diese Eigenschaft nicht unterstützt.

Anwendung

MIT mit CSS Großbuchstaben (oder ähnliche Effekte) werden mit einem einfachen Befehl eingestellt. Daher besteht keine Notwendigkeit, den gesamten Text zu ändern oder neu zu schreiben. Wenn es sich um eine einseitige Site handelt, ist diese Eigenschaft möglicherweise nicht nützlich. Wenn Sie jedoch ein riesiges Portal steuern, in dem Sie die Groß- und Kleinschreibung von Buchstaben in bestimmten Fragmenten korrigieren müssen, ist die „Texttransformation“ das einzig wirksame Werkzeug. Beispielsweise müssen Sie die Schriftart in den „h2“-Überschriften-Tags korrigieren. Dazu müssen Sie den Eintrag hinzufügen: „h2 ( text-transform: Uppercase; )“, und dann werden alle Überschriften der zweiten Ebene in Großbuchstaben geschrieben.

Besonderheiten

Manche denken vielleicht, dass die manuelle Textverarbeitung und die Änderung der Schriftart mithilfe der Eigenschaft „text-transform“ keinen Unterschied macht. Aber das ist nicht so. Wenn Sie manuell auf Großbuchstaben (Großbuchstaben) umstellen, bleiben die Zeichen beim Kopieren dieser Informationen von Ihrer Website unverändert. Wenn Sie die CSS-Sprache verwenden, läuft alles anders ab. Die Eigenschaft „text-transform“ ändert die Schriftart nur optisch für Benutzer. Aber in Wirklichkeit bleiben die Symbole unverändert. Dies geschieht mit allen Werten dieser Eigenschaft. Für die kopierten Informationen (Text) wird die ursprüngliche Groß-/Kleinschreibung verwendet Quellcode Seiten. Dies ist der einzige Unterschied zwischen der manuellen Verarbeitung und der Verwendung von CSS-Befehlen.

Es spielt keine Rolle, welche Sie verwenden möchten – Groß- oder Kleinschreibung, die Hauptsache ist, den Zweck nicht zu vergessen. Wenn Sie Änderungen beispielsweise nur zu dekorativen Zwecken benötigen, können Sie bedenkenlos die Eigenschaft „text-transform“ verwenden. Wenn Sie wissen, dass Ihre Benutzer die von Ihnen geposteten Informationen wahrscheinlich kopieren werden, ist es am besten, die Groß-/Kleinschreibung des gesamten Textes manuell zu ändern. Schließlich bemerken Leser manchmal eine solche Schriftartersetzung nicht. Dies ist besonders wichtig, wenn es um wichtige Dokumente und ähnliche Informationen geht.

In der letzten Videolektion haben wir gelernt, wie man Informationen löscht und neue hinzufügt neue Version HTML-Dokument, während Sie dies melden Suchmaschinen und optisch hervorzuheben, damit Besucher die Änderungen auch sehen können. Hierfür haben wir die Tags del und ins verwendet.

In diesem Video-Tutorial setzen wir das Thema Textformatierung in einem HTML-Dokument fort. Wir werden uns zwei HTML-Tags ansehen, die den hochgestellten und tiefgestellten Text angeben.

Ein HTML-Tag dient dazu, den hochgestellten Text in HTML anzuzeigen. In einigen Website-Themen ist dieses Tag einfach unersetzlich. Zum Beispiel, wenn Sie eine Website haben oder planen, die sich auf mathematische oder chemische Formeln bezieht. Oder wenn Sie eine Website zum Thema Bau haben, ist das Tag sehr nützlich und hilft beim Formatieren von Artikeln, beim Schreiben von Formeln oder anderen Mengenangaben, zum Beispiel Quadratmetern in Bauthemen.

Wenn Ihre Website jedoch keinen Bezug zu den aufgeführten Themen hat, bedeutet dies nicht, dass das Tag nicht nützlich ist. Es reicht aus, Fantasie und Einfallsreichtum zu zeigen und eine Verwendung für dieses Element zu finden.

Das HTML-Tag ist das Gegenteil des Tags und für die Angabe des Index des Textes verantwortlich. Tiefgestellter Text kann beim Schreiben von Formeln oder mathematischen Gleichungen verwendet werden. Aber darüber hinaus finden Sie vielleicht noch andere Verwendungsmöglichkeiten für das Tag.

Die nächste Videolektion ist zwei weiteren Tags gewidmet, die in manchen Situationen einfach unersetzlich sein können. Darüber hinaus sind sie nicht nur in der Lage, Text beispielsweise in einem Artikel zu formatieren, sondern auch beim Spezifizieren verschiedene Informationen auf der Website während des Seitenlayouts. Einer der Tags übernimmt die Übersetzung in HTML und der zweite zeichnet eine horizontale Linie.

Der Index relativ zum Text ist die Verschiebung von Zeichen relativ zur Grundlinie nach oben oder unten. Je nach positivem bzw negativer Wert Offset, der Index wird als oben bzw. unten bezeichnet. Sie werden aktiv in der Mathematik, Physik, Chemie und zur Bezeichnung von Maßeinheiten eingesetzt. HTML bietet zwei Elemente zum Erstellen eines Index: (aus dem Englischen hochgestellt) – hochgestellt und (aus dem Englischen tiefgestellt) – tiefgestellt. Text, der in einem dieser Container platziert wird, wird als kleiner als der Basistext bezeichnet und relativ dazu nach oben oder unten versetzt. Beispiel 1 zeigt, wie diese Elemente und Stile zusammen verwendet werden können, um das Erscheinungsbild von Text zu ändern.

Beispiel 1: Erstellen eines hochgestellten und eines tiefgestellten Index

Hochgestellt und tiefgestellt .formula ( Schriftgröße: 1,4em; /* Formeltextgröße */ ) sup, sub ( Schriftstil: kursiv; /* Kursiv */ Farbe: Rot; /* Rote Zeichenfarbe */ ) sub ( Farbe: blau; /* Blaue Farbe der Zeichen */ )

Charakteristische Gleichung einer Oberfläche zweiten Grades

λ3 - I1λ2 + I2λ - I3 = 0

Im Beispiel erscheinen sowohl tiefgestellte als auch hochgestellte Zeichen gleichzeitig. Um den Index-Schriftstil zu ändern, werden Stile verwendet, die ein einheitliches Design festlegen (Abb. 1).

Reis. 1. Ansicht der Indizes nach dem Anwenden von Stilen

Sie können sie zugunsten von Stilen gänzlich ablehnen. Ein Analogon dieser Elemente ist die Eigenschaft Vertical-Align, die bewirkt, dass der Text vertikal um einen bestimmten Abstand verschoben wird. Konkret beträgt der Wert in Beispiel 2 0,8em für den hochgestellten Index und -0,5em für den tiefgestellten Index. Em ist eine relative Einheit, die der Größe der aktuellen Schriftart entspricht. Beispielsweise gibt 0,5em an, dass der Text um die halbe Schriftgröße verschoben werden soll.

Beispiel 2: Verwenden von Stilen zum Verwalten von Indizes

Hochgestellt und tiefgestellt .formula ( Schriftgröße: 1,6em; /* Textgröße */ Schriftstil: kursiv; /* Kursivstil */ ) .sup, .sub ( Schriftstil: normal; /* Normaler Stil * / Schriftgröße: 0,6 em; /* Indexgröße */ Farbe: Rot; /* Hochgestellte Farbe */ Vertical-Align: 0,8 em; /* Text nach oben verschieben */ .sub ( Farbe: Blau; /* Tiefgestellte Farbe */ Vertical-Align: -0.5em; /* Den Text nach unten verschieben */ )

Polynom vom Grad n

f(x) = a0 + a1 x + ... + an-1 xn-1 + an xn

Im Beispiel wird die Formel selbst vergrößert dargestellt, die hochgestellten Symbole sind rot und die unteren blau gesetzt (Abb. 2).

Guten Tag. Manchmal müssen Sie beim Erstellen von Webseiten einige Wörter mithilfe von CSS in Groß- oder Hochschreibung umwandeln. Mal sehen, wie es gemacht wird.

Im Allgemeinen können Sie heute den gewünschten Text in Tags einschließen und die gewünschte Anzeige erhalten. Schauen wir uns aber auch an, wie dies mithilfe von CSS erreicht werden kann, da die Technik etwas anders ist.

Beispielsweise müssen Sie die Formel H 2 O in ein HTML-Dokument schreiben. Das geht so:

• Die Formel selbst ist geschrieben
• Die Wörter und Zahlen, die im oberen oder unteren Index angezeigt werden müssen, sind in einem Span-Tag eingeschlossen, dem eine Klasse zugewiesen werden muss. Beispiel: Auszugebende Zeichen
• 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 Wert super gibt an, dass der Text hochgestellt angezeigt wird. Die Schriftgröße blieb jedoch dieselbe wie bei normalem Text. Damit alles schöner aussieht, sollten Sie über die Eigenschaft „font-size“ auch die Schriftgröße etwas kleiner einstellen.

So funktioniert die Immobilie einfach. Dementsprechend müssen Sie für die tiefgestellte Ausgabe 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 also tun müssen, müssen Sie eine neue Größe in das Stylesheet schreiben.

Das ist alles, was Sie über hochgestellte und tiefgestellte Zeichen in CSS wissen müssen. Keiner Zusatzfunktionen Die Immobilie stellt diese nicht zur Verfügung und sie werden auch nicht benötigt. Wenn Sie möchten, können Sie diesen Text auf besondere Weise gestalten, dies ist jedoch selten notwendig.

Hoch- und tiefgestellter Text kann beim Schreiben von Formeln sowie beim Hinzufügen von Notizen und Notizen zu Artikeln verwendet werden. Beispielsweise stellt Wikipedia zu jedem Artikel Quellen und Hinweise zur Verfügung. Im weiteren Verlauf des Artikels werden sie in Form kleiner hochgestellter Zeichen platziert. Dies irritiert die Leser nicht und ermöglicht es gleichzeitig, den Artikeln das gewünschte Aussehen zu verleihen.

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

In CSS gibt es keine Cap-Klausel-Option. Andere Antworten, die Texttransformation: Großschreibung vorschlagen, sind falsch, da diese Option verwendet wird jedes Wort für jedes Wort .

Hier unhöflich Eine Möglichkeit, dies zu tun, besteht darin, den ersten Buchstaben jedes Elements in Großbuchstaben zu schreiben, aber das ist definitiv nicht annähernd die tatsächlichen Einschränkungen:

P (Texttransformation: Kleinbuchstaben;) p:erster Buchstabe (Texttransformation: Großbuchstaben;)

Dies ist ein Beispielsatz.

Dies ist ein weiterer Beispielsatz. UND DIES IST EIN ANDERER, ABER ES WIRD VOLLSTÄNDIG IN KLEINBUCHSTABEN GESCHRIEBEN.

So konvertieren Sie den Buchstaben GROSSBUCHSTABEN in Kleinbuchstaben und den ersten Großbuchstaben für jeden Satz wie unten gezeigt, nur mit mit CSS?

Von: Dies ist eine Beispielanwendung.

Zu: Dies ist ein ungefährer Satz.

Update: Wenn ich text-transform: capize; Das Ergebnis ist immer noch das gleiche.

Das geht nicht allein mit CSS. Es gibt ein Texttransformationsattribut, das jedoch nur „none“, „capitalize Uppercase“, „uppercase“, „lowcase“ und „inherit“ akzeptiert.

Vielleicht möchten Sie sich eine JS-Lösung oder eine serverseitige Lösung ansehen.

Wenn Sie alle Zeichen auf dem Server in Kleinbuchstaben umwandeln können, können Sie Folgendes anwenden:

Texttransformation: Großschreibung

Ich glaube nicht, dass die Texttransformation mit Großbuchstaben als Eingabe funktionieren wird.

Wenn Sie dies nicht tun möchten, müssen Sie für oder Textbereich Javascript verwenden

Funktion CapitaliseName() ( var str = document.getElementById("name").value; document.getElementById("name").value = str.charAt(0).toUpperCase() + str.slice(1); )

was für oder gut funktionieren sollte