Textdekoration in HTML, die zum Verzieren des Textes auf unterschiedliche Weise verwendet wird. text-decoration ist die Eigenschaft, die für die Textdekoration verwendet wird. Die Textdekorationseigenschaft akzeptiert Unterstreichungs-, Überstreichungs-, Durchstreichungs- und Unterstreichungs-Überstreichungswerte, um den Text auf unterschiedliche Weise zu dekorieren.
Echtzeit-Beispiel: Überstrichene, unterstrichene und durchgestrichene Textdekorationswerte werden verwendet, um Captchas zu generieren und gleichzeitig zu bestätigen, dass es sich beim Anmeldebenutzer um einen Menschen oder einen Roboter handelt. Denn wenn Zeilen über dem Text nicht perfekt vom Roboter erkannt werden können.
Typen:
Die Textdekorationseigenschaft funktioniert basierend auf „Keine“, „Überstreichen“, „Durchgestrichen“ und „Unterstreichen“
1. Keine
Syntax:
text-decoration: none;
Erklärung: Der Text wird dadurch nicht verschönert. Es ist wie ein normaler Text.
2. Überstreichen
Syntax:
text-decoration: overline;
Erklärung:Es wird eine Zeile über dem Text mit einer Größe von 1 Pixel angezeigt.
3. Line-through
Syntax:
text-decoration: line-through;
Erklärung:Es wird die Zeile von der Mitte des Textes mit einer Größe von 1 Pixel angezeigt.
4. Unterstreichen
Syntax:
text-decoration: underline;
Erklärung: Am Ende des Textes wird eine Zeile mit einer Größe von 1 Pixel angezeigt.
5. Blinzeln
Syntax:
text-decoration: blink;
Erklärung: Dadurch blinkt der Text mit verschiedenen Farben von 0 % bis 100 % Deckkraft.
Hinweis: Die Blinkfunktion des aktuellen Browsers ist veraltet. Jetzt wird es überhaupt nicht mehr verwendet.Die Textdekorationseigenschaft kann auch Überstreichungen, Durchstriche und Unterstreichungen mit anderen Stilen als den Standardstilen wie gepunktet, wellig, einfarbig, gerillt usw. mit Farbe erstellen. Sie können die folgenden Syntaxen sehen.
Syntax:
text-decoration: underline dotted red;
Nachfolgend finden Sie Beispiele für die HTML-Textdekoration:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.none {
text-decoration: none;
font-size:20px;
}
}
</style>
</head>
<body>
<h1>Demo for text-decoration:none</h1>
<p class="none">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in the development of back end features in Spring MVC with Hibernate. Developed importing models and logic in the Office Note app to store spreadsheet data and deployed
to host.
</p>
</body>
</html>Ausgabe:
Erklärung: Wie Sie sehen können, kann text-decoration: none keine Zeilendekoration mit dem Absatztext versehen.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.underline {
text-decoration: underline;
font-size:20px;
}
}
</style>
</head>
<body>
<h1>Demo for text-decoration:underline</h1>
<p class="underline">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
</body>
</html>Ausgabe:
Erklärung: Wie Sie sehen können, gibt text-decoration: underline eine Zeile unterhalb des Textes an.
Textdekoration: Overline-Beispiel:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.overline{
text-decoration: overline;
font-size:20px;
}
}
</style>
</head>
<body>
<h1>Demo for text-decoration:overline</h1>
<p class="overline">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
</body>
</html>Ausgabe:
Erklärung: Wie Sie sehen können, ergibt text-decoration: overline eine Linie über dem Text.
Textdekoration:Line-Through-Beispiel:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.through {
text-decoration: line-through;
font-size:20px;
}
}
</style>
</head>
<body>
<h1>Demo for text-decoration:line-through</h1>
<p class="through">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
</body>
</html>Ausgabe:
Erklärung: Wie Sie sehen können, ergibt text-decoration: line-through eine Linie ab der Mitte des Textes.
Textdekoration mit Vollton, doppelt, wellig mit Unterstreichung, Durchstreichung, Überstreichung, Beispiel:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.p1 {
text-decoration:solid overline brown;
font-size:18px;
}
.p2 {
text-decoration:double line-through blue;
font-size:18px;
}
.p3 {
text-decoration:wavy underline red;
font-size:18px;
}
}
</style>
</head>
<body>
<h1>Demo for text-decoration:solid overline brown</h1>
<p class="p1">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
<h1>Demo for text-decoration:double line-through blue</h1>
<p class="p2">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
<h1>Demo for text-decoration:wavy underline red</h1>
<p class="p3">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
</body>
</html>Ausgabe:
Erklärung: Wie Sie sehen können, hat der erste Absatz eine durchgezogene Überstreichung, der zweite Absatz ist doppelt durchgestrichen und der dritte Absatz hat wellenförmige Unterstreichungstextdekorationsstile.
Textdekoration kann durch Überstreichungs-, Unterstreichungs-, Durchstreichungs-Eigenschaftswerte und auch verschiedene Linienstile mit jeder Farbe gestaltet werden.
Das obige ist der detaillierte Inhalt vonHTML-Textdekoration. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
