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