Рассмотрим все способы как можно сделать зачеркнутый текст через 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 , которое задает зачеркивание текста. Первыми тегами для зачёркнутого текста были и . 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 , но у текста не должно быть переносов. Для зачеркивания текста в HTML применяется тег strike: Результат выполнения данного кода: Данный тег не имеет атрибутов. Вместо тега HTML strike может использоваться и сокращенная его версия — s (аналогично, жирный — b, курсив — i, подчеркнутый — u): Как вы можете видеть, результат аналогичен: Конструктор LEGO «Нубекс» Использование тега s и strike считается неверным с точки зрения валидации кода (необходимо использовать переходной Doctype). Или другой вариант — использовать CSS. Перечеркнутый текст: CSS С помощью CSS текст можно «декарировать» при помощи свойства text-decoration. Это свойство может принимать следующие значения: line-through — используется для перечеркивания текста; underline — подчеркивает текст; overline — используется для помещения линии над текстом (надчеркнутый текст); blink — тест мигает (каждую секунду); none — позволяет отменить все эффекты, примененные к тексту. Указанные значения могут быть применены одновременно, для этого нужно записать нужные параметры через пробел. Например, применим одновременно подчеркивание, надчеркивание и мигание: Сделаем теперь перечеркнутый текст при помощи CSS:
- 2. Зачеркнутый текст через свойство CSS text-decoration
- Изменить цвет линии
- Первый способ
- Второй способ
- Третий способ
- Перечеркнутый текст: CSS
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 , которое задает зачеркивание текста.
Первыми тегами для зачёркнутого текста были и .
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 , но у текста не должно быть переносов.
Для зачеркивания текста в HTML применяется тег strike:
Результат выполнения данного кода:
Данный тег не имеет атрибутов. Вместо тега HTML strike может использоваться и сокращенная его версия — s (аналогично, жирный — b, курсив — i, подчеркнутый — u):
Как вы можете видеть, результат аналогичен:
Конструктор LEGO «Нубекс»
Использование тега s и strike считается неверным с точки зрения валидации кода (необходимо использовать переходной Doctype). Или другой вариант — использовать CSS.
Перечеркнутый текст: CSS
С помощью CSS текст можно «декарировать» при помощи свойства text-decoration. Это свойство может принимать следующие значения:
- line-through — используется для перечеркивания текста;
- underline — подчеркивает текст;
- overline — используется для помещения линии над текстом (надчеркнутый текст);
- blink — тест мигает (каждую секунду);
- none — позволяет отменить все эффекты, примененные к тексту.
Указанные значения могут быть применены одновременно, для этого нужно записать нужные параметры через пробел. Например, применим одновременно подчеркивание, надчеркивание и мигание:
Сделаем теперь перечеркнутый текст при помощи CSS: