Heim > Artikel > Web-Frontend > HTML-Textdekoration
HTML-Textdekoration
- WBOYOriginal
- 2024-09-04 16:40:57417Durchsuche
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:
- Textdekoration: keine;
- text-decoration: overline;
- Textdekoration: durchgestrichen;
- text-decoration: underline;
Wie funktioniert Textdekoration in HTML?
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;
Beispiele für HTML-Textdekoration
Nachfolgend finden Sie Beispiele für die HTML-Textdekoration:
Beispiel #1 – Keine
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.
Beispiel #2 – Unterstreichen
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.
Beispiel #3 – Überstreichen
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.
Beispiel #4 – Line-through
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.
Beispiel #5
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.
Fazit
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!