Heim >Web-Frontend >HTML-Tutorial >So ändern Sie die Unterstreichungsfarbe in HTML
Methode: 1. Legen Sie den Stil „text-decoration:underline;color:color value“ für das Element fest. 2. Mit dem Attribut „border-bottom“ müssen Sie nur den Stil „border-bottom: size style color“ festlegen zum Element.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Es gibt zwei Methoden
● Die erste besteht darin, der Beschriftung ein text-decoration:underline-Attribut hinzuzufügen. Um die Unterstreichungsfarbe festzulegen, müssen Sie das Farbattribut des Elements festlegen und Unterstreichungsfarbe sind gleich und können nicht individuell gesteuert werden.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.css-00F {
text-decoration:underline;
color: #090;
}
</style>
</head>
<body>
<p>
css实践之文字下划线颜色-<span class="css-00F">我的下划线与文字为绿色</span>
</p>
</body>
</html>Effekt:
● Die zweite besteht darin, dem Etikett einen unteren Rand hinzuzufügen: border-bottom: 1px einfarbig rot. Wenn Sie eine Lücke zum Text haben möchten, verwenden Sie einfach den Abstand -bottom-Attribut! Der zweite Stil ist individuell steuerbar!
(Empfohlenes Lernen: CSS-Video-Tutorial)
Wenn der Textunterstreichungsstil geändert werden muss, verwenden Sie den unteren Randstil „css border-bottom“, um den Effekt des Ersetzens des Unterstreichungsstils „text-decoration“ flexibel zu erzielen Rahmenfarbe für den Text, Breite des unteren Randes, gestrichelte Linie oder durchgezogene Linie des unteren Randes und andere Implementierungen von CSS-Stilsteuerungen erfordern verschiedene Unterstreichungseffekte.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.css-F00 {
border-bottom: 1px solid #f00;
}
.css-00F {
border-bottom: 1px solid #00f;
color: #090;
}
.css-333 {
border-bottom: 1px solid #333;
}
</style>
</head>
<body>
<p>css实践之文字下划线颜色-<span class="css-F00">我的下划线实现为红色</span></p>
<p>css实践之文字下划线颜色-<span class="css-00F">我的下划线实现为蓝色，文字为绿色</span></p>
<p>css实践之文字下划线颜色-<span class="css-333">我的下划线实现为黑色</span></p>
</body>
</html>Effekt:
Empfohlenes Lernen: HTML-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo ändern Sie die Unterstreichungsfarbe in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!