So ändern Sie die Unterstreichungsfarbe in HTML-HTML-Tutorial-php.cn

So ändern Sie die Unterstreichungsfarbe in HTML

醉折花枝作酒筹

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

Original

21464 Leute haben es durchsucht

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.

So ändern Sie die Unterstreichungsfarbe in HTML

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>

Nach dem Login kopieren

Effekt:

So ändern Sie die Unterstreichungsfarbe in HTML

● 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>

Nach dem Login kopieren

Effekt:

So ändern Sie die Unterstreichungsfarbe in HTML

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!