CSS-Leitung. So erstellen Sie eine Zeile mit HTML und CSS. Zeilen in CSS
Hallo! Heute werde ich Ihnen sagen, wie Sie mit HTML eine horizontale Linie erstellen.
Tatsächlich tritt die Notwendigkeit, eine horizontale Linie zu erstellen, häufig auf, beispielsweise wenn Sie einen Teil des Textes von einem anderen trennen müssen.
Horizontale und vertikale Linien mit CSS
Dies kann mit CSS erfolgen. Dazu füge ich den erforderlichen Textbereich mit dem div-Tag in einen Block ein und schreibe dann in der Datei style.css oder direkt im HTML-Code Eigenschaften für diesen Block für den oberen oder unteren Rand mit border-top und border-bottom. Hier ist ein Beispiel:
In diesem Fall habe ich das Styling mit CSS direkt aus dem HTML-Code festgelegt und den oberen Rand als durchgezogene Linie und den unteren als gestrichelte Linie festgelegt.
So wird es auf der Seite aussehen:
Horizontale Linie mit CSS.
Diese Methode hat ihre Vorteile:
- Eine Vielzahl von Einstellungen, mit denen Sie nahezu jeden Leitungstyp einstellen können.
- Sie können sowohl horizontale als auch vertikale Linien erstellen. Um vertikale Linien zu erstellen, müssen Sie den Rand von oben nach links und den Rand von unten nach rechts ändern.
Zu den Nachteilen gehört die relative Sperrigkeit des Codes.
Wie sich herausstellte, können Sie jedoch auch eine horizontale Linie mit HTML in den Text einfügen. Gleichzeitig ist es nicht einmal notwendig, in CSS zu gehen. Verwenden Sie dazu das Tag
.
Horizontale Linie mit HTML-Tag
Das erste Merkmal dieses Tags ist, dass es kein passendes End-Tag hat. Es kann überall im HTML-Code zwischen Tags verwendet werden
und.Dieses Tag hat die folgenden Attribute:
- Breite - bestimmt die Länge unserer horizontalen Linie in Pixel oder Prozent;
- Farbe - definiert die Linienfarbe;
- Ausrichten - setzt die Ausrichtung der Linie nach rechts - rechts, links - links, in die Mitte - Mitte;
- Größe - Linienbreite in Pixel.
Hier ist ein Beispiel für einen HTML-Code.
Es scheint, warum brauchen Sie vielleicht vier Methoden? Schließlich verwendet fast jeder Mensch eine Methode, an die er gewöhnt ist. Zum Beispiel habe ich mehrmals die Umschalttaste und die "Strich" -Taste gedrückt, und das ist eine horizontale Linie.
Aber was ist, wenn dies zu einer gepunkteten Linie führt, Sie aber eine durchgezogene benötigen?
- Höchstwahrscheinlich ist die Umschalttaste auf der Tastatur fehlerhaft. Andere Methoden werden hier zur Rettung kommen.
3.
4.
5.
Möglicherweise ist die häufigste Methode zum Erstellen einer Zeile in Word die Verwendung einiger Tasten auf der Tastatur.
I Dünne, dicke, doppelte, gestrichelte Linie mit der Tastatur
Unten sehen Sie eine Zeichnung einer Tastatur mit Englisch, aber ohne russisches Layout, aber das spielt keine Rolle, da wir nur an drei Tasten interessiert sind: Umschalt, Bindestrich und Eingabetaste.
Zahl: 1. Drei Tasten auf der Tastatur: Shift, Dash und Enter für eine durchgehende horizontale Linie in Word
Mit diesen drei Tasten können Sie in Word eine durchgehende horizontale Linie zeichnen: gepunktet oder durchgehend, dünn oder dick, lang oder kurz.
1) Wenn Sie im Word-Editor mehrmals die Taste "-" (Bindestrich) drücken, erhalten Sie eine gepunktete Linie beliebiger Länge.
Machen dünn eine lange Linie über die gesamte Breite der Seite:
- Wir finden auf der Tastatur die "Strich" -Taste (rechts von der "Null" -Taste im grünen Rahmen in Abb. 1).
- Drücken Sie bei einer neuen (!) Zeile in Word diese Taste mehrmals: -
- Drücken Sie dann die Eingabetaste (). Mehrere gedruckte Striche werden plötzlich zu einer durchgehenden, horizontalen, dünnen Linie über die gesamte Seitenbreite.
2) Wenn Umschalt und "-" (Bindestrich) gleichzeitig gedrückt werden, wird NICHT ein Bindestrich gedruckt, sondern eine Unterstreichung _________. Auf diese Weise können Sie an einer beliebigen Stelle im Dokument eine durchgehende Linie beliebiger Länge erstellen.
Zahl: 2. Dünne und dicke horizontale Linie in Word
Jetzt drucken wir dick eine horizontale Linie, um die gesamte Seitenbreite auszufüllen:
- Wieder finden wir die gleiche Strich-Taste sowie die Umschalttaste (links oder rechts, wie Sie möchten). Drücken Sie die Umschalttaste, halten Sie die Taste gedrückt und lassen Sie sie nicht los.
- Und jetzt mit einer neuen (!) Zeile mehrmals (z. B. 3-4 Mal) auf den Bindestrich drücken (ohne die Umschalttaste loszulassen): ___. Umschalttaste loslassen.
- Drücken Sie nun die Eingabetaste. Sie sehen eine dicke horizontale durchgezogene Linie.
Fassen wir einige Ergebnisse in Form einer Tabelle zusammen:
(Zum Vergrößern anklicken) Zeilen in Word über die Tastatur
II Zeile in Word anhand einer Tabelle
Eine horizontale Linie kann erhalten werden, wenn Sie eine Tabelle mit einer Zelle (1 × 1) verwenden, in der nur der obere oder untere Rand farbig ist (sichtbar ist) und die anderen drei Seiten der Tabelle offene Ränder haben (sie sind unsichtbar).
Wir platzieren den Cursor an der Stelle, an der sich die Linie befinden soll. Klicken Sie im oberen Menü von Word auf:
- Einfügen (1 in Abb. 3),
- Tabelle (2 in Fig. 3),
- Eine Zelle (3 in Fig. 3).
Zahl: 3. So fügen Sie eine 1x1-Tabelle in Word ein (aus einer Zelle)
Das Ergebnis ist eine Tabelle mit einer großen Zelle (1x1):
Es bleibt, die Ränder von drei Seiten in der 1x1-Tabelle zu entfernen. Dafür
- gehen Sie zur Registerkarte "Home" (1 in Abb. 4).
- dann finden wir neben "Schriftart" "Absatz" und Ränder (2 in Abb. 4),
- entfernen Sie alle Ränder, indem Sie auf "Kein Rand" klicken (3 in Abb. 4).
- wählen Sie "Oberer Rand" oder "Unterer Rand" (4 in Abb. 4).
Zahl: 4. So entfernen Sie die Auswahl von Rahmen in der Word-Tabelle (machen Sie Rahmen unsichtbar)
Ich zeige dies deutlich im Video (am Ende des Artikels).
Übrigens in Abb. 3 zeigt, dass es einen einfacheren Weg gibt. Sie können den Cursor in Word an den Zeilenanfang setzen und auf "Horizontale Linie" klicken (5 in Abb. 4):
III Linie in Word durch Zeichnen
Einfügen (1 in Abb. 5) - Formen (2 in Abb. 5) sind eine weitere Möglichkeit, eine horizontale Linie in Word zu erhalten.
Um die Linie streng horizontal zu halten, halten Sie die Umschalttaste gedrückt und zeichnen Sie gleichzeitig die Linie.
Zahl: 5. Wie zeichnet man eine Linie in Word?
IV Zeile in Word über die Bildschirmtastatur
Um die Bildschirmtastatur zu finden, geben Sie unter Suchen den Ausdruck "Bildschirmtastatur" ein, mehr für Windows 7 und Windows 8.
Unter Windows 10 können Sie die Bildschirmtastatur auch finden, indem Sie in der Suchleiste "Bildschirmtastatur" eingeben.
Zahl: 6. Bildschirmtastatur
Wir werden eine horizontale Linie auf die gleiche Weise wie in der ersten Version mit einer normalen Tastatur erstellen. Auf der Bildschirmtastatur benötigen Sie drei Schaltflächen: Bindestrich, Umschalttaste und Eingabetaste.
1 Dash und Enter
Klicken Sie in einer neuen Zeile in Word mehrmals auf den Bindestrich (1 in Abb. 6) und drücken Sie die Eingabetaste. Dadurch wird eine dünne horizontale Linie erstellt.
2 Shift, Dash und Enter
Klicken Sie in einer neuen Zeile in Word zuerst auf Umschalt (2 in Abb. 6) und dann auf Strich (1 in Abb. 6). Das Ergebnis ist eine Unterstreichung. Also werden wir noch 2 Mal wiederholen und dann die Eingabetaste drücken. Als Ergebnis sehen wir eine dicke horizontale Linie.
Beim Erstellen einer HTML-Seite spielt das Layout eine wesentliche Rolle. Besonders wenn es um verschiedene Symbole und dekoratives Design geht: Diese kleinen Dinge tragen dazu bei, die "Sprache" Ihrer Seite zugänglicher und klarer zu machen, und verändern außerdem die Wahrnehmung und das Erscheinungsbild Ihrer Seite im Allgemeinen erheblich. Eines der wichtigsten Elemente für das Design ist eine horizontale Linie. Außerdem erfahren Sie ausführlicher, wie Sie damit arbeiten und wie Sie eine horizontale Linie in HTML erstellen.
Was ist eine horizontale Linie und wofür ist sie?
Eine horizontale Linie in HTML ist ein Seitendekorationselement, das eine Reihe von Funktionen ausführt:
- Dekorativ... Hilft, der Seite Attraktivität zu verleihen.
- Teilen... Fördert eine effektive Trennung von Informationen unterschiedlicher Bedeutung.
- Hervorheben oder unterstreichen... Lenkt die Aufmerksamkeit der Seitengäste auf die notwendigen und wichtigsten Informationen.
Es ist die horizontale Linie, die als die kostengünstigste Möglichkeit zur Implementierung einer Reihe von Funktionen angesehen wird. Es ist sehr einfach zu erstellen, aber äußerlich sieht es sehr profitabel aus. Durch einfache Änderungen am HTML-Code können Sie Folgendes anpassen:
- länge;
- breite;
- farbmerkmale;
- ausrichtung auf die eine oder andere Kante.
Beachten Sie, dass sich die horizontale Linie auf Blockelemente bezieht. Dies bedeutet, dass es eine neue Zeile auf der Seite einnimmt und der darauf folgende Text unten steht.
Erstellen Sie eine horizontale Linie in HTML
Sie können eine Linie mit einem einfachen Tag festlegen - h in dreieckigen Klammern. Es ist die Abkürzung für "Horisontal Rule" und legt die klassischen externen Parameter fest. Es unterscheidet sich von vielen anderen darin, dass es kein End-Tag benötigt und eigenständig existieren kann. Sie können die externen Eigenschaften eines Elements mithilfe zusätzlicher Werte im Tag ändern:
- Länge... Wenn Sie nicht möchten, dass sich die Länge der Linie über die gesamte Seite erstreckt, können Sie die gewünschte Größe in Pixel oder Prozent festlegen. Dies erfolgt unter Verwendung des zusätzlichen Wortes "width" im Tag und des numerischen Längenindikators, der nach dem Anführungszeichen "\u003d" in Anführungszeichen angegeben wird.
Es sieht aus wie das. Wenn wir beispielsweise eine Länge von 100 Pixel wünschen, setzen wir ein Tag wie folgt: hr width \u003d "100"
- Ausrichtung... Die Ausrichtung ist am linken oder rechten Rand sowie in der Mitte möglich. Diese Funktion ist nur gültig, wenn Sie den Parameter width bereits angegeben haben, da eine ganzseitige Zeile nicht ausgerichtet werden kann. Legen Sie zum Ausrichten ein zusätzliches Attribut im Tag "Ausrichten" fest und fügen Sie eine Richtung hinzu: Mitte - für Mitte, links - für Links und rechts - für Rechtsausrichtung.
Das fertige Tag sieht dann so aus. Wenn Sie beispielsweise die Mittenausrichtung für eine horizontale Linie mit einer Länge von 150 Pixel festlegen müssen, sieht das fertige Tag folgendermaßen aus: hr align \u003d "center" width \u003d "150".
Beachten Sie, dass "align", das Maß für die Ausrichtung, an Position 1 gesetzt wird, obwohl das Attribut von der Breite des Längenmaßes abhängt.
- Breite... Optional können Sie auch die Breite angeben und eine fette oder dünne Unterstreichung erstellen. Dieses Kriterium hängt von nichts ab und kann unabhängig verwendet werden, ohne die Länge oder Ausrichtung anzugeben. Dafür verwenden wir das Größenattribut im Tag und einen numerischen Wert, der der gewünschten Breite in Pixel entspricht. Die Nummer wird in Anführungszeichen nach dem Größenattribut und dem Symbol "\u003d" angegeben.
Wenn wir also eine 15 Pixel breite Linie erstellen müssen, müssen wir das folgende Tag erstellen: hr size \u003d "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 Englisch. Die Farbe wird in Anführungszeichen nach dem Symbol "\u003d" angegeben.
Somit kann das Tag für eine weiße Standardlinie auf zwei Arten geschrieben werden: hr color \u003d "#FFFFFF" oder hr color \u003d "white"
Schwarz kann mit dem Code # 000000 erstellt werden.
- Entfernen schatten... Wenn Sie ein Element benötigen, das keinen Schatten enthält, sollte das Noshade-Attribut im Tag verwendet werden. Es kann alleine oder in Kombination mit anderen Elementen verwendet werden. Ein Tag für eine Standardzeile, die es verwendet, sieht folgendermaßen aus: hr noshade
Erstellen Sie eine horizontale Linie mit Video
Wenn Sie Informationen in einem visuelleren Format erhalten möchten, lesen Sie das nächste Video, in dem die Möglichkeiten zum Arbeiten mit einer horizontalen Linie ausführlich beschrieben werden.
Nachdem Sie die erforderlichen Abmessungen der horizontalen Linie festgelegt haben, können Sie die Websiteseiten so gestalten, dass die Informationen strukturiert und visuell kompetent gestaltet sind. Dies hilft den Besuchern, die präsentierten Informationen leichter wahrzunehmen und Ihre Website von anderen abzuheben.