En CSS, vous pouvez utiliser l'attribut text-decoration pour définir le barré, avec la syntaxe "text-decoration:line-through". L'attribut text-decoration définit la décoration du texte de l'élément. Lorsque la valeur est linéaire, il définit une ligne qui passe sous le texte.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
Créez une nouvelle page test.html Dans la zone du corps de la page test.html, créez un nouveau div pour stocker le nom de l'élément. Créez un nouveau span dans la balise div pour stocker le prix de l'article. Créez une nouvelle balise de style dans la zone du corps de la page test.html et définissez le prix dans la balise span en rouge dans la balise de style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.price{
color:red;
}
</style>
</head>
<body>
<div>键盘:
<span class="price">200元</span>
</div>
</body>
</html>Ouvrez test.html dans le navigateur et jetez un œil à l'effet actuel
Retournez dans l'éditeur, dans la balise de style de test, définissez l'attribut text-decoration: line-through pour span
<style>
.price{
color:red;
text-decoration: line-through;
}
</style>Ouvrez à nouveau test.html, vous constaterez que le prix Barré a été ajouté.
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
