Comment définir le soulignement de la police en CSS : 1. Utilisez "text-decoration:underline;" pour définir le style de soulignement ; 2. Définissez le style de soulignement via l'attribut "border-bottom".
L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.
En CSS, vous pouvez utiliser l'attribut text-decoration ou l'attribut border-bottom pour définir le style de soulignement de la police.
1. Utilisez text-decoration:underline; pour définir le style de soulignement
L'attribut text-decoration de CSS est utilisé pour spécifier la décoration ajoutée au texte, et sa valeur d'attribut de soulignement peut définir une ligne sous le texte.
Syntaxe :
text-decoration:underline;
Exemple de code :
<!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>
Le soulignement ajouté par l'attribut CSS text-decoration est le style le plus simple, et il n'y a aucun moyen de définir un style spécial , tel que Le soulignement est défini sur une forme en pointillé. Examinons une autre façon d'ajouter un soulignement et vous pouvez définir différents styles de soulignement.
[Recommandé : "Tutoriel vidéo CSS"]
2 Utilisez l'attribut border-bottom pour définir le style de soulignement
La bordure-bottom. L'attribut CSS peut être Définir le style de la bordure inférieure de l'élément afin qu'une ligne puisse être ajoutée sous le texte.
Syntaxe :
border-bottom: width style color;
Paramètres :
largeur : Spécifie la largeur de la bordure inférieure.
style : Spécifie le style de la bordure inférieure.
color : Spécifie la couleur de la bordure inférieure.
Explication : L'attribut border-bottom peut réaliser différents styles de soulignement de texte en contrôlant l'épaisseur, la couleur et le style de la ligne.
Exemple de code :
<!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>
Vous pouvez directement copier le code et le tester localement !
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!