Maison > Article > interface Web > Décoration de texte HTML
Décoration de texte HTML
- WBOYoriginal
- 2024-09-04 16:40:57452parcourir
Décoration de texte en HTML utilisée pour décorer le texte de différentes manières. text-decoration est la propriété utilisée pour la décoration du texte. La propriété text-decoration prend les valeurs de soulignement, de surlignement, de passage à la ligne et de surlignement pour décorer le texte de différentes manières.
Exemple en temps réel : Les valeurs de surlignement, de soulignement et de passage de la décoration de texte sont utilisées pour générer des captchas tout en confirmant que l'utilisateur connecté est un humain ou un robot. Parce que si les lignes au-dessus du texte ne peuvent pas être parfaitement reconnues par le robot.
Types :
- texte-décoration : aucune ;
- texte-décoration : surligne ;
- text-decoration : line-through ;
- texte-décoration : souligner ;
Comment fonctionne la décoration de texte en HTML ?
La propriété de décoration de texte fonctionne sur la base d'aucun, de surlignement, de passage en ligne et de soulignement
1. Aucun
Syntaxe :
text-decoration: none;
Explication : Cela ne donnera aucune décoration au texte. C'est comme un texte normal.
2. Surligner
Syntaxe :
text-decoration: overline;
Explication : Cela donnera une ligne au-dessus du texte avec une taille de 1px.
3. Passage en ligne
Syntaxe :
text-decoration: line-through;
Explication : Cela donnera la ligne à partir du milieu du texte avec une taille de 1px.
4. Souligner
Syntaxe :
text-decoration: underline;
Explication : Cela donnera une ligne au bas du texte avec une taille de 1px.
5. Cligner des yeux
Syntaxe :
text-decoration: blink;
Explication : Cela fera clignoter le texte avec différentes couleurs d'opacité de 0% à 100%.
Remarque : La fonctionnalité de clignotement du navigateur récent est obsolète. Maintenant, il n’est plus utilisé du tout.La propriété Text-decoration peut également créer un surlignement, un trait traversant, un soulignement avec différents styles autres que les styles par défaut comme pointillé, ondulé, solide, rainuré, etc., avec de la couleur. Vous pouvez voir les syntaxes ci-dessous.
Syntaxe :
text-decoration: underline dotted red;
Exemples de décoration de texte HTML
Voici les exemples de décoration de texte HTML :
Exemple n°1 – Aucun
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>
Sortie :
Explication : Comme vous pouvez le voir, text-decoration : aucun ne peut donner de décoration de ligne avec le texte du paragraphe.
Exemple n°2 – Souligner
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>
Sortie :
Explication : Comme vous pouvez le voir, text-decoration: underline donne la ligne en dessous du texte.
Exemple n°3 – Surlignage
Décoration de texte : exemple de surligne :
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>
Sortie :
Explication : Comme vous pouvez le voir, text-decoration: overline donne une ligne au-dessus du texte.
Exemple n°4 – Line-through
Décoration de texte : exemple de passage en ligne :
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>
Sortie :
Explication : Comme vous pouvez le voir, text-decoration: line-through donne une ligne à partir du milieu du texte.
Exemple #5
Exemple de décoration de texte avec un trait plein, double, ondulé avec un soulignement, un trait traversant, un surlignement :
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>
Sortie :
Explication : Comme vous pouvez le voir, le premier paragraphe a un surlignement solide, le deuxième paragraphe a un double trait et le troisième paragraphe avec des styles de décoration de texte soulignés ondulés.
Conclusion
La décoration du texte peut être stylisée par des valeurs de propriété de surlignement, de soulignement, de passage en ligne ainsi que différents styles de ligne avec n'importe quelle couleur.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!