Line through css: Свойство text-decoration-line

Содержание

CSS/Свойство text-decoration

Синтаксис

CSS 1

CSS 2‒2.2

CSS 3

text-decoration: none | [ underline || overline || line-through || blink ] | inherit

Описание

Свойство text-decoration добавляет к тексту дополнительные элементы декора, такие как подчёркивание, зачёркивание текста, линия над текстом.

Применяется:	ко всем элементам;
Наследование:	отсутствует;
Проценты:	не используются;
Медиа:	визуальные.

Примечание

В CSS 3 можно устанавливать дополнительно цвет и тип линии.

JavaScript

[объект].style.textDecoration="[значение]";

Поддержка браузерами

Chrome

Поддерж.

^[1]

Firefox

Поддерж.^[1]

Opera

Поддерж.^[1]

Maxthon

Поддерж.^[1]

IExplorer

Поддерж.^[1]

Safari

Поддерж.^[1]

iOS

Поддерж.^[1]

Android

Поддерж.^[1]

[1] ‒ поддерживает синтаксис CSS 2-2.2.

Спецификация

CSS	Раздел
1	5.4.3 ‘text-decoration’	Перевод
2	16.3.1 Underlining, overlining, striking, and blinking: the ‘text-decoration’ property
2.1	16.3.1 Underlining, overlining, striking, and blinking: the ‘text-decoration’ property
2.2	16. 3.1 Underlining, overlining, striking, and blinking: the ‘text-decoration’ property
3	2.4. Text Decoration Shorthand: the ‘text-decoration’ property

Значения

none: Указывает на отсутствие элементов декора.
underline: Подчёркивает текст.
text-decoration: underline;
overline: Устанавливает линию над текстом.
text-decoration: overline;
line-through: Перечёркивает текст.
text-decoration: line-through;
blink: Создаёт мигающий текст. (Данное свойство не поддерживается большинством современных браузеров. )
inherit: Указывает, что элемент должен унаследовать параметры родительского элемента.

Начальное значение: «none».

Пример использования

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Свойство text-decoration</title>
</head>
<body>
<h2>Элементы декора</h2>
Подчёркнутый текст.

Надчёркнутый текст.
Перечёркнутый текст.
Мигающий текст.
</body>
</html>

Свойство text-decoration

decoration | HTML и CSS с примерами кода

Сокращенное свойство text-decoration устанавливает внешний вид декоративных линий в тексте. Это сокращение для text-decoration-line, text-decoration-color, text-decoration-style и text-decoration-thickness.

Текст

hanging-punctuation
hyphens
letter-spacing
line-break
overflow-wrap
paint-order
tab-size
text-align
text-align-last
text-indent
text-justify

text-size-adjust
text-transform
white-space
word-break
word-spacing

letter-spacing
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-decoration-thickness
text-decoration-skip
text-decoration-skip-ink
text-emphasis
text-emphasis-color
text-emphasis-position
text-emphasis-style
text-indent
text-rendering
text-shadow
text-underline-position
text-transform
white-space
word-spacing

Синтаксис

text-decoration: none;
text-decoration: underline red;
text-decoration: underline wavy red;
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;

Определение


Начальное значение	как каждое их свойств сокращения: `text-decoration-color: currentcolor` `text-decoration-style: solid` `text-decoration-line: none`
Применяется ко	всем элементам и псевдо-элементам `::first-letter` и `::first-line`
Наследуется	нет
Вычисленное значение	как каждое их свойств сокращения: `text-decoration-line`: как определено `text-decoration-style`: как определено `text-decoration-color`: вычисленный цвет `text-decoration-thickness`: как определено
Тип анимации	как каждое их свойств сокращения: `text-decoration-color`: цвет `text-decoration-style`: дискретный `text-decoration-line`: дискретный `text-decoration-thickness`: вычисленное значение типа

Поддержка браузерами

Примеры

Пример 1

Пример 2

CSS

. under {
  text-decoration: underline red;
}
.over {
  text-decoration: wavy overline lime;
}
.line {
  text-decoration: line-through;
}
.plain {
  text-decoration: none;
}
.underover {
  text-decoration: dashed underline overline;
}
.thick {
  text-decoration: solid underline purple 4px;
}
.blink {
  text-decoration: blink;
}

HTML

<p>This text has a line underneath it.</p>
<p>This text has a line over it.</p>
<p>This text has a line going through it.</p>
<p>
  This
  <a href="#">link will not be underlined</a>,
  as links generally are by default. Be careful when
  removing the text decoration on anchors since users often
  depend on the underline to denote hyperlinks.
</p>
<p>
  This text has lines above <em>and</em> below it.
</p>
<p>
  This text has a really thick purple underline in
  supporting browsers.
</p>
<p>
  This text might blink for you, depending on the browser
  you use.
  </p>

Результат

Пример 3

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>text-decoration</title>
    <style>
      a {
        /* Убираем подчеркивание у ссылок */
        text-decoration: none;
      }
      a:hover {
        /* Добавляем подчёркивание 
        при наведении курсора мыши на ссылку */
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <p>
      <a href="page/1.html">Стратегическое нападение</a>
    </p>
  </body>
</html>

См. также

Элемент a — текст ссылки
Элемент u — подчеркнутый текст
Элемент s — ~~зачеркнутый~~ текст

Ссылки

Свойство text-decoration ^{MDN (рус.)}
CSS Text Decoration Module Level 4 ^{Спецификация (eng. )}
CSS Text Decoration Level 3 ^{Спецификация (eng.)}
CSS Level 2 (Revision 1) ^{Спецификация (eng.)}
CSS Level 1 ^{Спецификация (eng.)}

CSS: свойство text-decoration

В этом руководстве по CSS объясняется, как использовать свойство CSS под названием text-decoration с синтаксисом и примерами.

Описание

Свойство CSS text-decoration определяет форматирование текста элемента, такое как подчеркивание, надчеркивание, сквозная линия и мерцание.

Синтаксис

Синтаксис свойства CSS text-decoration:

 text-decoration: value;

Параметры или аргументы

значение

Форматирование текста. Это может быть одно из следующих значений:

Значение	Описание
подчеркивание	Текст имеет подчеркивание div { text-decoration: underline; }
над чертой	Над текстом отображается строка div { text-decoration: overline; }
проходной	В середине текста есть линия div { text-decoration: line-through; }
мигает	Текст мигает div { text-decoration: blink; }
нет	Текстовое оформление не применяется к тексту div { text-decoration: none; }
унаследовать	Элемент унаследует оформление текста от своего родительского элемента div { text-decoration: inherit; }

Примечание

Некоторые браузеры могут игнорировать оформление текста blink .

Совместимость с браузерами

Свойство CSS text-decoration имеет базовую поддержку в следующих браузерах:

Chrome
Андроид
Firefox (Геккон)
Firefox Mobile (Геккон)
Internet Explorer (IE)
Интернет-телефон
Опера
Опера Мобайл
Сафари (веб-кит)
Сафари Мобильный

Пример

Мы обсудим свойство text-decoration ниже, исследуя примеры использования этого свойства в CSS.

Использование подчеркивания

Давайте рассмотрим пример оформления текста CSS, где мы используем подчеркивание оформления текста.

 a: hover { color: #4A6593; оформление текста: подчеркивание; }

В этом примере оформления текста CSS текст будет подчеркиваться при наведении указателя мыши на ссылку.

Использование Line-Through

Далее, давайте посмотрим на пример оформления текста CSS, где применено оформление текста line-through text-decoration.

 span { text-decoration: line-through; }

В этом примере оформления текста CSS мы установили для оформления текста значение от строки до в теге .

Использование None

Давайте посмотрим на пример оформления текста CSS, в котором мы удаляем оформление текста.

 а: ссылка, а: активна, а: посещена {украшение текста: нет; }

Традиционно большинство сайтов подчеркивают все ссылки. Однако некоторые сайты предпочитают отображать подчеркивание только тогда, когда пользователь наводит курсор на ссылку. В этом примере CSS text-decoration мы удалили text-decoration из тега для ссылок, активных и посещенных (но не наведенных).

Поделись:

Рекламные объявления

css — Как установить стиль «text-decoration: line-through» для метки, внутри которой находится элемент?

У меня есть —

foo

Мне нужно установить стиль «text-decoration: line-through» (в файле. css) для метки, которая находится внутри элемента. Я попытался написать следующее в файле .css, но это мне не помогает.

 метка> ввод [тип = флажок]: отмечен {
    оформление текста: сквозное;
}

css
флажок
стили
сквозной

CSS не может «вернуться вверх» так, как вы хотели бы сделать здесь, поэтому проверенный статус ввода не может повлиять на общую метку.

Есть несколько способов обойти это. Вы можете просто поменять местами ввод с метки, чтобы он был перед ней, но, конечно, это изменило бы внешний вид. Вместо этого этот фрагмент помещает содержимое метки в элемент span, а затем состояние ввода может повлиять на его стиль, поскольку новый элемент является следующим родственным элементом.

 ввод: проверено+* {
  оформление текста: сквозное;
}

 <метка для="1640801145364">

  фу

Я вижу ваш CSS, вы думали, что текст foo будет внутри ввода, , но не совсем , потому что: не нужен закрывающий тег, поэтому они не могут внутри foo текст

, поэтому сначала foo текст в диапазоне , поэтому с помощью CSS мы можем легко выбрать его

, затем я использовал CSS COMBINATOR ~ https://developer.

Штирлиц — Сеть печатных салонов в Перми

Line through css: Свойство text-decoration-line | Справочник HTML CSS

CSS/Свойство text-decoration

Синтаксис

Описание

Примечание

JavaScript

Поддержка браузерами

Спецификация

Значения

Пример использования

decoration | HTML и CSS с примерами кода

Синтаксис

Определение

Поддержка браузерами

Примеры

Пример 1

Пример 2

Пример 3

См. также

Ссылки

CSS: свойство text-decoration

Описание

Синтаксис

Параметры или аргументы

Примечание

Совместимость с браузерами

Пример

Использование подчеркивания

Использование Line-Through

Использование None

css — Как установить стиль «text-decoration: line-through» для метки, внутри которой находится элемент?

Добавить комментарий Отменить ответ