Css font underline: Свойство text-decoration, подчёркивание и другие эффекты — Оформление текста — HTML Academy

Разное 

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

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

Try it

Syntax

/ * Одно ключевое слово * /
text-underline-position: auto;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;
/ * Несколько ключевых слов * /
text-underline-position: under left;
text-underline-position: right under;
/ * Глобальные значения * /
text-underline-position: inherit;
text-underline-position: initial;
text-underline-position: revert;
text-underline-position: revert-layer;
text-underline-position: unset;

Values

auto

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

from-font

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

under

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

left

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

right

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

auto-pos Non-standard Experimental

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

above Non-standard

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

below Non-standard

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

Formal definition

Initial valueauto
Applies toall elements
Inheritedyes
Computed valueas specified
Animation typediscrete

Formal syntax

text-underline-position =   auto                           |  [ under || [ left | right ] ]

Examples

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

Давайте рассмотрим несколько простых примеров абзацев:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
 
Nullam consectetur ac turpis vel laoreet. Nullam volutpat pharetra lorem, sit
amet feugiat tortor volutpat quis. Nam eget sodales quam. Aliquam accumsan
tellus ac erat posuere.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam consectetur ac turpis vel laoreet. Nullam volutpat pharetra lorem, sit
amet feugiat tortor volutpat quis. Nam eget sodales quam. Aliquam accumsan
tellus ac erat posuere.</p>

Наш CSS выглядит следующим образом:

p {
  font-size: 1.5rem;
  text-transform: capitalize;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.horizontal {
  text-underline-position: under;
}
.vertical {
  writing-mode: vertical-rl;
  text-underline-position: left;
}

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

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

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

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

Поскольку свойство

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

:root {
  text-underline-position: under;
}

Specifications

Specification
Модуль оформления текста CSS, уровень 3
# text-underline-position-property

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox для AndroidOpera AndroidSafari на IOSSamsung Internet
text-underline-position

33

12

74

6

20

12. 1

9

4.4.3

33

No

20

No

2.0

above_below

No

12-79

74

6

No

No

No

No

No

No

No

No

auto-pos

No

12-79

No

6

No

No

No

No

No

No

No

No

from-font

87

87

74

No

No

No

87

87

No

No

No

14.0

left_right

71

79

74

No

58

No

71

71

No

50

No

10. 0

under

33

79

74

No

20

12.1

4.4.3

33

No

20

No

2.0

See also

  • Свойство text-decoration является сокращением для установки большинства свойств текстового оформления, в том числе text-decoration-line , text-decoration-color и
    text-decoration-style     . Тем не менее, он не устанавливает text-underline-position .

CSS

  • Пример использования «полной ширины» (японская катакана половинной ширины)

    Японская катакана половинной ширины использовалась для представления 8-битных кодов символов.

  • text-underline-offset

    CSS-свойство text-underline-offset устанавливает дистанционное оформление (применяемое с помощью text-decoration)от его исходного положения.

  • <time>

    Тип данных CSS <time> представляет значение, выраженное в секундах или миллисекундах.

  • <time-percentage>

    Тип данных CSS <time-percentage> представляет собой значение, которое может быть или или Обратитесь к документации за подробностями <time> и <percentage> отдельных

  • 1
  • …
  • 797
  • 798
  • 799
  • 800
  • 801
  • …
  • 857
  • Next

css властивість text-decoration-line

  • Головна
  • css
  • властивості
  • text-decoration-line

CSS властивість text-decoration-line визначає розміщення декоративної лінії — під текстом, посередині, над текстом.

Одночасно дозволено застосовувати більш декілька стилів, перераховуючи значення через пропуск.

Нотатка:

При одночасному налаштуванні декількох властивостей оздоблення рядка, можливо, буде зручніше скористатися властивістю text-decoration.

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтакс

text-decoration-line: none|underline|overline|line-through|initial|inherit;

Властивість text-decoration-line може отримувати 6 значень:

none

Текст без декоративної лінії. Без задання. Примітка: Підкреслення у посилань, теж, зникне.

underline

Підкреслений текст.

overline

Декоративна лінія над текстом.

line-through

Перекреслений текст.

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента.

Значення без задання:none
Наслідує:Ні
Анімується:Ні
JavaScript синтаксис:object.style.textDecorationLine=»overline»

Переглядачі

  • Стаціонарні переглядачі
  • Мобільні переглядачі
Переглядач
text-decoration-line

57. 0

Не підтримується

36.0
6.0 -moz-

7.1 -webkit-

44.0

Не підтримується

Переглядач
text-decoration-line

Не підтримується

36.0
6.0 -moz-

8.0 -webkit-

Приклади

  • Приклад 1
  • Приклад 2

Приклад використання

Відображає елемент з лінією над рядками
p { 


  -moz-text-decoration-line: overline; /* Code for Firefox */ 


  text-decoration-line: overline; 


} 
Додаткові посилання
text-decoration-color
text-decoration
text-shadow
text-decoration-style
box-decoration-break
 underline-offset — CSS: Каскадные таблицы стилей 
 Свойство CSS   text-underline-offset   задает расстояние смещения линии оформления подчеркивания текста (применяется с использованием  text-decoration  ) от исходного положения.
  text-underline-offset  не является частью сокращения  text-decoration . В то время как элемент может иметь несколько строк  text-decoration ,  text-underline-offset  влияет только на подчеркивание и  вместо  другие возможные варианты оформления строки, такие как  поверх линии  или  сквозная линия  .
 Синтаксис 
 /* Одно ключевое слово */
смещение подчеркивания текста: авто;
/* длина */
смещение подчеркивания текста: 0,1 em;
смещение подчеркивания текста: 3 пикселя;
/* процент */
смещение подчеркивания текста: 20%;
/* Глобальные значения */
смещение текста-подчеркивания: наследовать;
смещение подчеркивания текста: начальное;
смещение подчеркивания текста: не установлено;
 
 Свойство  text-underline-offset  указывается как одно значение из списка ниже.
 Значения 
  авто 
 Браузер выбирает подходящее смещение для подчеркивания.
  <длина> 
 Указывает смещение подчеркивания как    , переопределяя предложение файла шрифта и браузер по умолчанию. Рекомендуется использовать единицы  em , чтобы смещение масштабировалось вместе с размером шрифта.
  <процент> 
 Указывает смещение подчеркивания как  <процент>  из  1 em  в шрифте элемента. Процент наследуется как относительное значение и, следовательно, масштабируется при изменении шрифта. Для данного применения этого свойства смещение является постоянным для всего поля, к которому применяется подчеркивание, даже если есть дочерние элементы с разными размерами шрифта или выравниванием по вертикали.
 Формальное определение 
 Начальное значение  авто 
 Относится ко всем элементам. Это также относится к  ::first-letter  и  ::first-line  .
 Унаследован Да
 Проценты См. Размер шрифта самого элемента
 Вычисленная стоимость As Specied
. Вычисленная стоимость As Specied
.
 Формальный синтаксис 
 авто | <длина> | <процент> 
 Примеры 
 
Вот текст со смещенным волнистым красным подчеркиванием!




В этом тексте есть строки как сверху, так и снизу. Смещен только нижний.
 
 р {
  оформление текста: подчеркивание волнистым красным цветом;
  смещение подчеркивания текста: 1em;
}
.twolines {
  цвет оформления текста: фиолетовый;
  text-decoration-line: подчеркивание над чертой;
} 
 Технические характеристики 
 Спецификация Статус Комментарий
 Модуль оформления текста CSS, уровень 4 
  Определение ‘text-underline-offset’ в этой спецификации. 		 Рабочий проект Исходное определение.
 Совместимость с браузером 
 Таблица совместимости на этой странице создана на основе структурированных данных. Если вы хотите внести свой вклад в данные, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос на включение.
 Desktop Mobile
 Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari на iOS Samsung Internet
  text-underline-offset  Chrome  Без поддержки  № Край  Без поддержки  № Firefox  Полная поддержка  70
  Полная поддержка  70
  Полная поддержка  69
  Инвалиды 
  Disabled  Начиная с версии 69: эта функция находится за предпочтением  layout. css.text-underline-offset.enabled  (должно быть установлено значение  true  ). Чтобы изменить настройки в Firefox, посетите страницу about:config.
 ИЭ  Без поддержки  № Опера  Без поддержки  № Сафари  Полная поддержка  12.1 Веб-просмотр Android  Без поддержки  № Chrome Android  Без поддержки  № Firefox Android  Без поддержки  № Opera Android  Без поддержки  № Safari iOS  Полная поддержка  12,2 Самсунг Интернет Android  Без поддержки  №
 Процентное значение Хром  Без поддержки  № Край  Без поддержки  № Firefox  Полная поддержка  74 ИЭ  Без поддержки  № Опера  Без поддержки  № Сафари  Без поддержки  № WebView Android  Без поддержки  № Chrome Android  Без поддержки  № Firefox Android  Без поддержки  № Опера Android  Без поддержки  № Safari iOS  Без поддержки  № Samsung Интернет Android  Без поддержки  №
 Легенда 
  Полная поддержка 
 Полная опора
  Без поддержки 
 Нет поддержки
  Пользователь должен явно включить эту функцию. 
 Пользователь должен явно включить эту функцию.
 См. также 
  •   украшение текста 
  •   толщина оформления текста 
 Как установить промежуток между текстом и подчеркиванием с помощью CSS? 
   
  <   html   > 
      
  <   head   > 
         <   title   > 
             How to Set the Gap Между текстом 
             и подчеркиванием с помощью CSS? 
           заголовок   > 
  
    <  Стиль  > 
   .
No related posts.
 
     Автор записи 
Добавить комментарий 
Ваш адрес email не будет опубликован. Обязательные поля помечены *