Decoration css: text-decoration — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

text-decoration | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+1.0+4.0+1.0+1.0+1.0+1.0+

Краткая информация

Значение по умолчаниюnone
НаследуетсяНет
ПрименяетсяКо всем элементам
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/text.html#propdef-text-decoration

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

Синтаксис

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

Значения

blink
Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3, взамен рекомендуется использовать анимацию.
line-through
Создает перечеркнутый текст (пример).
overline
Линия проходит над текстом (пример).
underline
Устанавливает подчеркнутый текст (пример).
none
Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.
inherit
Значение наследуется у родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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="1.
 
 html">Стратегическое нападение</a></p>
 </body>
</html>

Объектная модель

[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 по теме

  • text-decoration

Статьи по теме

  • Свойства ссылок
  • Свойства текста
  • Ссылки без подчеркивания

Рецепты CSS

  • Как добавить подчеркивание к заголовку?
  • Как изменить вид ссылки при наведении на нее курсора мыши?
  • Как убрать подчеркивание у ссылок?

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Раздел
15.4.3 ‘text-decoration’Перевод
216.3.1 Underlining, overlining, striking, and blinking: the ‘text-decoration’ property
2.116.3.1 Underlining, overlining, striking, and blinking: the ‘text-decoration’ property
2.216.3.1 Underlining, overlining, striking, and blinking: the ‘text-decoration’ property
32. 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>
<p><span>Подчёркнутый текст</span>.</p>
<p><span>Надчёркнутый текст</span>.</p>
<p><span>Перечёркнутый текст</span>.</p>
<p><span>Мигающий текст</span>.</p>
</body>
</html>

Свойство text-decoration

text-decoration — CSS: Каскадные таблицы стилей

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

text-decoration-line , text-decoration-color , text-decoration-style и более нового свойства text-decoration-thickness .

Текстовые декорации рисуются на дочерних текстовых элементах. Это означает, что если элемент определяет текстовое оформление, то дочерний элемент не может удалить оформление. Например, в разметке

В этом тексте есть некоторые выделенные слова.

, правило стиля p { text-decoration: underline; } приведет к подчеркиванию всего абзаца. Правило стиля em { text-decoration: none; } не вызовет никаких изменений; весь абзац все равно будет подчеркнут. Однако правило em { text-decoration: overline; } приведет к появлению второго украшения на «некоторых выделенных словах».

Это свойство является сокращением для следующих свойств CSS:

  • цвет текста-декорации
  • строка оформления текста
  • стиль оформления текста
  • толщина оформления текста «> Нестандартный 
 украшение текста: подчеркивание;
оформление текста: обводка красная;
текстовое оформление: нет;
/* Глобальные значения */
оформление текста: наследовать;
оформление текста: инициал;
текстовое оформление: вернуться;
текстовое оформление: возвратный слой;
текстовое оформление: не задано;

Свойство text-decoration задается как одно или несколько значений, разделенных пробелами, представляющих различные свойства полнотекстового оформления текста.

Значения

текст-оформление-линия

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

цвет оформления текста

Задает цвет украшения.

стиль оформления текста

Устанавливает стиль линии, используемой для оформления, например сплошная , волнистая или пунктирная .

толщина оформления текста

Устанавливает толщину линии, используемой для оформления.

 text-decoration = 
 <'text-decoration-line'> || 
 <'стиль оформления текста'> || 
 <'text-decoration-color'>

Демонстрация значений оформления текста 

 .under {
  оформление текста: подчеркивание красным;
}
.над {
  текст-декор: волнистый лаймовый обвод;
}
.линия {
  оформление текста: сквозное;
}
.простой {
  текстовое оформление: нет;
}
.под более {
  оформление текста: пунктирное подчеркивание надчеркивание;
}
.толстый {
  оформление текста: сплошное подчеркивание фиолетового цвета 4 пикселя;
}
.blink {
  оформление текста: мерцание;
}
 
 
Под этим текстом есть черта.


Этот текст перечеркнут.


В этом тексте есть линия.



  Эта ссылка не будет подчеркнута, так как ссылки
  обычно стоят по умолчанию. Будьте осторожны при удалении текстового оформления на
  якоря, так как пользователи часто полагаются на подчеркивание для обозначения гиперссылок. 



В этом тексте есть строки над и под ним.



  В поддерживаемых браузерах этот текст выделен жирным фиолетовым подчеркиванием.




  Этот текст может мигать для вас, в зависимости от используемого вами браузера.
Спецификация
CSS-модуль модуля 3
# Text-Decoration Property

BCDALD TABLEAL LOTALBABLE IN. Включите JavaScript для просмотра данных.

  • Индивидуальные свойства оформления текста: text-decoration-line , text-decoration-color , text-decoration-style и text-decoration-thickness .
  • Свойства text-decoration-skip-ink , text-underline-offset и text-underline-position также влияют на text-decoration, но не включены в сокращение.
  • Атрибут в стиле списка управляет внешним видом элементов в списках HTML
      и
        .

      Последнее изменение:

      27 сентября 2022 г. , участниками MDN

      text-decoration-line - CSS: Каскадные таблицы стилей

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

      При одновременной настройке нескольких свойств line-decoration может быть удобнее использовать сокращенное свойство text-decoration .

       /* Одно ключевое слово */
строка оформления текста: нет;
строка оформления текста: подчеркивание;
строка оформления текста: надчеркивание;
строка оформления текста: сквозная;
строка оформления текста: мерцание;
/* Несколько ключевых слов */
text-decoration-line: подчеркивание над чертой; /* Две линии оформления */
text-decoration-line: надчеркивание, подчеркивание, перечеркивание; /* Несколько декоративных строк */
/* Глобальные значения */
строка оформления текста: наследовать;
строка оформления текста: начальная;
строка оформления текста: вернуться;
строка оформления текста: слой возврата;
строка оформления текста: не задана;

      Свойство text-decoration-line указано как none или одно или несколько разделенных пробелом значений из списка ниже.

      Значения

      нет

      Не создает текстовое оформление.

      подчеркивание

      Под каждой строкой текста находится декоративная черта.

      сверху

      Над каждой строкой текста есть декоративная линия.

      проходной

      Каждая строка текста имеет декоративную черту, проходящую через ее середину.

      мигает Устаревший

      Текст мигает (поочередно видимый и невидимый). Соответствующие пользовательские агенты могут не мигать текстом. Это значение устарело в пользу анимации CSS.

       text-decoration-line = 
       нет | 
       [ подчеркивание || надчеркивание || линейный || blink ]

      Базовый пример 

      Вот текст с красным волнистым подчеркиванием!
      В этом тексте есть строки как сверху, так и снизу.

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

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