Wie kann man eine horizontale Linie stylen
Eine horizontale Regel wird im Allgemeinen als Inhalts- oder Abschnittsteiler verwendet. Als horizontale Regel wird das Element <hr> verwendet. Ursprünglich wurde das Element <hr> mithilfe von Attributen gestylt. In HTML5 teilt das Element <hr> dem Browser mit, dass es einen thematischen Bruch auf Absatzebene gibt. Lassen Sie uns sehen, wie man das Element <hr> mit CSS stylen kann:
Ändern Sie die Größe und Farbe einer horizontalen Regel
Das Element <hr> wird mit CSS-Regeln anstelle von Attributen gestaltet. Ändern Sie width der horizontalen Linie, indem Sie die Eigenschaft width einstellen und dann mit der Eigenschaft margin zentrieren.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
hr {
width: 70%;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h1>Horizontal zentrierte Linie</h1>
<hr />
</body>
</html>Wenn Sie die Dicke oder Höhe Ihrer horizontalen Linie ändern möchten, fügen Sie die Eigenschaft height zu Ihrem <hr> Stil. In diesem Fall können Sie auch background-color für Ihre dicke horizontale Linie einstellen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
hr {
width: 100%;
height: 30px;
mar
gin-left: auto;
margin-right: auto;
background-color: #b7d0e2;
}
</style>
</head>
<body>
<h1>Horizontale Linie mit Height und Background Color</h1>
<hr />
</body>
</html>Fügen Sie border:none hinzu, um den Rand Ihrer dicken horizontalen Linie zu entfernen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
hr {
width: 100%;
height: 30px;
margin-left: auto;
margin-right: auto;
background-color: #b7d0e2;
border: 0 none;
}
</style>
</head>
<body>
<h1>Horizontale Linie mit Height und Background Color</h1>
<hr />
</body>
</html>Sie können die Farbe Ihrer horizontalen Linie ändern, indem Sie die Eigenschaft border-top einstellen und die Farbe definieren. Folgen Sie dem Beispiel, um die Ergebnisse zu sehen:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
hr {
border-top: 5px solid #095484;
}
</style>
</head>
<body>
<h1>Horizontale Linie mit Height und Background Color</h1>
<hr />
</body>
</html>Zusätzlicher Style für horizontale Linien
Gehen Sie weiter mit horizontalen Linien, indem Sie dem Rand Ihres Elements <hr> verschiedene Stile geben. Schauen Sie sich den Beispielcode an, um zu sehen, welche atemberaubenden horizontalen Linien dargestellt werden.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.hr1 {
border: 0;
height: 3px;
background: #095484;
background-image: linear-gradient(to right, #ccc, #095484, #ccc);
}
.hr2 {
border: 0;
height: 3px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(9, 84, 132), rgba(0, 0, 0, 0));
}
.hr3 {
height: 15px;
border: 0;
box-shadow: inset 0 12px 12px -12px rgba(9, 84, 132);
}
.hr4 {
border-top: 3px double #095484;
}
.hr5 {
background-color: #fff;
border-top: 2px dashed #095484;
}
.hr6 {
border-top: 3px dotted #095484;
}
.hr7 {
height: 30px;
border-style: solid;
border-color: #095484;
border-width: 1px 0 0 0;
border-radius: 20px;
}
.hr8 {
display: block;
content: "";
height: 30px;
margin-top: -31px;
border-style: solid;
border-color: #095484;
border-width: 0 0 1px 0;
border-radius: 20px;
}
</style>
</head>
<body>
<h3>Gradiente Horizontale Linie</h3>
<hr class="hr1" />
<h3>
Gradient Transparent
<h3>
<hr class="hr2" />
<h3>
Einseitig gerichteter Schlagschatten
<h3>
<hr class="hr3" />
<h3>Doppelt</h3>
<hr class="hr4" />
<h3>Gestrichelt</h3>
<hr class="hr5" />
<h3>Gepunktet</h3>
<hr class=""hr6" />
<h3>Abgerundete Ecken</h3>
<hr class="hr7" />
<hr class="hr8" />
</body>
</html>Verwenden Sie das Hintergrundbild als horizontale Regel
Wenn Sie ein Bild oder Ornament als horizontale Regel für Ihre Website festlegen möchten, können Sie mithilfe von der CSS Eigenschaft background zu Ihrer horizontalen Regel hinzufügen. Stellen Sie auch height auf die gleiche Höhe wie Ihr Bild (oder den gewünschten Teil des Bildes) und border: none ein, damit Ihr Bild wie eine horizontale Linie aussieht.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.hr1 {
height: 25px;
background: url(/uploads/media/default/0001/01/e7a97bd9b2d25886cc7b9115de83b6b28b73b90b.jpeg) no-repeat center;
border: none;
}
.hr2 {
height: 25px;
background: url(/uploads/media/default/0001/01/295e26d0bdf4d635c8887a6b0f37b61d7c69c5fc.png) no-repeat center;
border: none;
}
.hr3 {
height: 25px;
background: url(/uploads/media/default/0001/01/09a69b0ad1525926a508356955843cf84306fd85.png) no-repeat center;
border: none;
}
.hr4 {
height: 20px;
background: url(/uploads/media/default/0001/01/12fbe0b5b3d06c7e379d646068faa12f70452638.png) no-repeat center;
border: none;
}
.hr5 {
height: 50px;
background: url(/uploads/media/default/0001/01/7d5f2a204567da4df1c1d7e5017d7b510ef56619.jpeg) no-repeat center;
border: none;
}
.hr6 {
height: 70px;
background: url(/uploads/media/default/0001/01/fb69fe21cc880d96b3267efaa88cd72288a77fef.png) no-repeat center;
border: none;
}
</style>
</head>
<body>
<h1>Horizontale Linien mit Bildern</h1>
<hr class="hr1" />
<br />
<hr class="hr2" />
<br />
<hr class="hr3" />
<br />
<hr class="hr4" />
<br />
<hr class="hr5" />
<hr class="hr6" />
</body>
</html>