Maison >interface Web >tutoriel HTML >Comment changer la couleur de soulignement en HTML
Méthode : 1. Définissez le style "text-decoration: underline; color: color value" sur l'élément ; 2. Utilisez l'attribut border-bottom, définissez simplement le "border-bottom: size style color" à l'élément "Le style suffit.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
Il existe deux méthodes
● La première consiste à ajouter un attribut text-decoration:underline à l'étiquette. Pour définir la couleur du soulignement, vous devez définir la couleur. attribut de l'élément. L'inconvénient est que la couleur du texte et la couleur de soulignement sont les mêmes et ne peuvent pas être contrôlées séparément.
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.css-00F {
text-decoration:underline;
color: #090;
}
</style>
</head>
<body>
<p>
css实践之文字下划线颜色-<span class="css-00F">我的下划线与文字为绿色</span>
</p>
</body>
</html>Effet :
● La seconde consiste à ajouter une bordure inférieure à l'étiquette : border-bottom : 1px rouge uni, si vous voulez avoir un espace entre celui-ci et le texte, utilisez simplement l'attribut padding-bottom ! Le deuxième style peut être contrôlé individuellement !
(Apprentissage recommandé : didacticiel vidéo CSS)
Lorsque le style de soulignement du texte doit être modifié, utilisez le style de bordure inférieure css border-bottom pour remplacer de manière flexible le soulignement de décoration de texte. style. Effet ; en définissant la couleur de la bordure inférieure, la largeur de la bordure inférieure, la ligne pointillée ou la ligne continue de la bordure inférieure et d'autres contrôles de style CSS sur le texte, divers effets de soulignement peuvent être obtenus.
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.css-F00 {
border-bottom: 1px solid #f00;
}
.css-00F {
border-bottom: 1px solid #00f;
color: #090;
}
.css-333 {
border-bottom: 1px solid #333;
}
</style>
</head>
<body>
<p>css实践之文字下划线颜色-<span class="css-F00">我的下划线实现为红色</span></p>
<p>css实践之文字下划线颜色-<span class="css-00F">我的下划线实现为蓝色，文字为绿色</span></p>
<p>css实践之文字下划线颜色-<span class="css-333">我的下划线实现为黑色</span></p>
</body>
</html>Effet :
Apprentissage recommandé : Tutoriel vidéo html
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!