CSS -Einzug

“CSS -Einzug ist die Eigenschaft von CSS, die im DIV -Block oder in einem beliebigen Behälter verwendet werden, um die Eindrücke der ersten Zeile des Textes anzuzeigen. Wenn CSS -Einklage mit einer Zeile nicht erwähnt wird, dann ist es standardmäßig für die erste Zeile des Textes. Es nimmt die Werte auch mit positiven und negativen Vorzeichen an.

Diese Einstellungseigenschaft kann auf jeden HTML -Inhalt angewendet werden, aber in diesem Artikel haben wir den Text verwendet, um den Text in der ersten Zeile des Absatzes einzubeziehen.”

Arbeiten auf CSS -Einklang -Text -Eigenschaft

Es wird verwendet, um die Anzahl der leeren Räume anzuzeigen, die zwischen den Absätzen von links oder den rechten Rändern des äußeren Inhalts, der größtenteils div ist, unterscheidet. Die Einklebungseigenschaft von CSS erleichtert den Text, damit die Programme gelesen und verständlich werden können, indem der Text auf einer bestimmten Länge gehalten wird. Dies wirkt sich für den Text eingängig aus.

Die für die textinvertretende Eigenschaft verwendete grundlegende Syntax lautet:

Text-Indent: Länge;

Beispiel 1

In diesem Beispiel erstellen wir eine Webseite mit nur HTML -Textinhalten in Form von Überschriften oder Absätzen. Verwenden Sie zuerst im Körperabschnitt die Überschrift

Tag, um eine Überschrift vorzustellen. Nach einer Pause
, Wieder wird eine Überschrift verwendet. Das Break -Tag erstellt eine leere Zeile und springt in die nächste Zeile, um neue Inhalte zu erstellen. Nachdem die Überschriften deklariert wurden, wird eine DIV erstellt. Ein DIV ist ein wichtiger HTML -Container, da es sich um einen Container handelt, der den HTML. Welche Elemente, die wir im DIV verwenden, mit einer bestimmten Größe benötigt, um alle Elemente in dieser Größe zu behalten. In diesem Fall haben wir den Namen der Klasse erwähnt, der im Kopfabschnitt des HTML -Codes deklariert wird. Alle Eigenschaften im CSS -Stil sind in der genannten Klasse geschrieben, die auf den DIV und den Inhalt darin angewendet wird.

Im Inneren der DIV werden wir einfach den Text verwenden. Einfacher Textinhalt kann mit oder ohne Absatz -Tags verwendet werden.

Nachdem das Div -Tag geschlossen ist

. Ein DIV wird erneut mit dem neuen Klassennamen deklariert, der das CSS für diese Klasse separat enthält. Schließen Sie auch alle Tags und HTML -Körper. Betrachten Sie nun die CSS -Tags, die im Kopfabschnitt deklariert sind, und macht es zu einem internen CSS. In der CSS werden zwei Klassen separat deklariert; Die erste Klasse enthält einen Textantrieb von 50px mit einer Div -Breite von 650 PX, sodass der Text in dieser Länge des DIV hält, und die erste Zeile des Textes wird durch diesen Wert des Einsatzes beeinflusst.

.mytext
Textindent: 50px;

In ähnlicher Weise ist für die zweite Klasse, die für die zweite DIV deklariert wurde. Eine ähnliche Breite wird auch auf die DIV angewendet.

Speichern Sie nun den Code mit der HTML -Erweiterung, um ihn sowohl als HTML -Code im Editor als auch als Webseite im Browser zu öffnen.

Sie sehen. Während der zweite Div 10EM hat, bewegt sich der Text nach dem angegebenen Wert zur linken Seite, wodurch die Wörter der ersten Zeile versteckt werden.

Beispiel 2

Das für den Einzug verwendete Einheit ist nicht immer in Pixeln; Es kann auch in Prozentsätzen verwendet werden. In diesem Beispiel ist der HTML -Körpercode fast der gleiche; Nur der Hauptname ist unterschiedlich, da sie die neuen Werte im Prozentsatz angeben. Die gleichen zwei Klassen für das CSS werden auch im Code verwendet.

In Richtung des CSS -Kopfanteils verfügt das Style -Tag über die Klasse, die einen Einzug von 20 Prozent Wert und Breite enthält, wie wir im ersten Beispiel angegeben haben.

.mytext
Text-Indent: 20%;

In ähnlicher Weise wird der MyText1 der zweiten Klasse für einen Stil auf die zweite DIV angewendet. Dies hat die gleiche Breite, aber der Einzug für den Text beträgt 40%. Diese Erhöhung des textinndenten Anstiegs führt dazu, dass sich die erste Zeile des Textes mit einer Änderung in die richtige Richtung bewegt.

Sie können sehen, dass beim Ausführen der HTML -Datei im Browser eine Webseite mit zwei Textabsätzen gebildet wird. Der erste beginnt in der Nähe links, während der zweite Absatz aus der Mitte des Div.

Beispiel 3

Das dritte und das letzte Beispiel handelt. In diesem Beispiel wird der erste Satz in eine rückwärts gerichtete Richtung bewegt, während der Rest des Absatzes noch in seiner Position ist; Die Verschiebung ist in diesem Fall meistens negativ, um den ersten Textabschnitt in eine linke Richtung zu verschieben. In Anbetracht des HTML -Körper. Der DIV -Container verfügt über eine Klasse, um den Text mit internem CSS darin zu stylen.

< div class = mytext >

In dem Style -Tag im HTML -Kopf wird die im Div -Tag deklarierte Klasse mit Spezifikationen deklariert. Es hat einen textbezüchtigen von -28px. Dies bedeutet, dass die erste Zeile mit einer Einkerbung eines negativen 28. Wertes beginnt und den Text auf die linke Seite bewegt. Da der negative textindische Wert den Text in Richtung der negativen Seite bewegt, haben wir ihn im ersten Beispiel erklärt, aber im Gegensatz zu diesem Beispiel, in dem der bewegliche Teil der ersten Zeile nicht sichtbar war, erschien der gesamte erste Satz im Inneren die div.

.mytext
Textindent: -28px;
Padding-Links: 28px;

Im Gegensatz zum textindenten, da er in einem negativen Wert genommen wird, wird der Wert von Polster-Links positiv genommen, da der gesamte Absatz in diese Div-Größe passt. Dadurch wird der Text der ersten Zeile in der linken Richtung deutlicher.

Der Rest des HTML -Körpercodes ist derselbe, hat eine Überschrift und eine DIV mit einer Klasse.

Führen Sie nach dem Speichern des Codes ihn im Browser aus. Sie werden sehen, dass sich die erste Zeile des Textes in der linken Richtung befindet und der Rest des Absatzes aus der zweiten Zeile nach rechts ist.

Abschluss

Der Artikel erläutert die Arbeit und Verwendung der Einstellungseigenschaft von CSS von Text auf Webseiten. Wann immer wir bereit sind, irgendetwas durch einen Text auf der Website zu beschreiben, sei es um die Website oder andere Informationen, verwenden wir diese Einstellungseigenschaft, um den ersten Zeilentext in ein wenig rechts oder links zu verdrängen. In diesem Artikel haben wir verschiedene Beispiele verwendet, die die Funktionsweise dieser Einrückungseigenschaft in der Texteigenschaft einer Webseite erläutern, die mithilfe von HTML und CSS zusammengebracht wurde.