Maison  >  Article  >  interface Web  >  Comment définir le barré en CSS

Comment définir le barré en CSS

醉折花枝作酒筹
醉折花枝作酒筹original
2021-04-20 10:33:2112911parcourir

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.

Comment définir le barré en CSS

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

Comment définir le barré en CSS

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é.

Comment définir le barré en CSS

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn