Comment définir le soulignement en CSS-tutoriel CSS-php.cn

Comment définir le soulignement en CSS

藏色散人

Libérer： 2023-01-07 11:42:46

original

75694 Les gens l'ont consulté

Comment définir le soulignement en CSS : 1. Utilisez "text-decoration:underline;" pour définir le style de soulignement ; 2. Utilisez l'attribut "border-bottom" pour définir le style de soulignement.

Comment définir le soulignement en CSS

L'environnement d'exploitation de cet article : système Windows7, version HTML5&&CSS3, ordinateur DELL G3

Comment définir le soulignement en CSS

En CSS, vous pouvez utiliser l'attribut text-decoration ou l'attribut border-bottom pour définir le soulignement du style de 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;

Copier après la connexion

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>HTML中文网</span>！</p>
</body>
</html>

Copier après la connexion

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, comme définir le soulignement en forme de pointillé. Examinons une autre façon d'ajouter un soulignement et vous pouvez définir différents styles de soulignement.

2. Utilisez l'attribut border-bottom pour définir le style de soulignement

L'attribut border-bottom de CSS peut définir le style de bordure inférieure de l'élément, afin que vous puissiez ajouter une ligne sous le texte.

Syntaxe :

border-bottom: width  style  color;

Copier après la connexion

Paramètres :

width : 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>HTML中文网</span>！</p>
<p class="demo2">这是第2段测试文字，<span>HTML中文网</span>！</p>
<p class="demo3">这是第3段测试文字，<span>HTML中文网</span>！</p>
<p class="demo4">这是第4段测试文字，<span>HTML中文网</span>！</p>
<p class="demo5">这是第5段测试文字，<span>HTML中文网</span>！</p>
</div>
</body>
</html>

Copier après la connexion

Apprentissage recommandé : "Tutoriel vidéo CSS"

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!