Heim > Artikel > Web-Frontend > So setzen Sie Unterstreichungen in CSS
So setzen Sie Unterstreichungen in CSS
- 藏色散人Original
- 2021-07-10 14:53:5875431Durchsuche
So legen Sie Unterstreichungen in CSS fest: 1. Verwenden Sie „text-decoration:underline;“, um den Unterstreichungsstil festzulegen. 2. Verwenden Sie das Attribut „border-bottom“, um den Unterstreichungsstil festzulegen.
Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, DELL G3-Computer
So legen Sie Unterstreichungen in CSS fest
In CSS können Sie das Textdekorationsattribut oder das Border-Bottom-Attribut verwenden um den Schriftstil zu unterstreichen.
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>HTML中文网</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.
2. Verwenden Sie das Attribut „border-bottom“, um den Unterstreichungsstil festzulegen.
Das Attribut „border-bottom“ von CSS kann den Stil des unteren Rahmens des Elements festlegen, sodass Sie eine Linie unter dem Text hinzufügen können.
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>HTML中文网</span>！</p>
<p class="demo2">这是第2段测试文字，<span>HTML中文网</span>！</p>
<p class="demo3">这是第3段测试文字，<span>HTML中文网</span>！</p>
<p class="demo4">这是第4段测试文字，<span>HTML中文网</span>！</p>
<p class="demo5">这是第5段测试文字，<span>HTML中文网</span>！</p>
</div>
</body>
</html>Empfohlenes Lernen: „CSS-Video-Tutorial“
Das obige ist der detaillierte Inhalt vonSo setzen Sie Unterstreichungen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!