Содержание
Рассмотрим все способы как можно сделать зачеркнутый текст через html и CSS. Существует два варианта реализации:
- Через html теги
,и - Через свойство CSS text-decoration
1. Зачеркнутый текст через html теги , и
Весь текст заключенные в html теги , и становится зачеркнутым. Необычная буква s произошло в сокращение от английского слова "strike".
Разница между всеми тремя тегами визуально отсутствуют. Однако последний вариант с использованием html тега считается более предпочтительным, поскольку он поддерживается в стандарте HTML5. Другие теги не поддерживаются (они конечно будут отображаться корректно, но валидацию не пройдут).
Преобразуется на странице в
Обычный шрифт. Зачеркнутый текст через тег s
Обычный текст. Зачеркнутый текст через тег strike
Обычный текст. Зачеркнутый текст через тег del
2. Зачеркнутый текст через свойство CSS text-decoration
В CSS есть свойство text-decoration, которое отвечает за подчеркивание текста.
Синтаксис CSS text-decoration
- none — текст без оформления
- underline — нижнее подчеркивание
- overline — верхнее подчеркивание
- line-through — зачеркивание текста
- blink — мерцающий текст (рекомендуется не применять это значение)
Нас интересует значение line-through , которое задает зачеркивание текста.
Для зачеркивания текста в HTML применяется тег strike:
Результат выполнения данного кода:
Данный тег не имеет атрибутов. Вместо тега HTML strike может использоваться и сокращенная его версия — s (аналогично, жирный — b, курсив — i, подчеркнутый — u):
Как вы можете видеть, результат аналогичен:
Конструктор LEGO "Нубекс"
Использование тега s и strike считается неверным с точки зрения валидации кода (необходимо использовать переходной Doctype). Или другой вариант — использовать CSS.
Перечеркнутый текст: CSS
С помощью CSS текст можно "декарировать" при помощи свойства text-decoration. Это свойство может принимать следующие значения:
- line-through — используется для перечеркивания текста;
- underline — подчеркивает текст;
- overline — используется для помещения линии над текстом (надчеркнутый текст);
- blink — тест мигает (каждую секунду);
- none — позволяет отменить все эффекты, примененные к тексту.
Указанные значения могут быть применены одновременно, для этого нужно записать нужные параметры через пробел. Например, применим одновременно подчеркивание, надчеркивание и мигание:
Сделаем теперь перечеркнутый текст при помощи CSS:
Первыми тегами для зачёркнутого текста были и .
C приходом HTML 4 их использование стало осуждается, а в HTML 5 их вовсе запретили. В место них ввели , он помечает текст как удаленный, что семантически правильнее.
По виду они не отличается:
Изменить цвет линии
Первый способ
С помощью CSS свойства text-decoration-color , который задаёт цвет линии (не поддерживается в Internet Explorer и Edge).
Также можно изменить стиль линии с помощью text-decoration-style .
Значение | Описание | Пример |
---|---|---|
text-decoration-style: solid; | Одинарная линия | Текст |
text-decoration-style: double; | Двойная линия | Текст |
text-decoration-style: dotted; | Точечная линия | Текст |
text-decoration-style: dashed; | Пунктирная линия | Текст |
text-decoration-style: wavy; | Волнистая линия | Текст |
Второй способ
Тегу задается цвет линии, вложенному цвет текста.
Третий способ
Линия добавляется псевдо элементом :before , но у текста не должно быть переносов.
При такой реализации, можно расположить линию за текстом.