Comment créer un style barré en utilisant CSS

CSS est un langage de feuille de style qui peut être utilisé pour définir et concevoir l'apparence et le format des documents HTML. En CSS, le barré est un style courant souvent utilisé dans les pages Web pour représenter un contenu qui était ou n'est plus valide. Cet article explique comment créer un style barré à l'aide de CSS.

1. propriété text-decoration

Pour créer un style barré à l'aide de CSS, vous pouvez utiliser la propriété text-decoration. L'attribut text-decoration peut être utilisé pour ajouter des décorations de texte, notamment le soulignement, le surlignement, le barré, etc. Pour ajouter un style barré, définissez simplement la propriété text-decoration sur "line-through":

p {
    text-decoration: line-through;
}

Le code ci-dessus appliquera le style barré à tous les éléments du paragraphe (p). Si vous souhaitez appliquer le barré uniquement dans un élément spécifique, vous pouvez remplacer le sélecteur par le nom de classe ou l'ID de cet élément.

2. Propriété text-decoration-line

Il existe également une propriété text-decoration-line en CSS, qui contrôle uniquement le type de décoration du texte. Par conséquent, au lieu d'utiliser la propriété text-decoration, vous pouvez définir text-decoration-line sur "line-through". Cela permettra de garantir que d'autres décorations de texte n'interfèrent pas avec le barré.

p {
    text-decoration-line: line-through;
}

3. Couleur du texte et couleur barrée

Si vous souhaitez personnaliser la couleur barrée, vous pouvez utiliser la propriété text-decoration-color. Par exemple, le code suivant ajoutera un barré bleu :

p {
    text-decoration: line-through;
    text-decoration-color: blue;
}

De plus, si vous souhaitez uniquement changer la couleur du barré, sans changer la couleur du texte, vous pouvez utiliser la propriété text-decoration-line color. Comme indiqué ci-dessous, la couleur du barré sera définie sur rouge :

p {
    text-decoration-line: line-through;
    text-decoration-color: red;
}

4. Position et style du barré

Vous pouvez également modifier le style du barré à l'aide de la propriété text-decoration-style. La propriété text-decoration-style contrôle le type de ligne barrée, y compris les lignes pleines, pointillées, pointillées et ondulées :

p {
    text-decoration-line: line-through;
    text-decoration-style: dotted;
}

De plus, vous pouvez utiliser la propriété text-decoration-position pour contrôler la position du barré dans le texte. Le barré peut être placé au-dessous ou au-dessus du texte (par défaut). Par exemple, cela placera le texte barré au-dessus du texte :

p {
    text-decoration-line: line-through;
    text-decoration-position: over;
}

En CSS, il existe de nombreuses options pour personnaliser les styles barrés. Vous pouvez changer sa couleur, son style et sa position selon vos besoins. De plus, vous pouvez définir text-decoration-line sur "line-through" et text-decoration-color sur la couleur souhaitée pour garantir que d'autres décorations de texte n'interfèrent pas avec votre barré.

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!