Wie ziehe ich Text auf meiner Webseite oder in HTML ein?

Es gibt verschiedene Methoden zum Einrücken von Text. Aus Gründen der Kompatibilität mit mehreren Browsern und der Erreichbarkeit beschreiben wir jedoch die gängigsten Methoden zum Einrücken von Text auf Ihrer Webseite.

Empfohlene Methode mit CSS & HTML

Zum Einrücken von Text oder Absatz wird die am häufigsten verwendete und empfohlene Methode die Verwendung von CSS sein. Im Folgenden finden Sie verschiedene Beispiele, wie CSS zum Einrücken von Text verwendet werden kann. Jedes dieser Beispiele wird zwischen Ihren HTML-Tags platziert.

Im folgenden Beispiel würde eine Stilklasse mit dem Namen "tab" erstellt, die den Text und den Absatz um 40 Pixel von links einrückt.

Sobald der obige Code in dem Abschnitt enthalten ist, können Sie ihn jederzeit verwenden, indem Sie ihn zu Ihrem Absatz hinzufügen (

) Tags wie gezeigt.

Beispiel für eine Registerkarte

Das Einfügen von CSS in Ihr HTML-Dokument, wie oben gezeigt, wird als "Inline-CSS" bezeichnet. Es ist nützlich, um schnell Änderungen vorzunehmen, aber auf lange Sicht ist es schwierig, später Änderungen vorzunehmen.

Stattdessen können Sie den gesamten CSS-Code verwenden und eine separate Datei mit der Erweiterung .css platzieren. Sie können dann von jedem HTML-Dokument aus eine Verknüpfung zu dieser einen Datei erstellen, und diese Dokumente können diese CSS-Eigenschaften verwenden. Die Verwendung einer externen CSS-Datei erleichtert das spätere Ändern des CSS, da das gesamte CSS an einer Stelle definiert ist.

Um eine Verknüpfung zu Ihrer externen CSS-Datei herzustellen, fügen Sie die folgende Zeile in Ihr HTML-Dokument im Element ein (nach dem basic.css

Sobald diese .css-Datei erstellt wurde, bearbeiten Sie die Datei, und fügen Sie denselben CSS-Code hinzu, wobei die Tags und comment ausgeschlossen sind (siehe Abbildung).

.tab {Rand links: 40px; }

Nachdem Sie die oben genannten Schritte ausgeführt haben, können Sie jeden Text mit dem gleichen Tabulator versehen

Beispiel, das wir oben gezeigt haben.

Es gibt auch andere Formen des Einrückens. Wenn Sie beispielsweise nur die erste Zeile eines Absatzes einrücken möchten, anstatt die obige CSS-Zeile zu verwenden, würden Sie die folgende Zeile verwenden.

.tab {text-indent: 40px}

Tipp: Sie können auch einen Prozentwert einrücken. Anstelle des Einrückens um 40 Pixel (Pixel) können Sie beispielsweise den Einzug durch 5% ersetzen, um den Text um 5% der aktuellen Ansicht einzurücken. Sie können auch einen Leerraum verwenden, wenn Sie die Breite eines Einzugs definieren.

Bonus-Tipp: Sie können den Wert von links nach rechts in einen rechten Einzug ändern, indem Sie den Rand links nach rechts rechts ändern.

Empfohlene Methode mit HTML

Dieselben Ergebnisse können Sie auch erzielen, wenn Sie einen Inline-Stil in HTML verwenden. Das obige CSS-Beispiel kann zwar die Wartung auf mehreren Webseiten erleichtern, wenn Sie einen Stil nur einmal verwenden müssen, können Sie das folgende Beispiel verwenden.

Dieser Text ist eingerückt.

In diesem ersten Beispiel wird der gesamte Text im Absatz-Tag um 40 Pixel von links eingerückt. Alle anderen Absatz-Tags werden nicht eingerückt.

Dieser Text ist eingerückt.

In diesem zweiten Beispiel wird nur die erste Textzeile im Absatz um 40 Pixel von links eingerückt. Zusätzliche Textzeilen in diesem Absatz werden nicht eingerückt.

Tipp: Sie können auch einen Prozentwert einrücken. Anstelle des Einrückens um 40 Pixel (Pixel) können Sie beispielsweise den Einzug durch 5% ersetzen, um den Text um 5% der aktuellen Ansicht einzurücken. Sie können auch einen Leerraum verwenden, wenn Sie die Breite eines Einzugs definieren.

Bonus-Tipp: Sie können den Wert von links nach rechts in einen rechten Einzug ändern, indem Sie den Rand links nach rechts rechts ändern.

Alternative Methode

Eine andere übliche (aber unangemessene) Methode zum Einrücken von Text ist die Verwendung der Tags, wie im folgenden Beispiel gezeigt. Obwohl dies eine viel einfachere Lösung ist, kann es zu Problemen mit der Barrierefreiheit kommen, wenn Sie mit dieser Lösung Ihren Text einrücken. Dieses Tag ist für Anführungszeichen und nicht für das Einrücken gedacht.

Dieser Text wird eingerückt