Css underline text: text-underline-position — CSS: Cascading Style Sheets

03.09.1975 Facebook Twitter LinkedIn Google+ Разное

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

CSSHTMLРезультат

. 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;
}

<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 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.
1		16.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-underline-position — CSS: Каскадные таблицы стилей

CSS-свойство text-underline-position указывает положение подчеркивания, которое задается с помощью значения underline свойства text-decoration .

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

Значения

авто

Пользовательский агент использует собственный алгоритм для размещения строки на или под базовой линией алфавита.

от шрифта

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

ниже

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

слева

В режимах вертикального письма это ключевое слово принудительно размещает строку с левой стороны текста. В режимах горизонтального письма это синоним 9.0004 под .

справа

В режимах вертикального письма это ключевое слово принудительно размещает строку с правой стороны текста. В режимах горизонтального письма это синоним под .

автопост Нестандартный Экспериментальный

Синоним auto , который следует использовать вместо него.

выше Нестандартный

Устанавливает строку над текстом. При использовании восточноазиатского текста использование ключевого слова auto приведет к аналогичному эффекту.

ниже Нестандартный

Устанавливает строку под текстом. При использовании с буквенным текстом использование ключевого слова auto приведет к аналогичному эффекту.

 позиция подчеркивания текста = 
 авто | 
 [ под || [ слева | right ] ]

Простой пример

Возьмем пару простых примеров абзацев:

 

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac
  турпис вель лаореет. Nullam volutpat pharetra lorem, sit amet feugiat tortor
  volutpat quis. Nam eget sodales quam. Aliquam accumsan Tellus Ac Erat Pouere.




  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac
  турпис вель лаореет. Nullam volutpat pharetra lorem, sit amet feugiat tortor
  volutpat quis. Nam eget sodales quam. Aliquam accumsan Tellus Ac Erat Pouere.

Наш CSS выглядит так:

 p {
  размер шрифта: 1.5rem;
  преобразование текста: использовать заглавные буквы;
  оформление текста: подчеркивание;
  толщина оформления текста: 2px;
}
.горизонтальный {
  позиция подчеркивания текста: под;
}
.вертикаль {
  режим письма: вертикальный-rl;
  позиция подчеркивания текста: слева;
}

В этом примере мы установили для обоих абзацев толстое подчеркивание. В горизонтальном тексте мы используем text-underline-position: under; , чтобы поставить подчеркивание под всеми подстрочными элементами.

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

Живой пример выглядит следующим образом:

Глобальная установка text-underline-position

Поскольку свойство text-underline-position наследуется и не сбрасывается сокращенным свойством text-decoration , может быть целесообразно установить его значение на глобальном уровне. Например, под значением может подойти для документа с большим количеством химических и математических формул, которые широко используют индексы.

: корень {
  позиция подчеркивания текста: под;
}
611111111111111111111111111111111111116. 1111111111111111111111111111111111111.111111111111111111111111111111112. Включите JavaScript для просмотра данных.
  • Свойство text-decoration является сокращением для настройки большинства свойств text-decoration, включая text-decoration-line , text-decoration-color и text-decoration-style . Однако он не устанавливает text-underline-position .

Последнее изменение: , участниками MDN

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

❮ Назад Полное руководство по CSS Следующий ❯


Пример

Установка различных вариантов оформления текста для элементов

,

и

:

h2 {
  text-decoration: overline;
}

h3 {
  text-decoration: line-through;
}

h4 {
  text-decoration: underline;
}

h5 {
  украшение текста: подчеркивание надчеркнуть;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Свойство text-decoration определяет украшение, добавляемое к тексту, и является сокращением свойство для:

  • text-decoration-line (обязательно)
  • цвет текста-декорации
  • стиль оформления текста
  • толщина оформления текста

Показать демо ❯

Спецификация
CSS Text Decoration Module Уровень 3
# Text-Underline-Position-Property
Значение по умолчанию: нет currentColor сплошной авто
По наследству: №
Анимация: нет, см. отдельные свойства . Читать о анимированном
Версия: CSS1, обновлено в CSS3
Синтаксис JavaScript: объект .style.textDecoration=»подчеркивание» Попытайся

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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Собственность
текстовое украшение 1,0 3,0 1,0 1,0 3,5

Синтаксис CSS

text-decoration: text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness |initial|inherit;

Значения свойств

Значение Описание Демо
строка оформления текста Устанавливает тип оформления текста (например, подчеркивание, надчеркивание, проходной) Демонстрация ❯
цвет оформления текста Задает цвет оформления текста Демонстрация ❯
стиль оформления текста Устанавливает стиль оформления текста (например, сплошной, волнистый, пунктирный, пунктирный, двойной) Демонстрация ❯
толщина оформления текста Устанавливает толщину декоративной линии
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о наследовать

Другие примеры

Пример

Добавить больше оформления текста:

h2 {
  text-decoration: подчеркивание, надчеркивание, пунктирная красная точка;
}

h3 {
  текстовое оформление: подчеркивание волнистое синий 5px;
}

Попробуйте сами »

Связанные страницы

Учебник CSS: Оформление текста CSS

Ссылка HTML DOM: свойство textDecoration

❮ Предыдущая Полное руководство по CSS Далее ❯


НОВИНКА

Мы только что выпустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру

Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery 
 
 17 Основные ссылки Справочник по HTML 
 Справочник по CSS 
 Справочник по JavaScript 
 Справочник по SQL 
 Справочник по Python 
 Справочник по W3.CSS 
 Справочник по Bootstrap 
 Справочник по PHP 
 Цвета HTML 
 Справочник по Java 
 Справочник по Angular 
 Справочник по jQuery 
 Top Examples
Примеры HTML 
 Примеры CSS 
 Примеры JavaScript 
 Примеры How To 
 Примеры SQL 
 Примеры Python 
 Примеры W3.CSS 
 Примеры Bootstrap 
 Примеры PHP 
 Примеры Java 
 Примеры XML 
 Примеры jQuery 
 ФОРУМ |
 О
 W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Comments
Leave Comment