So setzen Sie Unterstreichungen in HTML-HTML-Tutorial-php.cn

So setzen Sie Unterstreichungen in HTML

藏色散人

Freigeben： 2023-01-06 11:16:17

Original

61484 Leute haben es durchsucht

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()“; .

So setzen Sie Unterstreichungen in HTML

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>

Nach dem Login kopieren

So setzen Sie Unterstreichungen in 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;

Nach dem Login kopieren

So setzen Sie Unterstreichungen in HTML

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=&#39;test&#39;>
<p class=&#39;box&#39;>内容</p>
</div>
</body>
</html>

Nach dem Login kopieren

So setzen Sie Unterstreichungen in 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!