Heim > Artikel > Web-Frontend > So setzen Sie Unterstreichungen in HTML
So setzen Sie Unterstreichungen in HTML
- 藏色散人Original
- 2021-06-03 10:17:0161456Durchsuche
So legen Sie Unterstreichungen in HTML fest: 1. Unterstreichen Sie den Text mit dem Attribut „text-decoration“. 2. Legen Sie die Unterstreichung des Felds mit „border-bottom“ fest. 3. Simulieren Sie die Unterstreichung mit „linear-gradient()“; .
Die Betriebsumgebung dieses Artikels: Windows 7-System, HTML5-Version, Dell G3-Computer.
Mehrere Implementierungslösungen für Unterstreichungen in CSS
Wenn Sie Stile für Text oder ein bestimmtes Layoutfeld schreiben, können Sie Unterstreichungen verwenden, um diese besser oder auffälliger aussehen zu lassen.
Textunterstreichung
Es ist eigentlich relativ einfach, Text zu unterstreichen
Textdekorationsattribut
Mit diesem Attribut können Sie bestimmte Effekte auf Text festlegen, z. B. Unterstreichungen. Wenn das Nachkommenelement keine eigenen Dekorationen hat, „erweitern“ sich die auf dem Vorgängerelement festgelegten Dekorationen auf die Nachkommenelemente. Benutzeragenten müssen Blinken nicht unterstützen.
Einfach ausgedrückt kann dieses Attribut dekorative Effekte für Text festlegen, wie z. B. Durchstreichen, Unterstreichen usw.
Die am häufigsten verwendete Methode besteht darin, den standardmäßigen Unterstreichungsstil des a-Tags zu entfernen.
Beispiel:
<html>
<head>
<style type="text/css">
h1 {
text-decoration: overline
}
h2 {
text-decoration: line-through
}
h3 {
text-decoration: underline
}
h4 {
text-decoration: blink
}
a {
text-decoration: none
}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<p>
<a href="http://www.w3school.com.cn/index.html">这是一个链接</a>
</p>
</body>
</html>
Beispiel 1
(Die Farbe der Textänderung kann durch Farbe eingestellt werden)
Box-Unterstreichung
border-bottom
Das Abkürzungsattribut „border-bottom“ legt alle unteren Randattribute fest eine Aussage.
Die einstellbaren Attribute sind (in der Reihenfolge): border-bottom-width, border-bottom-style und border-bottom-color
border-bottom kann Unterstreichungen simulieren, indem der untere Rand des Felds festgelegt wird.
Beispiel:
border-bottom: 1px solid #dbdbdb; border-top:0px; border-left:0px; border-right:0px;
Beispiel 2
linear-gradient()
linear-gradient()-Funktion wird verwendet, um ein „Bild“ eines linearen Farbverlaufs zu erstellen.
Um einen linearen Farbverlauf zu erstellen, müssen Sie einen Startpunkt und eine Richtung (angegeben als Winkel) des Farbverlaufseffekts festlegen. Sie müssen auch die Endfarbe definieren. Die Stoppfarbe ist der sanfte Übergang, den Gecko erzeugen soll. Sie müssen mindestens zwei angeben. Sie können jedoch auch weitere Farben angeben, um komplexere Verlaufseffekte zu erzielen.
Diese CSS-Funktion ist nicht sehr verbreitet. Ihre Funktion besteht darin, ein Bild zu erstellen.
Verwenden Sie die Verlaufsfunktion, um eine Unterstreichung zu simulieren
Tatsächlich legen Sie das Hintergrundbild fest und legen dann die Breite und Höhe fest, damit es wie eine Unterstreichung aussieht.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.test::after {
content: "";
display: block;
background: linear-gradient(to right, #188eee, #999);
width: 100%;
height: 1px;
}
</style>
</head>
<body>
<div class='test'>
<p class='box'>内容</p>
</div>
</body>
</html>
Beispiel 3
Die mit dieser Methode erstellte Unterstreichung ist am anpassbarsten.
Sie können schöne Unterstreichungen zeichnen und sogar Animationen definieren~
[Lernempfehlung: HTML-Video-Tutorial]
Das obige ist der detaillierte Inhalt vonSo setzen Sie Unterstreichungen in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!