Рассмотрим все способы как можно сделать зачеркнутый текст через 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>
Преобразуется на странице в
Читайте также:
• Подробное описание свойства CSS border
• Подчеркнутый текст через теги html и свойства CSS
• Как сделать фон для сайта (background css)
• Фреймы html
• Декларация !important
• Свойство CSS display
• Свойство CSS transform
• Свойство CSS transition
• Курсивный текст в html
• Подчеркнутый текст html
• Жирный шрифт html