Wie füge ich einen Textunterstreichungsstil in CSS hinzu? (Detaillierte Code-Erklärung)-CSS-Tutorial-php.cn

Wie füge ich einen Textunterstreichungsstil in CSS hinzu? (Detaillierte Code-Erklärung)

青灯夜游

Freigeben： 2018-10-26 10:21:49

Original

41254 Leute haben es durchsucht

Wie füge ich einen Textunterstreichungsstil in CSS hinzu? In diesem Artikel erfahren Sie, wie Sie in CSS einen Textunterstreichungsstil hinzufügen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Lassen Sie uns zunächst einen Blick auf Welche Methoden zum Hinzufügen von Textunterstreichungsstilen in CSS gibt.

1. Das CSS-Attribut „text-decoration“ fügt einen Textunterstreichungsstil hinzu

2. Das CSS-Attribut „border-bottom“ fügt einen Textunterstreichungsstil hinzu

Nachfolgend stellen wir Ihnen Folgendes zur Verfügung Ein einfaches Codebeispiel. Lassen Sie uns die Implementierungsmethoden dieser beiden CSS zum Hinzufügen eines Textunterstreichungsstils im Detail vorstellen!

CSS-Textdekorationsattribut fügt einfachen Textunterstreichungsstil hinzu

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>

Nach dem Login kopieren

Rendering:

Wie füge ich einen Textunterstreichungsstil in CSS hinzu? (Detaillierte Code-Erklärung)

Die durch das CSS-Attribut text-decoration hinzugefügte Unterstreichung ist der einfachste Stil und es gibt keine Möglichkeit, einen speziellen Stil festzulegen, z. B. die Unterstreichung auf eine gepunktete Form festzulegen. Schauen wir uns eine andere Möglichkeit zum Hinzufügen von Unterstreichungen an. Sie können verschiedene Unterstreichungsstile festlegen.

CSS-Border-Bottom-Attribut fügt Textunterstreichungsstil hinzu

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>

Nach dem Login kopieren

Rendering:

Wie füge ich einen Textunterstreichungsstil in CSS hinzu? (Detaillierte Code-Erklärung)

Das Attribut „border-bottom“ kann verschiedene Textunterstreichungsstile realisieren, indem es die Dicke, Farbe und den Stil der Linie steuert.

Zusammenfassung: Das Obige ist der gesamte Inhalt des Hinzufügens von Textunterstreichungsstilen mit Textdekorationsattributen und Randbodenattributen. Sie können es selbst ausprobieren, um Ihr Verständnis zu vertiefen und je nach Situation verschiedene Methoden anzuwenden auf Ihre Bedürfnisse. Ich hoffe, dass es für das Lernen aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter: CSS-Basis-Video-Tutorial , HTML-Video-Tutorial , Bootstrap-Video-Tutorial !

Das obige ist der detaillierte Inhalt vonWie füge ich einen Textunterstreichungsstil in CSS hinzu? (Detaillierte Code-Erklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!