Um Ihren Websites horizontale Linien im Trennstil hinzuzufügen, können Sie unter anderem Bilddateien dieser Linien zu. hinzufügen Ihre Seite, aber dazu müsste Ihr Browser diese Dateien abrufen und laden, was sich negativ auswirken könnte negative auf Website-Performance. Sie könnten auch die CSS Grenzeigenschaft zum Hinzufügen Grenzen die als Linien entweder am oberen oder unteren Rand eines Elements fungieren und effektiv Ihre Trennlinie erstellen.
Oder – noch besser – nutzen Sie die HTML Element für die horizontale Regel.
Das horizontale Regelelement
Das standardmäßige Aussehen von horizontalen Lineallinien ist nicht ideal. Um sie schöner aussehen zu lassen, fügen Sie CSS hinzu, um das visuelle Erscheinungsbild dieser Elemente an das Aussehen Ihrer Website anzupassen.
Ein einfaches HR-Tag zeigt die Art und Weise an, wie der Browser es anzeigen möchte. Moderne Browser zeigen typischerweise unstyled HR-Tags mit einer Breite von 100 Prozent, einer Höhe von 2 Pixeln und einem 3D-Rahmen in Schwarz an, um die Linie zu erstellen.
Breite und Höhe sind browserübergreifend konsistent
Die einzigen Stile, die in allen Webbrowsern konsistent sind, sind die Breite und Stile. Diese legen fest, wie groß die Linie sein wird. Wenn Sie Breite und Höhe nicht definieren, beträgt die Standardbreite 100 Prozent und die Standardhöhe 2 Pixel.
In diesem Beispiel beträgt die Breite 50 Prozent des übergeordneten Elements (beachten Sie, dass diese Beispiele unten alle Inline-Stile enthalten. In einer Produktionsumgebung würden diese Stile tatsächlich in ein externes Stylesheet geschrieben, um die Verwaltung auf allen Ihren Seiten zu vereinfachen:
style="width: 50%;">
Und in diesem Beispiel beträgt die Höhe 2em:
style="höhe: 2em;">
Das Ändern der Grenzen kann eine Herausforderung sein
In modernen Browsern baut der Browser die Linie auf, indem er den Rahmen anpasst. Wenn Sie also den Rahmen mit der style-Eigenschaft entfernen, verschwindet die Linie auf der Seite. Wie Sie sehen können (na ja, Sie werden nichts sehen, da die Linien unsichtbar sind) in diesem Beispiel:
style="border: none;">
Das Anpassen von Rahmengröße, -farbe und -stil lässt die Linie anders aussehen und hat in allen modernen Browsern den gleichen Effekt. In dieser Demonstration ist der Rahmen beispielsweise rot, gestrichelt und 1 px breit:
style="border: 1px gestrichelte #000;">
Machen Sie eine dekorative Linie mit einem Hintergrundbild
Definieren Sie anstelle einer Farbe ein Hintergrundbild für Ihre horizontale Linie, damit es genau so aussieht, wie Sie es möchten, aber dennoch semantisch in Ihrem Markup angezeigt werden. In diesem Beispiel haben wir ein Bild mit drei Wellenlinien verwendet. Indem Sie es als Hintergrundbild ohne Wiederholung erzeugt es eine Unterbrechung im Inhalt, die fast wie in Büchern aussieht:
style="Höhe: 20px; Hintergrund: #fff URL (aa010307.gif) Scroll-Center ohne Wiederholung; Rand: keiner;">
Transformation von HR-Elementen
Mit CSS3 können Sie Ihre Zeilen auch interessanter gestalten. Das HR-Element ist traditionell ein horizontal line, aber mit der CSS-Transformationseigenschaft können Sie ihr Aussehen ändern. Eine bevorzugte Transformation des HR-Elements ist die Änderung der Rotation.
Drehen Sie Ihr HR-Element so, dass es nur leicht diagonal ist:
Stunde {
-moz-transform: drehen (10deg);
-webkit-transform: drehen (10deg);
-o-transformieren: drehen (10deg);
-ms-transform: drehen (10deg);
transformieren: drehen (10deg);
}
Oder Sie können es so drehen, dass es vollständig vertikal ist:
Stunde {
-moz-transform: drehen (90deg);
-webkit-transform: drehen (90deg);
-o-transformieren: drehen (90deg);
-ms-transform: drehen (90deg);
transformieren: drehen (90deg);
}
Bei dieser Technik wird der HR basierend auf seiner aktuellen Position im Dokument gedreht, sodass Sie möglicherweise die Positionierung anpassen müssen, um ihn an die gewünschte Position zu bringen. Es wird nicht empfohlen, dies zu verwenden, um einem Design vertikale Linien hinzuzufügen, aber es ist ein interessanter Effekt.
Eine andere Möglichkeit, Zeilen auf Ihren Seiten zu erhalten
Eine Sache, die manche Leute tun, anstatt das HR-Element zu verwenden, ist, sich auf die Grenzen anderer Elemente zu verlassen. Aber manchmal ist ein HR viel bequemer und einfacher zu bedienen, als zu versuchen, Grenzen einzurichten. Die Box-Modell-Probleme einiger Browser können das Einrichten eines Rahmens noch schwieriger machen.