Maison >interface Web >tutoriel HTML >Ajouter des lignes décoratives au texte dans les balises HTML
Ajouter des lignes décoratives au texte dans les balises HTML
- angryTomavant
- 2019-11-28 17:26:292496parcourir
Introduction à l'attribut text-decoration
text-decorationL'attribut est utilisé pour définir des lignes de décoration de texte, text-decorationL'attribut a un total de 4 valeurs.
tableau de description des valeurs d'attribut de décoration de texte
(apprentissage recommandé : Tutoriel vidéo HTML)
| 值 | 作用 |
|---|---|
| none | 去掉文本修饰线 |
| underline | 设置下划线 |
| overline | 设置上划线 |
| line-through | 设置删除线 |
Les balises HTML ont leurs propres lignes de modification
Avant de commencer à pratiquer l'attribut text-decoration, l'auteur va d'abord vulgariser les balises en HTML qui ont leurs propres lignes de modification, telles que comme : u tag, s tag, s'il y a quelque chose d'incomplet, vous pouvez me le dire dans les commentaires ci-dessous. Après tout, je suis aussi un débutant en front-end, j'espère communiquer avec tout le monde, m'entraider et progresser. ensemble.
balise u
Entrons dans la pratique de la balise u La balise u est accompagnée du texte souligné.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>设置文本修饰线</title> </head> <body> <u>成功不是击败别人，而是改变自己</u> </body> </html>
Image du résultat
Remarque : La balise u peut également être utilisée avec d'autres balises dans HTML, par exemple : intégrer le u balise Utilisez-le dans la balise h1.
<h1><u>成功不是击败别人，而是改变自己</u></h1>
balise
Entrons dans la pratique de la balise s La balise s est livrée avec du texte barré.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>设置文本修饰线</title> </head> <body> <s>成功不是击败别人，而是改变自己</s> </body> </html>
Graphique des résultats
Remarque : La balise s peut également être imbriquée, ce qui est cohérent avec la balise u, donc je ne gagnerai pas Je ne le présenterai pas trop.
aucun supprime la ligne modifiée
Entrons la text-decoration valeur pratique de l'attribut none Le contenu de la pratique est le suivant : je vais changer le. HTML >Le barré qui accompagne le tag est supprimé. s
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设置文本修饰线</title>
<style>
s{
text-decoration: none;
}
</style>
</head>
<body>
<s>成功不是击败别人，而是改变自己</s>
</body>
</html>Image du résultat
, balise u, y compris la valeur d'attribut s Toutes les lignes décoratives peuvent être supprimées. text-decoration
soulignement Définir le soulignement
Entrons dans la pratique de valeur de l'attribut text-decoration Le contenu de la pratique est le suivant : L'auteur modifiera le dans la page underline Le texte dans l'étiquette est souligné. HTMLh2Bloc de code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设置文本修饰线</title>
<style>
h2{
text-decoration: underline;
}
</style>
</head>
<body>
<h2>成功不是击败别人，而是改变自己</h2>
</body>
</html>
Graphique des résultats
Laissons entrer la pratique de valeur
de l'attribut. Le contenu de la pratique est le suivant : L'auteur met un surlignement sur le texte dans la balise text-decoration de la page overline. HTMLh2Bloc de code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设置文本修饰线</title>
<style>
h2{
text-decoration: overline;
}
</style>
</head>
<body>
<h2>成功不是击败别人，而是改变自己</h2>
</body>
</html>
Graphique des résultats
Laissez nous saisissons la valeur
pratique de l'attribut. Le contenu de la pratique est le suivant : L'auteur met un barré pour le texte dans la balise h2 de la page text-decoration. line-throughHTMLBloc de code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设置文本修饰线</title>
<style>
h2{
text-decoration: line-through;
}
</style>
</head>
<body>
<h2>成功不是击败别人，而是改变自己</h2>
</body>
</html>
Image du résultat
Cet article provient du site Web PHP chinois, colonne
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!