Зачеркнутый текст на сайте через CSS и теги html
Рассмотрим все способы как можно сделать зачеркнутый текст через html и CSS. Существует два варианта реализации:
- Через html теги , и
- Через свойство CSS text-decoration
1. Зачеркнутый текст через html теги , и
Весь текст заключенные в html теги , и становится зачеркнутым. Необычная буква s произошло в сокращение от английского слова «strike».
Разница между всеми тремя тегами визуально отсутствуют. Однако последний вариант с использованием html тега считается более предпочтительным, поскольку он поддерживается в стандарте 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 css">del">Текст со свойством text-decoration: line-through/div> /body> /html>
Преобразуется на странице в
text-decoration
Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.
Синтаксис
text-decoration: [ blink || line-through || overline || underline ] | none | inherit
Значения
blink Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3, взамен рекомендуется использовать анимацию. line-through Создает перечеркнутый текст ( пример ). overline Линия проходит над текстом ( пример ). underline Устанавливает подчеркнутый текст ( пример ). none Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию. inherit Значение наследуется у родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
text-decoration Стратегическое нападение
Объектная модель
[window.]document.getElementById(» elementID «).style.textDecoration
[window.]document.getElementById(» elementID «).style.textDecorationBlink
[window.]document.getElementById(» elementID «).style.textDecorationLineThrough
[window.]document.getElementById(» elementID «).style.textDecorationNone
[window.]document.getElementById(» elementID «).style.textDecorationOverLine
[window.]document.getElementById( «elementID «).style.textDecorationUnderline
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit . Линия полученная с помощью значения line-through в IE7 располагается выше, чем в других браузерах; в IE8 эта ошибка исправлена.
CSS по теме
Подчеркивание, зачеркивание текста в CSS: свойство text-decoration
Используя свойство CSS text-decoration, можно добавлять дополнительные эффекты для текста, такие как подчеркивание, зачеркивание, мигание. Ниже приведена таблица с допустимыми значениями и их описанием.
| Значение | Что делает |
|---|---|
| underline | Нижнее подчеркивание текста |
| overline | Верхнее подчеркивание текста |
| line-through | Зачеркивание текста |
| blink | Мигание текста |
| none | Удаление всех эффектов |
| inherit | Наследование значений родителя |
Пример записи стиля:
Применяя свойство text-decoration в CSS, следует соблюдать чувство меры и некоторые рекомендации. Перед использованием значения underline не для гиперссылки убедитесь, что текст на веб-странице не будет на нее похож. Многие пользователи воспринимают подчеркнутый текст как ссылку. Чтобы более гибко настроить стиль и иметь возможность изменять толщину, вид и цвет полосы подчеркивания, можно использовать свойство border (подробнее о нем мы будем говорить чуть позже).
Если вы желаете убрать стандартное подчеркивание гиперссылки в браузере, воспользуйтесь значением none .
Значение blink (мигание текста) хоть и внесено в таблицу, на данный момент не поддерживается браузерами.
Скриншот с примерами использования стиля:
Далее в учебнике: установка тени для текста при помощи свойства CSS text-shadow.
Перечёркнутый текст
С помощью 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; | Волнистая линия | Текст |
Второй способ
Тегу задается цвет линии, вложенному цвет текста.
Текст зачёркнут красной линией del < color: red; text-decoration: line-through; >del span
Третий способ
Линия добавляется псевдо элементом :before , но у текста не должно быть переносов.
Перечёркнутый текстdel < position: relative; color: #000; text-decoration: none; >del:before
При такой реализации, можно расположить линию за текстом.
del < position: relative; color: #000; text-decoration: none; >del:before
21.08.2019, обновлено 30.08.2019
Предыдущая запись Ведущие нули у ol
Следующая запись Перечёркивание текста по диагонали
Комментарии
Авторизуйтесь, чтобы добавить комментарий.
Другие публикации
Ниже приведён список MIME-заголовков и расширений файлов.
Сборник горизонтальных линий с тегом hr разных видов и стилей.
Вопрос генерации QR-кодов в PHP достаточно освещён, есть много библиотек, одной из них является «PHP QR Code» – быстрый и легкий класс, рассмотрим его применение совместно с графической библиотекой.