Passen Sie die Dicke des HR-Tags in HTML an

  2. How-To's
  3. HTML Howtos
  4. Passen Sie die Dicke des HR-Tags in HTML …
Aimen Fatima 20 Juni 2023
HTML HTML Tag
  1. das hr-Tag in HTML
  2. Fügen Sie die horizontale Linie in HTML ein
  3. Passen Sie die horizontale Linie in HTML an
Passen Sie die Dicke des HR-Tags in HTML an

Dieser Artikel erklärt das <hr>-Tag in HTML. Wir erklären auch die Attribute des <hr>-Tags und seine Anpassung, d.h. Änderung der Dicke, Farbe und Deckkraft in CSS.

Wir demonstrieren dies anhand der Erstellung eines HTML-Projekts und der Implementierung des <hr>-Tags.

das hr-Tag in HTML

Das <hr>-Tag in HTML ermöglicht es Ihnen, einen thematischen Bruch oder eine horizontale Linie hinzuzufügen, um Dokumentteile zu trennen oder zu teilen.

Zur Anpassung ist entsprechendes CSS erforderlich. Es ist kein End-Tag erforderlich. Seine grundlegende Syntax lautet wie folgt:

<hr property: value;> ...

Attribute:

  1. align: Dieses Attribut kann die horizontale Linie auf der Seite ausrichten. Left, center und right sind mögliche Werte für die Eigenschaft align.
  2. noshade: Legt fest, dass die Linie keinen Schattierungseffekt hat.
  3. Größe: Gibt die Höhe der horizontalen Linie an.
  4. Breite: Gibt die Breite der horizontalen Linie an.
  5. Farbe: Gibt die Farbe einer horizontalen Linie an.

ein praktisches Beispiel zum Erlernen der hr-Tag-Funktionalitäten

Lassen Sie uns ein Beispiel-HTML-Projekt erstellen, um das <hr>-Tag zu implementieren. Öffnen Sie einen beliebigen HTML-Editor, der von Ihrem Betriebssystem unterstützt wird, z. B. Notepad/Notepad++ (PC) oder TextEdit (Mac).

Schreiben Sie den folgenden einfachen HTML-Code in den Editor, speichern Sie die Datei als Dateiname.html und öffnen Sie die gespeicherte Datei in einem beliebigen unterstützten Webbrowser.

<!DOCTYPE html>
<html>
    <body>
        <center>
            <h1>Sample Task to Practice hr Tag</h1>
            <p>Paragraph to split.</p>
        </center>
    </body>
</html>

Ausgang:

Fügen Sie die horizontale Linie in HTML ein

Setzen Sie einen horizontalen Umbruch zwischen Überschrift und Absatz, indem Sie in der Quelldatei das Tag <hr> einfügen.

Kopieren Sie das folgende Code-Snippet in die oben erstellte HTML-Datei.

<!DOCTYPE html>
<html>
    <body>
        <center>
            <h1>Sample Task to Practice hr Tag</h1>
            <hr>
            <p>Paragraph to split.</p>
        </center>
    </body>
</html>

Ausgang:

Zwischen Überschrift und Absatz wird eine horizontale Linie angezeigt. Diese Leiste hat Standardwerte für Farbe, Größe, Breite und Ausrichtung.

Passen Sie die horizontale Linie in HTML an

Die Attribute (align, color, size, width, noshade) können je nach gewünschter Ausgabe angepasst werden. CSS muss verwendet werden, um das Erscheinungsbild der horizontalen Linie im Dokument zu ändern.

Die Höheneigenschaft von <hr> gibt die Dicke des Balkens an. Die Sichtbarkeit des Balkens kann mit dem opacity-Attribut eingestellt werden.

Möchte jemand beispielsweise einen Balken, der im Dokument nicht sehr auffällig ist, muss der Opazitätswert kleiner als 1 sein.

die Dicke der horizontalen Linie

Die CSS-Eigenschaft height wird verwendet, um die Dicke der horizontalen Linie anzugeben. Der Mindestwert ist 1px für height.

Es folgt das Code-Snippet des CSS-Stylesheets.

hr {
        position: relative;
        top: 10px;
        border: none;
        height: 1px;
        background: green;
        margin-bottom: 30px;
        width: 30em;
    }

Das Attribut top gibt den Abstand zwischen der horizontalen Linie und dem oberen Rand des Dokuments an. Background in CSS ist die Alternative zum HTML-Attribut color.

Sie gibt die Farbe des Balkens an. Der vollständige Code zum Demonstrieren dieser Eigenschaften lautet wie folgt:

<!DOCTYPE html>
<html>
<head>

    <title> Document </title>
    <style>

    hr.class1 {
        position: relative;
        top: 10px;
        border: none;
        height: 1px;
        background: red;
        margin-bottom: 30px;
        width: 30em;
    }

    hr.class2{
        position: relative;
        border: none;
        height: 10px;
        background: green;
        width: 30em;
    }

    </style>
</head>
<body>
<center>
<h1>Sample Task to Practice hr Tag</h1>

<hr class=class1>
<hr class=class2>

<p>Paragraph to split.</p>
</center>
</body>
</html>

Ausgang:

die Opazität der horizontalen Regel

Das Attribut opacity in CSS gibt die Transparenz der horizontalen Linie an. Der Opazitätswert 1 zeigt keine Transparenz, während der Opazitätswert 0 vollständige Transparenz anzeigt.

Es folgt die Syntax des Attributs opacity.

hr
{
    background-color: gray;
    opacity: 0.5;

}

Beispiel:

<!DOCTYPE html>
<html>
<head>

    <title> Document </title>
    <style>

    hr.class1 {
        position: relative;
        top: 10px;
        border: none;
        height: 1px;
        background: red;
        margin-bottom: 30px;
        width: 30em;
    }

    hr.class2{
        position: relative;
        border: none;
        height: 10px;
        background: green;
        margin-bottom: 30px;
        width: 30em;
    }
    hr.class3{
        position: relative;
        border: none;
        height: 10px;
        background: green;
        width: 30em;
        opacity: .25;
    }

    </style>
</head>
<body>
<center>
<h1>Sample Task to Practice hr Tag</h1>

<hr class=class1>
<hr class=class2>
<hr class=class3>

<p>Paragraph to split.</p>
</center>
</body>
</html>

Ausgang:

Verwandter Artikel - HTML Tag