Wie zeichnet man eine Linie in HTML. So erstellen Sie eine Zeile mit HTML und CSS. Blockiert in einer Linie unter Verwendung eines Frameworks

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 das Ergebnis einer horizontalen 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 ist eine Zeichnung einer Tastatur mit einem englischen, aber ohne russisches Layout, aber es 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 Breite der Seite.

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 (zum Beispiel 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 ungefärbte Ränder haben (sie sind unsichtbar).

Wir setzen den Cursor an die 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, weitere Details 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 werden wir genauer lernen, wie man damit arbeitet und wie man eine horizontale Linie in HTML erstellt.

Was ist eine horizontale Linie und wofür ist sie?

Eine horizontale Linie in HTML ist ein Seitengestaltungselement, das eine Reihe von Funktionen ausführt:

  1. Dekorativ... Hilft, der Seite Attraktivität zu verleihen.
  2. Teilen... Fördert eine effektive Trennung von Informationen unterschiedlicher Bedeutung.
  3. 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:

  1. 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"

  1. 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 die Mitte, links - für die linke und rechte Seite - für die rechte Ausrichtung.

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.

  1. 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".

  1. 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.

  1. 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.

Hallo! Heute werde ich Ihnen sagen, wie Sie mit HTML eine horizontale Linie erstellen.

Tatsächlich besteht häufig die Notwendigkeit, eine horizontale Linie zu erstellen, 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 einem 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:

Vertikale HTML-Linie

Horizontale Linie mit CSS.

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 fast 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. In diesem Fall 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.

Grundsätzlich werden horizontale Linien verwendet, um die HTML-Seiten der Site zu dekorieren und ihnen ein attraktiveres Aussehen zu verleihen. Sie können jedoch auch Informationen aus benachbarten Abschnitten visuell abgrenzen, was den Lesern das Studium erleichtert. Zeichnen Sie im Allgemeinen horizontale Linien dort, wo Sie sie benötigen, das ist alles.

Wie zeichne ich eine horizontale Linie?

Es gibt ein spezielles Tag zum Zeichnen horizontaler Linien in HTML

... Darüber hinaus ist er block-TagDas heißt, es werden Zeilenumbrüche vor und nach sich selbst erstellt, sodass die Zeile immer in einer separaten Zeile abgerufen wird. Dementsprechend kann es nur innerhalb von Tags angegeben werden, die beispielsweise Blockelemente enthalten können oder
... Aber ich selbst
kann keinen Inhalt haben, da er einfach kein End-Tag hat, das heißt, er ist leer.

Ein Beispiel für das Zeichnen horizontaler Linien in HTML

Zeichnen Sie horizontale Linien

Absatz.

Absatz.

Absatz.

Ergebnis im Browser

Absatz.

Absatz.

Absatz.

Wie Sie sehen können, sind die Linien sehr dünn, unscheinbar und werden auf die gesamte verfügbare Breite gezeichnet. Jetzt lernen wir, wie Sie sie ändern können, damit sie attraktiver aussehen.

Wie ändere ich Farbe, Dicke und Breite horizontaler Linien?

In älteren HTML-Versionen das Tag

Es gab spezielle Attribute, mit denen Farbe, Dicke und Breite horizontaler Linien geändert werden konnten. Dies sind Farbe, Größe und Breite. In neueren Versionen wurden sie jedoch zugunsten von Cascading Style Sheets (CSS) verworfen. Sie haben es also erraten, wir werden unser bevorzugtes Stilattribut wieder verwenden. Die allgemeine Syntax lautet:

style \u003d "Hintergrund: Farbe"\u003e - Linienfarbe (oder vielmehr deren Hintergrund).

style \u003d "height: size"\u003e - dicke der Linie.

style \u003d "width: size"\u003e - Linienbreite.

stil \u003d "Hintergrund: Farbe; Höhe: Größe; Breite: Größe"> - Sie können jedoch alle Parameter gleichzeitig angeben. Vergessen Sie jedoch nicht das Semikolon (;).

Die Farbe kann durch ihren Namen in Englisch oder durch den HEX-Code der Farbe angegeben werden, dem ein Hash (#) vorangestellt ist. Nun, das wissen Sie bereits von der Lektion an Ändern der Farbe von Text und Hintergrund.

Wir werden jedoch näher auf die Größenänderung eingehen. Erinnerst du dich an tutorial zum Ändern von SchriftartenEs gibt ungefähr zehn Einheiten in CSS, aber linienbreite kann nur in Pixel (px) und Prozentsätzen (%) angegeben werden, und dicke im Allgemeinen nur in Pixel. Wenn Sie andere Maßeinheiten eingeben, ist dies kein Fehler, aber die Browser ignorieren sie einfach.

Wenn Sie die Abmessungen in Pixel angeben, hängt die Dicke und Breite der Linie von der Auflösung des Monitors ab, auf dem Ihre Site angezeigt wird (je höher die Bildschirmauflösung, desto dünner und schmaler die Linie).

Wie gesagt, nur die Linienbreite kann als Prozentsatz angegeben werden. Prozentuale Größen hängen immer von der Größe des übergeordneten Containerelements ab, in dem sich das Tag befindet, und werden basierend auf dieser berechnet

... In diesem Fall wird die Größe des Elternteils als 100% angenommen. Zum Beispiel, wenn wir das Tag platzieren
style \u003d "width: 50%"\u003e inneres Element
Unabhängig davon, wie wir die Größe des Browserfensters oder der Monitorauflösung ändern, beträgt die Linienbreite immer die Hälfte der Blockbreite
.

Ein Beispiel für das Ändern von Farbe, Dicke und Breite horizontaler Linien.

Ändern Sie die Farbe, Dicke und Breite der horizontalen Linien.

Ergebnis im Browser

Ändern der Position horizontaler Linien

Wenn Sie die Breite einer horizontalen Linie ändern, wird deutlich, dass Browser sie immer in der Mitte platzieren. Wenn Sie seine Position ändern möchten, verwenden Sie einfach innen

Richten Sie das Attribut an den folgenden Werten aus:

  • center - Die Linie ist zentriert (Standardwert).
  • links - wird gegen die linke Kante gedrückt.
  • recht - gegen die rechte Kante gedrückt.

Ein Beispiel für das Ausrichten horizontaler Linien.

Ändern Sie die Position der horizontalen Linien.

Ergebnis im Browser

Wie entferne ich den Rand um die Linie?

Schauen Sie sich das allererste Beispiel dieses Tutorials an. Welche Farbe haben diese Linien Ihrer Meinung nach? Und hier ist es falsch. Sie sind transparent wie alle Seitenelemente, die keine Hintergrundfarbe haben! Glaubst du mir nicht? Schauen Sie sich dann ein Beispiel an, in dem wir die Farbe der Linien geändert haben. Beim ersten Mal haben wir die Farbe nicht festgelegt, sondern nur vergrößert. Ist diese Linie nicht transparent? Damit!

Jetzt werde ich erklären. Standardmäßig zeichnen Browser Rahmen um Linien, wodurch ein dreidimensionaler Effekt entsteht. Wenn wir also die Dicke der horizontalen Linien nicht erhöhen, zeigen uns die Browser nur diese Rahmen an, da die Dicke der Linie selbst 0 Pixel beträgt.

Um den Rand um die Linie zu entfernen, der häufig nur das Erscheinungsbild beeinträchtigt, wenden wir das Stilattribut erneut an. Und es ist so geschrieben:

Hausaufgaben.

  1. Erstellen Sie Artikel-, Abschnitts- und Unterabschnittsüberschriften. Zentrieren Sie sie alle.
  2. Stellen Sie die gesamte Seite für Überschriften auf Arial und Courier ein.
  3. Die Schriftgröße für die gesamte Seite beträgt 85% der Standardbrowsergröße. Und Titel haben 145%, 125% bzw. 110% der Schriftgröße auf der Seite.
  4. Schreiben Sie einen Absatz unter die erste Überschrift, ein langes Zitat unter die zweite und ein Gedicht unter die dritte. Und lassen Sie das Gedicht auf der Seite zentriert sein.
  5. Markieren Sie drei fett gedruckte Wörter in Ihrem Zitat.
  6. Zeichnen Sie unter der Überschrift des Artikels eine rote horizontale Linie mit drei Pixeln über die gesamte Breite der Seite.
  7. Zeichnen Sie oben und unten im Gedicht schwarze Linien mit einem Pixel. Die Breite der oberen Zeile sei ungefähr gleich der Breite des Verses und die untere Zeile halb so groß.
  8. Entfernen Sie unnötige Rahmen aus den Zeilen.

Grüße an alle Leser. In regelmäßigen Abständen stehen die Assistenten vor dem Problem, wie eine horizontale oder vertikale Linie mit HTML oder CSS erstellt werden kann. Das werde ich Ihnen heute sagen.

Zeilen in CSS

Es gibt verschiedene Möglichkeiten, Linien zu zeichnen. Eine solche Möglichkeit ist die Verwendung von CSS. Genauer gesagt mit Hilfe von Border. Nehmen wir ein Beispiel.

Und hier ist das Ergebnis.

Horizontale und vertikale Linie mit CSS.

Linien in CSS können mit der Border-Anweisung gezeichnet werden. Wenn Sie nur ein Rechteck mit einer festen Rahmenbreite benötigen, können Sie diesen Operator einfach verwenden und einen Wert festlegen. Zum Beispiel Rand: 5px fest # 000000; bedeutet, dass die Ränder des Blocks in Schwarz 5 Pixel breit sind.

Wenn Sie jedoch nicht alle, sondern nur einige Grenzen festlegen müssen, müssen Sie genau aufschreiben, welche Grenzen benötigt werden und welchen Wert sie jeweils haben. Dies sind die Operatoren:

  • border-top - Legt den Wert des oberen Rahmens fest
  • border-bottom - Legt den Wert des unteren Rahmens fest
  • border-left - Legt den Wert des linken Rahmens fest
  • border-right - Legt den Wert des rechten Rahmens fest.

Vertikale und horizontale Linie in HTML

Sie können auch Zeilen in HTML selbst erstellen. Dazu können Sie das hr-Tag verwenden.

In diesem Fall wird eine horizontale Linie mit einer Höhe von einem Pixel und voller Breite gezeichnet.

Mit diesem Tag können Sie jedoch einige Werte festlegen.

  • Breite - Legt den Wert der Linienbreite fest.
  • Farbe - Legt die Linienfarbe fest.
  • Ausrichten - Stellt die Ausrichtung nach links, in der Mitte und rechts ein
  • Größe - Legt die Linienbreite in Pixel fest.

Mit dem hr-Tag können Sie auch eine vertikale Linie festlegen. In diesem Fall müssen Sie jedoch erneut auf Stile zurückgreifen.

In diesem Fall wird eine vertikale Linie mit einer Höhe von 100 Pixel, einer Dicke von einem Pixel und einem Einzug von fünf Pixeln gezeichnet.

Fazit.

Nun wissen Sie, wie Sie eine vertikale und horizontale Linie festlegen können. Zeilen können sowohl auf regulären Websites mit HTML als auch auf einer Website mit einem CMS, z. B. WordPress, festgelegt werden. In diesem Fall müssen Sie jedoch in den HTML-Modus wechseln.

Wenn Sie weitere Fragen haben, stellen Sie diese in den Kommentaren.

© 2020 Mobil- und Computer-Gadgets