Зачеркнутый текст на сайте через CSS и теги html

Рассмотрим все способы как можно сделать зачеркнутый текст через html и CSS. Существует два варианта реализации:

  • Через html теги <s>, <strike> и <del>
  • Через свойство CSS text-decoration

1. Зачеркнутый текст через html теги <s>, <strike> и <del>

Весь текст заключенные в html теги <s></s>, <strike></strike> и <del></del> становится зачеркнутым. Необычная буква s произошло в сокращение от английского слова “strike”.

Разница между всеми тремя тегами визуально отсутствуют. Однако последний вариант с использованием html тега <del></del> считается более предпочтительным, поскольку он поддерживается в стандарте HTML5. Другие теги не поддерживаются (они конечно будут отображаться корректно, но валидацию не пройдут).

<p>Обычный шрифт. <s>Зачеркнутый текст через тег s</s></p>
<p>Обычный текст. <strike>Зачеркнутый текст через тег strike</strike></p>
<p>Обычный текст. <del>Зачеркнутый текст через тег del</del></p>

Преобразуется на странице в

Обычный шрифт. Зачеркнутый текст через тег s

Обычный текст. Зачеркнутый текст через тег strike

Обычный текст. Зачеркнутый текст через тег del

2. Зачеркнутый текст через свойство CSS text-decoration

В CSS есть свойство text-decoration, которое отвечает за подчеркивание текста.

Синтаксис CSS text-decoration

text-decoration: none|underline|overline|line-through|inherit;

Где:

  • none – текст без оформления
  • underline – нижнее подчеркивание
  • overline – верхнее подчеркивание
  • line-through – зачеркивание текста
  • blink – мерцающий текст (рекомендуется не применять это значение)

Нас интересует значение line-through, которое задает зачеркивание текста.

Например:

<html>
<head>
<style>
.del{
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="del">Текст со свойством text-decoration: line-through</div>
</body>
</html>

Преобразуется на странице в

Текст со свойством text-decoration: line-through




Читайте также:

• Подробное описание свойства CSS border

• Подчеркнутый текст через теги html и свойства CSS

• Как сделать фон для сайта (background css)

• Фреймы html

• Декларация !important

• Свойство CSS display

• Свойство CSS transform

• Свойство CSS transition

• Курсивный текст в html

• Подчеркнутый текст html

• Жирный шрифт html


← Перейти в каталог html уроков и советов

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.