Comment utiliser CSS Strikethrough et Line-Through

CSS barré est une propriété CSS qui donne l’impression que le texte a été barré, comme ça. Dans le développement et l’écriture Web, cela est fréquemment utilisé pour indiquer que le texte a été effacé ou n’est plus pertinent. Mais il peut aussi être utilisé pour différentes choses.

Un barré peut être appliqué à un élément span, un paragraphe, un div, un bloc d’affichage en ligne ou tout autre élément qui prendrait une décoration de texte. En plus de souligner les italiques et les gras, le CSS barré est un excellent moyen de transmettre des informations via des éléments HTML.

Aujourd’hui, nous allons voir comment utiliser un barré (appelé barré) avec CSS ou HTML, pourquoi il doit être utilisé et quand il ne doit pas l’être. Nous verrons également comment vous pouvez utiliser le barré/le trait avec d’autres décorations de texte – et comment les décorations de texte fonctionnent en général.

Qu’est-ce que le CSS barré ?

Un barré CSS fait en fait référence à une «décoration de texte: ligne traversante». Mais cela peut être appelé une grève parce que la version HTML de celle-ci est la GRÈVE.

Une ligne traversante est une décoration de texte qui ajoute une ligne à travers le texte pour en quelque sorte l’annuler. Cela peut rendre le texte un peu difficile à lire, mais cela peut aussi être un moyen utile de « caviarder » des informations sans les éliminer entièrement.

Que signifie le texte barré ?

Le texte barré indique que quelque chose n’est plus pertinent. Bien qu’il puisse être stylistique, car il est difficile à lire, il est généralement utilisé pour rayer les informations que vous souhaitez toujours.

Par exemple, le texte interligne peut être utilisé dans une liste :

• Démarrez le serveur.
• Téléchargez le HTML.
• Testez le CSS.

Dans la liste ci-dessus, vous sauriez que le serveur était opérationnel, que le HTML avait été téléchargé, mais que le CSS devait encore être testé.

Alternativement, il pourrait être utilisé pour rayer quelque chose qui n’a jamais été correct. Dans l’écriture conversationnelle, le barré peut servir à se « censurer », à supprimer quelque chose qu’il ne faut pas dire.

Comment utiliser un style de décoration de texte ?

La décoration de texte en CSS est utilisée en ajoutant la propriété text-decoration à un élément. Les valeurs possibles pour cette propriété sont les suivantes :

• Souligner. Ajoute une ligne sous le texte.
• Surlignage. Ajoute une ligne sur le texte.
• Ligne à travers. Ajoute une ligne dans le texte.
• Clignoter. Fait clignoter le texte (non pris en charge par tous les navigateurs).
• Aucun. Supprime toute décoration de texte du texte.

Maintenant, le clignotement était très populaire dans le passé, mais il est considéré comme odieux, voire potentiellement dangereux (pour ceux qui ont des crises).

Les surlignages sont également assez rarement utilisés; ils sont comme un soulignement mais au-dessus du texte à la place.

Quelles sont les autres propriétés de décoration de texte ?

En plus des autres attributs de décoration de texte, il existe également d’autres propriétés de décoration de texte :

• texte-décoration-ligne. Ajoute une ligne au-dessus ou au-dessous du texte.
• style de décoration de texte. Définit le style de la ligne ajoutée par text-decoration-line.
• texte-décoration-couleur. Définit la couleur de la ligne ajoutée par text-decoration-line.

Ces propriétés peuvent modifier la ligne, le style et la couleur placés sur le texte, comme un soulignement en bleu.

Comment utiliser la balise HTML barrée ?

La balise HTML barrée est utilisée pour indiquer le texte qui a été barré. Il ressemble à ceci :

Il peut être plus facile de le faire que d’utiliser CSS pour barrer le texte. Mais cela signifie également que vous auriez besoin de trouver chaque instance de la balise si vous vouliez la modifier.

Pour la plupart, CSS ne peut rien faire que HTML ne puisse pas faire. Mais ce que CSS fait, c’est faciliter la modification dynamique de votre page si vous le souhaitez. Par exemple, disons que vous aviez le code suivant :

H2 { text-decoration: line-through }

Ensuite, tous les H2 seraient barrés. À partir de là, vous pouvez supprimer la grève de décoration de texte de chaque H2 en modifiant une seule ligne plutôt que d’avoir à modifier chaque H2 indépendant.

Comment supprimer le barré CSS ?

Si vous souhaitez supprimer le barré CSS de votre texte, vous pouvez utiliser la valeur none pour la propriété text-decoration. Cela supprimera tout barré de votre texte.

Pouvez-vous utiliser plusieurs décorations de texte en CSS ?

Oui, vous pouvez utiliser plusieurs décorations de texte en CSS. Pour ce faire, ajoutez plusieurs valeurs à la propriété text-decoration séparées par des virgules. Ainsi, par exemple, si vous vouliez souligner et mettre en italique un mot, vous feriez ce qui suit :

décoration de texte : souligné, italique ;

Cela soulignerait le mot et le mettrait en italique. Vous pouvez également utiliser plusieurs valeurs pour text-decoration-line et text-decoration-style. Par exemple, si vous vouliez avoir une ligne au-dessus et au-dessous du texte, vous feriez ce qui suit :

text-decoration-line : surligner, souligner ; style de décoration de texte : pointillé ;

Cela vous donnerait une ligne au-dessus et au-dessous du texte avec un style en pointillés. Ainsi, vous pourriez potentiellement surligner, souligner et barrer un texte, mais vous ne voudriez pas le faire car cela le rendrait totalement illisible !

Quand ne devriez-vous pas utiliser une traversée de ligne ?

Lorsque vous voulez que votre texte soit lisible. Une ligne barrée est généralement utilisée pour rayer le texte qui n’est plus pertinent. Donc, si vous voulez que votre texte soit facilement lisible, il est préférable de ne pas l’utiliser.

Vous pouvez également utiliser la balise pour le texte barré, ce qui est sémantiquement plus correct. Cependant, la balise ne fonctionne pas toujours dans tous les navigateurs. Ainsi, si vous avez besoin de vous assurer que votre texte est lisible dans n’importe quel navigateur, la balise est une bonne alternative.

CSS peut également être utilisé pour styliser le texte barré. Par exemple, vous pouvez rendre la ligne plus épaisse, changer la couleur ou la faire clignoter. Vous pouvez également utiliser CSS pour ajouter une ligne au-dessus ou en dessous du texte. Cela peut être utile si vous voulez souligner que quelque chose a été barré.

Cependant, vous ne devez utiliser du texte barré que lorsque cela est nécessaire. Généralement, le texte barré est utilisé pour rayer les informations qui ne sont plus pertinentes.

Conclusion : comment utiliser le formatage CSS

Le formatage CSS est généralement placé dans la section HEAD STYLE (

), mais il peut également être placé dans une collection distincte de styles CSS. Si vous avez une longue ligne de décoration de texte ou de nombreuses modifications, l’utilisation d’un fichier .CSS séparé peut être utile. Vous pouvez également utiliser un conditionneur comme SCSS pour faciliter encore plus le processus de développement et de conditionnement du code CSS.

Vous souhaitez en savoir plus sur l’utilisation du formatage CSS ? Les barrés, c’est bien, mais ce n’est que le début. Envisagez de jeter un œil à d’autres éléments de CSS, tels que CSS NOWRAP ou de suivre un cours CSS pour débutant sur Udemy.