Heim > Artikel > Web-Frontend > So legen Sie die Unterstreichung der Schriftart in CSS fest
So legen Sie die Unterstreichung der Schriftart in CSS fest
- 藏色散人Original
- 2021-02-28 14:48:1221408Durchsuche
So legen Sie die Unterstreichung der Schriftart in CSS fest: 1. Verwenden Sie „text-decoration:underline;“, um den Unterstreichungsstil festzulegen. 2. Legen Sie den Unterstreichungsstil über das Attribut „border-bottom“ fest.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5- und CSS3-Version, Dell G3-Computer.
Sie können das text-decoration-Attribut oder das border-bottom-Attribut in CSS verwenden, um den Unterstreichungsstil für die Schriftart festzulegen.
1. Verwenden Sie text-decoration:underline;, um den Unterstreichungsstil festzulegen.
Das text-decoration-Attribut von CSS wird verwendet, um die dem Text hinzugefügte Dekoration anzugeben, und sein Unterstreichungsattributwert kann eine Linie unter dem Text definieren.
Syntax:
text-decoration:underline;
Codebeispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 文字下划线样式</title>
<style>
.demo span{
text-decoration:underline;
}
</style>
</head>
<body>
<p class="demo">这是一段测试文字，<span>php中文网</span>！</p>
</body>
</html>Die durch das CSS-Textdekorationsattribut hinzugefügte Unterstreichung ist der einfachste Stil, und es gibt keine Möglichkeit, einen speziellen Stil festzulegen, z. B. die Unterstreichung in eine gepunktete Form zu setzen. Schauen wir uns eine andere Möglichkeit zum Hinzufügen von Unterstreichungen an. Sie können verschiedene Unterstreichungsstile festlegen.
【Empfohlen: „CSS-Video-Tutorial“】
2. Verwenden Sie das Attribut „border-bottom“, um den Unterstreichungsstil festzulegen kann eine Zeile unter dem Text hinzufügen.
Syntax:
border-bottom: width style color;
Parameter:
width: Gibt die Breite des unteren Randes an.
Stil: Gibt den Stil des unteren Rahmens an.
Farbe: Gibt die Farbe des unteren Randes an.
Erklärung: Das Attribut „border-bottom“ kann verschiedene Textunterstreichungsstile realisieren, indem es die Dicke, Farbe und den Stil der Linie steuert.
Codebeispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 文字下划线样式</title>
<style>
.demo{
width: 400px;
height: 400px;
margin:100px auto;
}
.demo1 span{
border-bottom: 1px solid #000000;
}
.demo2 span{
border-bottom: 5px solid #0081EF;
}
.demo3 span{
border-bottom: 2px dashed #000000;
}
.demo4 span{
border-bottom: 2px dotted #000000;
}
.demo5 span{
border-bottom: 5px double #000000;
}
</style>
</head>
<body>
<div class="demo">
<p class="demo1">这是第1段测试文字，<span>php中文网</span>！</p>
<p class="demo2">这是第2段测试文字，<span>php中文网</span>！</p>
<p class="demo3">这是第3段测试文字，<span>php中文网</span>！</p>
<p class="demo4">这是第4段测试文字，<span>php中文网</span>！</p>
<p class="demo5">这是第5段测试文字，<span>php中文网</span>！</p>
</div>
</body>
</html>Sie können den Code direkt kopieren und lokal testen!
Das obige ist der detaillierte Inhalt vonSo legen Sie die Unterstreichung der Schriftart in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!