Ein Cascading Style Sheet (CSS) spielt eine wichtige Rolle bei der Verbesserung des HTML-geschaffenen Inhalts, um eine Webseite zu bilden. Eine der häufig verwendeten und grundlegenden Eigenschaften besteht darin, einen leeren Raum oder eine neue Zeile dazwischen vor oder nach dem HTML -Inhalt hinzuzufügen. Verwenden Sie nur die HTML
ist für die Erstellung von Pausen im Inhalt verantwortlich, aber das CSS hat seine Möglichkeiten, die Auswirkungen auf die Elemente im Körper zu stylen. In diesem Artikel werden wir sehen, wie wir mit CSS eine neue Zeile in den HTML -Code hinzufügen können.

Beispiel 1:
Um das Phänomen einer Linienpause zu implementieren, verwenden wir ein einfaches Beispiel, um das Konzept zu erläutern. Ein einfaches Programm demonstriert zuerst die HTML -Texte ohne Abstand und wie es aussieht, den Text im Absatz oder in einem Spann -Tag zu verwenden, ohne die leeren Leerzeichen zu verwenden. Zuerst kommt der Körperabschnitt der HTML. Eine Überschrift

wird dem Abschnitt hinzugefügt. Mit zwei Spann -Tags verwenden wir dann den einfachen Text darauf. Ein Spannwechsel funktioniert wie das

Absatz Tag. Schließen Sie den HTML -Körper. Dieses Tag enthält weder das CSS noch ein anderes Inhalts -Tag. Es werden nur zwei Zeilen deklariert, um die gewünschte Ausgabe zu erhalten.

Speichern Sie den Code der Textdatei mit einer HTML -Erweiterung und führen Sie ihn im Browser aus.

Sie werden sehen, dass die beiden Sätze ohne Zeilenunterbrechung angezeigt werden, obwohl sie in separaten Zeilen geschrieben sind. Es spielt jedoch keine Rolle, da jede Span -Linie in denselben Zeilen angezeigt wird.

Beispiel 2:
Es gibt eine CSS -Eigenschaft, die auf den HTML -Inhalt angewendet wird, um die darin. Es ist der Wagenrücklaufcharakter (\ a). Es ist in zwei Elemente unterteilt, die „:: vor“ und „:: Nachher“ sind, die in den CSS-Klassen erwähnt werden.

Dies ist der Effekt, der entweder in beiden Elementen oder durch Verwendung eines von ihnen angewendet wird. Zuerst verwenden wir ein After -Element zum Text. Mal sehen, wie es funktioniert.

Im Körperabschnitt wird der gleiche Inhalt als Überschrift verwendet, und dann werden zwei Spannweiten -Tags angewendet. Diesmal wird eine ID für das CSS im Span -Tag erwähnt. Diese ID wendet alle Effekte an, die im Kopfabschnitt des HTML -Körpers deklariert werden. Schließen Sie jetzt den Körper. Verwenden Sie im Kopfabschnitt die Stil -Tags, um das interne CSS zu erstellen. Verwenden Sie in den Tags die ID, die angewendet wird, und folgen. In dieser ID -Beschreibung verwenden wir die Inhaltseigenschaft, die nur das Zeichen „\ a“ ist. Es verursacht nur eine neue Zeile zum vorhandenen Text. Durch die Verwendung werden beide Sätze auf separaten Zeilen angezeigt. Eine andere Eigenschaft, die in der Beschreibung geschrieben ist, ist der „weiße Raum“. Dieser weiße Raum wird immer in einem Vorab-Typ genommen.

#content1 :: nach
Inhalt: "\ a";
Weißer Raum: PRE;

Diese Stil -ID wirkt sich so aus, dass sich der Spannwesen so auswirkt, dass zwei Sätze nicht in derselben Zeile angezeigt werden. Das "Nachher" -Element verursacht einen Bruch einer Linie zwischen zwei Sätzen. Wie der Name erklärt, ist die Pause nach der ersten Zeile erfolgt.

Speichern Sie den Code und führen Sie ihn im Browser aus, um die resultierende Webseite zu sehen.

Sie werden sehen, dass wir auf diese Weise eine neue Zeile mit einer CSS -Eigenschaft erstellt haben.

Beispiel 3:
In diesem Beispiel werden wir beide Elemente des Wagenrücklaufcharakters verwenden. Lassen Sie den HTML -Körperabschnitt in der Art und Weise im vorherigen Beispiel sein, aber mit einer einzigen Änderung durch Hinzufügen einer Content2 -ID im Tag der zweiten Spannweite. Dies führt zu Effekten auf beide Span -Tags. Die Style -Tags des Kopfteils haben sich nur ändern. Die Content1 -ID ist das gleiche mit dem "Nachher" -Element darin.

Aber die Content2 -ID hat das "vor" -Erement des Charakters damit.

#content2 :: vor
Inhalt: "\ a";
Weißer Raum: PRE;

Wie die Stilbeschreibung zeigt, wird das Vor -Element auf die zweite Spannweite angewendet. In der ersten Spanne haben wir die Conent1 -ID angewendet. Aufgrund der Content1 -ID wird der Speicherplatz nach der ersten Zeitspanne erstellt. Aber wegen der Content2 -ID mit dem "vor" -Element hat die zweite Spannweite eine neue Zeile vor dem zweiten Satz. Dies ist auf das in der Content2 -ID deklarierte "Bevor" -Element zurückzuführen.

Bei der Ausführung sehen Sie, dass zwischen zwei Sätzen eine Lücke von einer leeren Linie besteht. Der „Nach“ -Effekt wird durch die erste ContEN1 -ID angewendet, während der „Vorher“ -Effekt durch die Content2 -ID kollektiv angewendet wird.

Beispiel 4:
Ein weiteres Beispiel für eine CSS-neue Linie wird hier deklariert, bei der eine CSS-Eigenschaft verwendet wird, in der der Weißraum-Effekt einen Wert der Vorlinie erhält. Dieser Wert vor der Leitung erzeugt eine Lücke vor dem HTML-Inhalt, auf den er angewendet wird. Betrachten wir nun das folgende Beispiel:

Im Körperabschnitt der HTML zwei Überschriften,

Und

, sind gegeben. Nach diesen Überschriften wird ein Absatz mit jedem Wort in einer separaten Zeile deklariert.

Im Kopf wird nun ein internes CSS angewendet, nachdem er den Titel der Seite gegeben hat, um ein Style -Tag zu haben. Innerhalb des Style-Tags verwenden wir ein Absatz-Tag, um die Schriftfarbe zusammen mit der Eigenschaft Weißraum auf den Text anzuwenden.

P
Farbe orange;
Weißer Raum: Vorline;

Dieser Code „Pre-Line“ verursacht eine leere Zeile, bevor der Absatz begonnen hat.

Bei der Ausführung sehen Sie, dass der Raum erstellt wird, bevor der Absatz begonnen hat.

Beispiel 5:
Dieses Beispiel unterscheidet sich ganz von den vorherigen Beispielen, da wir hier nicht nur eine leere neue Zeile verwenden, sondern auch den neuen Text zu den neuen Zeilen hinzufügen. Im Körperabschnitt werden zwei Überschriften erstellt -

Und

. Danach wird ein Absatz-Tag verwendet, um den Zwei-Absatz-Text zu erstellen.

Im Kopfabschnitt verwenden wir einen Absatz für den Styling -Zweck.

P :: vor
Farbe Rot;
Inhalt: "LinuxHint \ a"
"Artikel online Break";
Bildschirmsperre;
Weißer Raum: Pre

Dieser Effekt umfasst die Schriftfarbe und den Inhalt, den wir jedem Absatz hinzufügen möchten, nachdem die leere Zeile hinzugefügt wurde. Die Eigenschaft aus weißer Raum erhält einen „Pre“ -Wert, um vor dem Absatz einen leeren Platz hinzuzufügen.

Speichern Sie den Code und führen Sie die Datei aus. Sie werden sehen, dass vor jedem Absatz eine leere Zeile hinzugefügt wird und danach der Inhalt nach dem leeren Speicherplatz hinzugefügt wird.

Abschluss

Die CSS -neue Zeile ist eine Beschreibung des Erstellens einer neuen Zeile mit einigen Funktionen von CSS, die mit jeder HTML -Funktion deklariert werden. Durch die CSS -Effekte kann vor, nach oder zwischen dem HTML -Inhalt eine neue Linie hinzugefügt werden. Wir haben die verschiedenen Beispiele implementiert, um das Konzept kurz aufzunehmen. Zu Beginn wird ein Beispiel für einen HTML -Absatz ohne Platz verwendet. Mit demselben Code haben wir dann eine CSS -Eigenschaft des Zeichens hinzugefügt. Ein „Wagenrücklaufcharakter“ wird verwendet, um neue Linien zwischen dem Inhalt hinzuzufügen, den wir im HTML -Körper erklären. Dieser Charakter kann direkt oder mit dem neuen Inhalt hinzugefügt werden, der hinzugefügt werden soll.