Horizontale Linien

Veröffentlicht: 2021-09-01

Es gibt viele Möglichkeiten, Ihre HTML-Seiten ansprechender und gut strukturierter aussehen zu lassen. Genauer gesagt kann eine horizontale Linie eine besondere Rolle dabei spielen, den Inhalt Ihrer Website ausgewogen, klarer und einfacher zu durchsuchen. Wann immer wir uns entscheiden, einige große Änderungen an unseren Websites vorzunehmen, können so kleine Dinge wie Linien den Unterschied ausmachen. Solche Kleinigkeiten machen die Botschaft Ihrer Seite umfassender. Außerdem können sie die visuelle Attraktivität Ihrer Webressource und die Art und Weise, wie Ihr Publikum Ihre Daten wahrnimmt, verändern.

Sie können aber auch benutzerdefinierte Zeilen erstellen, die zu Ihrer Webseite passen und Ihnen den Platz, den Sie auf Ihrer Seite manipulieren, besser beherrschen.

Lassen Sie uns einen genaueren Blick darauf werfen, wie Sie horizontale Linien in Ihren HTML-Seiten anpassen können.

Eine horizontale Linie ist ein HTML-Element, das als Dekoration Ihrer Webseite verwendet wird. Es kann sich jedoch auch für eine Reihe anderer Zwecke als nützlich erweisen, wie zum Beispiel:

- Ein Trennzeichen, das verschiedene Teile Ihres Inhalts visuell trennt und einen Akzent setzt, wo eine Idee endet und eine andere beginnt.

- Ein Textmarker, der einige bedeutungsvolle Abschnitte einer Webseite hervorhebt.

- Eine horizontale Linie gilt als eine der beliebtesten und einfachsten Möglichkeiten, um eine Vielzahl von Zwecken auf einer Website zu erreichen. Auch wenn es auf den ersten Blick einfach aussieht, ist es ein multifunktionales Element, das Sie an Ihre spezifischen Anforderungen anpassen können. Durch einfache Modifikationen des HTML-Codes Ihrer Webseite können Sie folgende Vorgaben der horizontalen Linie anpassen:

Länge;

Breite;

Farbe;

Ausrichtung.

Es ist auch erwähnenswert, dass sich die horizontale Linie auf Blockelemente bezieht. Das bedeutet, dass es auf einer Webseite in einer separaten Zeile platziert wird und der Text, den Sie neben der Zeile hinzufügen, darunter platziert wird.

Horizontale Linien sind sehr nützlich, um Ihre Seite in verschiedene Abschnitte zu unterteilen. Um eine einfache horizontale Linie hinzuzufügen, geben Sie einfach < hr > ein, und Sie erhalten Folgendes:

So erstellen Sie eine horizontale Linie

Sie können eine Zeile mit einem einfachen < hr > -Tag festlegen. Es ist die Abkürzung für „Horizontal Rule“ und setzt die klassischen äußeren Parameter. Was es von vielen anderen unterscheidet, ist, dass es kein End-Tag benötigt und eigenständig existieren kann. Sie können die äußeren Eigenschaften eines Elements durch zusätzliche Werte im Tag ändern:

Es sieht aus wie das. Wenn wir zum Beispiel eine Länge von 100 Pixeln wollen, würden wir ein Tag wie folgt setzen: hr width = "100.

Ausrichtung.

Sie können die Linie am linken oder rechten Rand und auch in der Mitte ausrichten. Diese Funktion ist nur gültig, wenn Sie den Breitenparameter bereits angegeben haben, da eine ganzseitige Zeile nicht ausgerichtet werden kann. Setzen Sie für die Ausrichtung ein zusätzliches Attribut im "align"-Tag und fügen Sie eine Richtung hinzu: center - für die Mitte, left - für die linke und right - für die rechte Ausrichtung.

Das fertige Tag sieht in diesem Fall so aus: Wenn wir die zentrierte Ausrichtung für eine horizontale Linie mit einer Länge von 150 Pixeln festlegen müssen, sieht das fertige Tag so aus: hr align = "center" width = " 150".

Beachten Sie, dass "align", das Maß für die Ausrichtung, an Position 1 gesetzt wird, obwohl das Attribut vom Längenmaß Breite abhängig ist.

Breite.

Optional können Sie auch die Breite angeben, wodurch eine fette oder dünne Unterstreichung entsteht. Dieses Kriterium ist von nichts abhängig und kann ohne Angabe der Länge oder Ausrichtung unabhängig verwendet werden. Dafür verwenden wir das Größenattribut im Tag und einen numerischen Wert gleich der gewünschten Breite in Pixel. Die Nummer wird in Anführungszeichen nach dem Größenattribut und dem Symbol „=" angegeben.

Wenn wir also eine 15 Pixel breite Linie erstellen müssen, müssen wir das folgende Tag erstellen: hr size = "15".

Farbe.

Es wird auch als unabhängiger Indikator gesetzt. Verwenden Sie zum Ändern das Farbattribut in Kombination mit dem Farbnamen in Form eines Codes oder in englischer Sprache. Die Farbe wird in Anführungszeichen nach dem Symbol "=" angegeben.

Somit kann das Tag für eine weiße Standardlinie auf zwei Arten geschrieben werden: hr color = "#FFFFFF" oder hr color = "white"

Schwarz kann mit Code # 000000 erstellt werden.

Wie erstelle ich eine farbige horizontale Linie?

Horizontale Linien eignen sich gut, um einen Textblock von einem anderen zu trennen. Kleiner Text mit horizontalen Linien oben und unten lenkt die Aufmerksamkeit des Lesers auf mehr als gewöhnlicher Text.

Mit dem Tag < hr > können Sie eine horizontale Linie ziehen, deren Aussehen von den verwendeten Attributen sowie vom Browser abhängt. Das Tag bezieht sich auf Blockelemente, daher beginnt die Zeile immer in einer neuen Zeile und danach werden alle Elemente in der nächsten Zeile angezeigt. Dank der vielen Attribute des <hr>-Tags ist die durch dieses Tag erstellte Zeile einfach zu manipulieren. In Kombination mit der Leistungsfähigkeit von Stilen ist das Hinzufügen einer Zeile zu Ihrem Dokument ein Kinderspiel.

Standardmäßig wird die Linie grau und mit Volumeneffekt dargestellt. Diese Art von Linie passt nicht immer zum Design der Website, daher ist der Wunsch der Entwickler, die Farbe und andere Parameter der Linie durch Stile zu ändern, verständlich. Allerdings sind Browser in dieser Frage zweideutig, weshalb Sie mehrere Stileigenschaften gleichzeitig verwenden müssen. Insbesondere ältere Versionen des Internet Explorers verwenden die Farbeigenschaft für die Linienfarbe, während andere Browser eine Hintergrundfarbe verwenden. Aber das ist noch nicht alles. Stellen Sie in diesem Fall sicher, dass Sie eine Linienstärke (Höheneigenschaft) ungleich Null angeben und den Rahmen um die Linie entfernen, indem Sie die Eigenschaft border auf none setzen. Wenn wir alle Eigenschaften für den hr-Selektor zusammenfassen, erhalten wir eine universelle Lösung für gängige Browser.

< ! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title> Farbe der horizontalen Linie < /title > < style > hr { border: none; / * Rand entfernen * / background-color: red; / * Linienfarbe * / Farbe: rot; / * Linienfarbe für IE6-7 * / Höhe: 2px; / * Linienbreite * / } < /style > < /head > < body > < hr > < p > Textstring < /p > < hr > < /body > < /html >

Beispiele:

Dies:

< hr color="#c7c34c" size="2" width="50%" >

gibt das:

Farbe: Farbe der Linie:

< hr color="#c7c34c" size="2" width="50%" >

Größe: Zeilenhöhe ausgedrückt in Pixel:

Breite: Breite der Linie entweder in Prozent (%) oder in Pixeln (in meinem Beispiel 50 % der Originalgröße):

Fortgeschrittener:

Dies:

gibt:

In diesem Fall haben wir Stil verwendet:

Die Rahmenbreite beträgt 3 Pixel (3 px)

Es ist gepunktet

Grundfarbe ist schwarz: #000000

Blau gefärbte Punkte: #0099CC

Ein letztes Beispiel, um mehr zu erklären, falls noch benötigt ;):

Dies

gibt:

In diesem Fall oben:

Die Rahmenbreite beträgt 2 Pixel (2 px)

Es ist gestrichelt

Grundfarbe ist weiß: #FFFFFF

Silberne Striche: #C0C0C0

Mögliche Stile sind:

-gepunktet

-gestrichelt

-fest

-doppelt

-Rille

-Anfang

-Einsatz

-Grat

Das ist alles, was ich zu den horizontalen Linien zu sagen habe!